ui-ingredients 0.0.37 → 0.0.38

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,11 @@ 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 {

package/dist/switch/hidden-input.svelte

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

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,11 @@ 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 {

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

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

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)),

package/dist/tags-input/item.svelte

@@ -14,13 +14,13 @@
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
   import {
-    tagsInputContext,
-    tagsInputItemPropsContext,
+    getTagsInputContext,
+    setTagsInputItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: TagsInputItemProps = $props();
 
-  let tagsInput = tagsInputContext.get();
+  let tagsInput = getTagsInputContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['index', 'value', 'disabled'])(props),
@@ -32,7 +32,7 @@
     mergeProps(otherProps, tagsInput.getItemProps(itemProps)),
   );
 
-  tagsInputItemPropsContext.set(() => itemProps);
+  setTagsInputItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/tags-input/label.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}: TagsInputLabelProps = $props();
 
-  let tagsInput = tagsInputContext.get();
+  let tagsInput = getTagsInputContext();
 
   let mergedProps = $derived(mergeProps(props, tagsInput.getLabelProps()));
 </script>

package/dist/tags-input/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 {tagsInputContext} from './context.svelte.js';
+  import {setTagsInputContext} from './context.svelte.js';
   import {createTagsInput} from './create-tags-input.svelte.js';
 
   let {asChild, children, ...props}: TagsInputProps = $props();
@@ -58,7 +58,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, tagsInput.getRootProps()));
 
-  tagsInputContext.set(tagsInput);
+  setTagsInputContext(tagsInput);
 </script>
 
 {#if asChild}

package/dist/time-picker/clear-trigger.svelte

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

package/dist/time-picker/column.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timePickerContext} from './context.svelte.js';
+  import {getTimePickerContext} from './context.svelte.js';
 
   let {unit, asChild, children, ...props}: TimePickerColumnProps = $props();
 
-  let timePicker = timePickerContext.get();
+  let timePicker = getTimePickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, timePicker.getColumnProps({unit})),

package/dist/time-picker/content.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timePickerContext} from './context.svelte.js';
+  import {getTimePickerContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimePickerContentProps = $props();
 
-  let timePicker = timePickerContext.get();
+  let timePicker = getTimePickerContext();
 
   let mergedProps = $derived(mergeProps(props, timePicker.getContentProps()));
 </script>

package/dist/time-picker/context.svelte.d.ts

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateTimePickerReturn } from './create-time-picker.svelte.js';
-export declare const timePickerContext: Context<CreateTimePickerReturn>;
+export declare const getTimePickerContext: () => CreateTimePickerReturn, setTimePickerContext: (context: CreateTimePickerReturn | (() => CreateTimePickerReturn)) => void;

package/dist/time-picker/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const timePickerContext = new Context('TimePicker');
+import { createContext } from '../create-context.svelte.js';
+export const [getTimePickerContext, setTimePickerContext] = createContext('TimePicker');

package/dist/time-picker/control.svelte

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

package/dist/time-picker/create-time-picker.svelte.js

@@ -6,15 +6,17 @@ import { uid } from 'uid';
 export function createTimePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(timePicker.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.defaultOpen != null,
-    }));
+    })));
+    const [state, send] = useMachine(timePicker.machine(context), { context });
     const api = $derived(reflect(() => timePicker.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/time-picker/hour-cell.svelte

@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {timePickerContext} from './context.svelte.js';
+  import {getTimePickerContext} from './context.svelte.js';
 
   let {value, asChild, children, ...props}: TimePickerHourCellProps = $props();
 
-  let timePicker = timePickerContext.get();
+  let timePicker = getTimePickerContext();
 
   let mergedProps = $derived(
     mergeProps(props, timePicker.getHourCellProps({value})),