ui-ingredients 0.0.36 → 0.0.38

package/dist/steps/index.js

@@ -1,2 +1,3 @@
 export * as Steps from './steps.js';
 export { anatomy as stepsAnatomy } from '@zag-js/steps';
+export { getStepsContext } from './context.svelte.js';

package/dist/steps/indicator.svelte

@@ -8,13 +8,13 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
+  import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsIndicatorProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
-  let itemProps = stepsItemPropsContext.get();
+  let itemProps = getStepsItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, steps.getIndicatorProps(itemProps)),

package/dist/steps/item.svelte

@@ -13,11 +13,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
+  import {getStepsContext, setStepsItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsItemProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),
@@ -29,7 +29,7 @@
     mergeProps(otherProps, steps.getItemProps(itemProps)),
   );
 
-  stepsItemPropsContext.set(() => itemProps);
+  setStepsItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/steps/list.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext} from './context.svelte.js';
+  import {getStepsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsListProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
   let mergedProps = $derived(mergeProps(props, steps.getListProps()));
 </script>

package/dist/steps/next-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext} from './context.svelte.js';
+  import {getStepsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsNextTriggerProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
   let mergedProps = $derived(mergeProps(props, steps.getNextTriggerProps()));
 </script>

package/dist/steps/prev-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext} from './context.svelte.js';
+  import {getStepsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsPrevTriggerProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
   let mergedProps = $derived(mergeProps(props, steps.getPrevTriggerProps()));
 </script>

package/dist/steps/progress.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext} from './context.svelte.js';
+  import {getStepsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsProgressProps = $props();
 
-  let steps = stepsContext.get();
+  let steps = getStepsContext();
 
   let mergedProps = $derived(mergeProps(props, steps.getProgressProps()));
 </script>

package/dist/steps/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {stepsContext} from './context.svelte.js';
+  import {setStepsContext} from './context.svelte.js';
   import {createSteps} from './create-steps.svelte.js';
 
   let {asChild, children, ...props}: StepsProps = $props();
@@ -39,7 +39,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, steps.getRootProps()));
 
-  stepsContext.set(steps);
+  setStepsContext(steps);
 </script>
 
 {#if asChild}

package/dist/steps/separator.svelte

@@ -8,12 +8,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
+  import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsSeparatorProps = $props();
 
-  let steps = stepsContext.get();
-  let itemProps = stepsItemPropsContext.get();
+  let steps = getStepsContext();
+  let itemProps = getStepsItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, steps.getSeparatorProps(itemProps)),

package/dist/steps/trigger.svelte

@@ -8,12 +8,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
+  import {getStepsContext, getStepsItemPropsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: StepsTriggerProps = $props();
 
-  let steps = stepsContext.get();
-  let itemProps = stepsItemPropsContext.get();
+  let steps = getStepsContext();
+  let itemProps = getStepsItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, steps.getTriggerProps(itemProps)),

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateSwitchReturn } from './create-switch.svelte.js';
-export declare const switchContext: Context<CreateSwitchReturn>;
+export declare const getSwitchContext: () => CreateSwitchReturn, setSwitchContext: (context: CreateSwitchReturn | (() => CreateSwitchReturn)) => void;

package/dist/switch/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const switchContext = new Context('Switch');
+import { createContext } from '../create-context.svelte.js';
+export const [getSwitchContext, setSwitchContext] = createContext('Switch');

package/dist/switch/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {switchContext} from './context.svelte.js';
+  import {getSwitchContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SwitchControlProps = $props();
 
-  let switch$ = switchContext.get();
+  let switch$ = getSwitchContext();
 
   let mergedProps = $derived(mergeProps(props, switch$.getControlProps()));
 </script>

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

@@ -8,7 +8,8 @@ export function createSwitch(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(switch$.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -18,10 +19,22 @@ export function createSwitch(props) {
         invalid: field?.invalid,
         required: field?.required,
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+    })));
+    const [state, send] = useMachine(switch$.machine(context), { context });
+    const api = $derived(reflect(() => {
+        const o = switch$.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => switch$.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/switch/hidden-input.svelte

@@ -5,16 +5,14 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {switchContext} from './context.svelte.js';
+  import {getSwitchContext} from './context.svelte.js';
 
   let {...props}: SwitchHiddenInputProps = $props();
 
-  let field = getFieldContext();
-  let switch$ = switchContext.get();
+  let switch$ = getSwitchContext();
 
   let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/switch/index.d.ts

@@ -5,3 +5,4 @@ export type { SwitchLabelProps } from './label.svelte';
 export type { SwitchProps } from './root.svelte';
 export type { SwitchThumbProps } from './thumb.svelte';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
+export { getSwitchContext } from './context.svelte.js';

package/dist/switch/index.js

@@ -1,2 +1,3 @@
 export * as Switch from './switch.js';
 export { anatomy as switchAnatomy } from '@zag-js/switch';
+export { getSwitchContext } from './context.svelte.js';

package/dist/switch/label.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {switchContext} from './context.svelte.js';
+  import {getSwitchContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SwitchLabelProps = $props();
 
-  let switch$ = switchContext.get();
+  let switch$ = getSwitchContext();
 
   let mergedProps = $derived(mergeProps(props, switch$.getLabelProps()));
 </script>

package/dist/switch/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {switchContext} from './context.svelte.js';
+  import {setSwitchContext} from './context.svelte.js';
   import {createSwitch} from './create-switch.svelte.js';
 
   let {asChild, children, ...props}: SwitchProps = $props();
@@ -43,7 +43,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
 
-  switchContext.set(switch$);
+  setSwitchContext(switch$);
 </script>
 
 {#if asChild}

package/dist/switch/thumb.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {switchContext} from './context.svelte.js';
+  import {getSwitchContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SwitchThumbProps = $props();
 
-  let switch$ = switchContext.get();
+  let switch$ = getSwitchContext();
 
   let mergedProps = $derived(mergeProps(props, switch$.getThumbProps()));
 </script>

package/dist/tabs/content.svelte

@@ -11,11 +11,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {tabsContext} from './context.svelte.js';
+  import {getTabsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TabsContentProps = $props();
 
-  let tabs = tabsContext.get();
+  let tabs = getTabsContext();
 
   let [contentProps, otherProps] = $derived(
     createSplitProps<ContentProps>(['value'])(props),

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

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateTabsReturn } from './create-tabs.svelte.js';
-export declare const tabsContext: Context<CreateTabsReturn>;
+export declare const getTabsContext: () => CreateTabsReturn, setTabsContext: (context: CreateTabsReturn | (() => CreateTabsReturn)) => void;

package/dist/tabs/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const tabsContext = new Context('Tabs');
+import { createContext } from '../create-context.svelte.js';
+export const [getTabsContext, setTabsContext] = createContext('Tabs');

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

@@ -6,12 +6,14 @@ import { uid } from 'uid';
 export function createTabs(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(tabs.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(tabs.machine(context), { context });
     const api = $derived(reflect(() => tabs.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/tabs/index.d.ts

@@ -4,3 +4,4 @@ export type { TabsListProps } from './list.svelte';
 export type { TabsProps } from './root.svelte';
 export type { TabsTriggerProps } from './trigger.svelte';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
+export { getTabsContext } from './context.svelte.js';

package/dist/tabs/index.js

@@ -1,2 +1,3 @@
 export * as Tabs from './tabs.js';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
+export { getTabsContext } from './context.svelte.js';

package/dist/tabs/list.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {tabsContext} from './context.svelte.js';
+  import {getTabsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TabsListProps = $props();
 
-  let tabs = tabsContext.get();
+  let tabs = getTabsContext();
 
   let mergedProps = $derived(mergeProps(props, tabs.getListProps()));
 </script>

package/dist/tabs/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {tabsContext} from './context.svelte.js';
+  import {setTabsContext} from './context.svelte.js';
   import {createTabs} from './create-tabs.svelte.js';
 
   let {asChild, children, ...props}: TabsProps = $props();
@@ -41,7 +41,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, tabs.getRootProps()));
 
-  tabsContext.set(tabs);
+  setTabsContext(tabs);
 </script>
 
 {#if asChild}

package/dist/tabs/trigger.svelte

@@ -11,11 +11,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {tabsContext} from './context.svelte.js';
+  import {getTabsContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TabsTriggerProps = $props();
 
-  let tabs = tabsContext.get();
+  let tabs = getTabsContext();
 
   let [triggerProps, otherProps] = $derived(
     createSplitProps<TriggerProps>(['value', 'disabled'])(props),

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

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {tagsInputContext} from './context.svelte.js';
+  import {getTagsInputContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TagsInputClearTriggerProps = $props();
 
-  let tagsInput = tagsInputContext.get();
+  let tagsInput = getTagsInputContext();
 
   let mergedProps = $derived(
     mergeProps(props, tagsInput.getClearTriggerProps()),

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

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/tags-input';
 import type { CreateTagsInputReturn } from './create-tags-input.svelte.js';
-export declare const tagsInputContext: Context<CreateTagsInputReturn>;
-export declare const tagsInputItemPropsContext: Context<ItemProps>;
+export declare const getTagsInputContext: () => CreateTagsInputReturn, setTagsInputContext: (context: CreateTagsInputReturn | (() => CreateTagsInputReturn)) => void;
+export declare const getTagsInputItemPropsContext: () => ItemProps, setTagsInputItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

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

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const tagsInputContext = new Context('TagsInput');
-export const tagsInputItemPropsContext = new Context('TagsInputItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getTagsInputContext, setTagsInputContext] = createContext('TagsInput');
+export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] = createContext('TagsInputItem');

package/dist/tags-input/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {tagsInputContext} from './context.svelte.js';
+  import {getTagsInputContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TagsInputControlProps = $props();
 
-  let tagsInput = tagsInputContext.get();
+  let tagsInput = getTagsInputContext();
 
   let mergedProps = $derived(mergeProps(props, tagsInput.getControlProps()));
 </script>

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

@@ -8,7 +8,8 @@ export function createTagsInput(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(tagsInput.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -18,10 +19,22 @@ export function createTagsInput(props) {
         readOnly: field?.readOnly,
         required: field?.required,
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+    })));
+    const [state, send] = useMachine(tagsInput.machine(context), { context });
+    const api = $derived(reflect(() => {
+        const o = tagsInput.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => tagsInput.connect(state, send, normalizeProps)));
     return api;
 }

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

@@ -5,18 +5,16 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {tagsInputContext} from './context.svelte.js';
+  import {getTagsInputContext} from './context.svelte.js';
 
   let {...props}: TagsInputHiddenInputProps = $props();
 
-  let field = getFieldContext();
-  let tagsInput = tagsInputContext.get();
+  let tagsInput = getTagsInputContext();
 
   let mergedProps = $derived(
     mergeProps(props, tagsInput.getHiddenInputProps()),
   );
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

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

@@ -11,3 +11,4 @@ export type { TagsInputItemProps } from './item.svelte';
 export type { TagsInputLabelProps } from './label.svelte';
 export type { TagsInputProps } from './root.svelte';
 export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
+export { getTagsInputContext } from './context.svelte.js';

package/dist/tags-input/index.js

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

package/dist/tags-input/input.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {tagsInputContext} from './context.svelte.js';
+  import {getTagsInputContext} from './context.svelte.js';
 
   let {asChild, ...props}: TagsInputInputProps = $props();
 
-  let tagsInput = tagsInputContext.get();
+  let tagsInput = getTagsInputContext();
 
   let mergedProps = $derived(mergeProps(props, tagsInput.getInputProps()));
 </script>

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

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    tagsInputContext,
-    tagsInputItemPropsContext,
+    getTagsInputContext,
+    getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TagsInputItemDeleteTriggerProps = $props();
 
-  let tagsInput = tagsInputContext.get();
-  let itemProps = tagsInputItemPropsContext.get();
+  let tagsInput = getTagsInputContext();
+  let itemProps = getTagsInputItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, tagsInput.getItemDeleteTriggerProps(itemProps)),

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

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    tagsInputContext,
-    tagsInputItemPropsContext,
+    getTagsInputContext,
+    getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, ...props}: TagsInputItemInputProps = $props();
 
-  let tagsInput = tagsInputContext.get();
-  let itemProps = tagsInputItemPropsContext.get();
+  let tagsInput = getTagsInputContext();
+  let itemProps = getTagsInputItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, tagsInput.getItemInputProps(itemProps)),

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

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    tagsInputContext,
-    tagsInputItemPropsContext,
+    getTagsInputContext,
+    getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TagsInputItemPreviewProps = $props();
 
-  let tagsInput = tagsInputContext.get();
-  let itemProps = tagsInputItemPropsContext.get();
+  let tagsInput = getTagsInputContext();
+  let itemProps = getTagsInputItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, tagsInput.getItemPreviewProps(itemProps)),

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

@@ -9,14 +9,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    tagsInputContext,
-    tagsInputItemPropsContext,
+    getTagsInputContext,
+    getTagsInputItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TagsInputItemTextProps = $props();
 
-  let tagsInput = tagsInputContext.get();
-  let itemProps = tagsInputItemPropsContext.get();
+  let tagsInput = getTagsInputContext();
+  let itemProps = getTagsInputItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, tagsInput.getItemTextProps(itemProps)),