ui-ingredients 0.0.45 → 0.0.47

package/dist/time-picker/control.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerControlProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerControlProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimePickerControlProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: TimePickerHourCellProps = $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: TimePickerHourCellProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -22,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CellProps } from '@zag-js/time-picker';
+export interface TimePickerHourCellProps extends Assign<HtmlIngredientProps<'div'>, CellProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/time-picker/input.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, ...props}: TimePickerInputProps = $props();
+  let {this: e, asChild, ...props}: TimePickerInputProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -18,5 +18,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input {...mergedProps} />
+  <input bind:this={e} {...mergedProps} />
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimePickerInputProps extends HtmlIngredientProps<'input'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/time-picker/label.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerLabelProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerLabelProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <label {...mergedProps}>
+  <label bind:this={e} {...mergedProps}>
     {@render children?.()}
   </label>
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimePickerLabelProps extends HtmlIngredientProps<'label'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -10,8 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: TimePickerMinuteCellProps =
-    $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: TimePickerMinuteCellProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -23,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/minute-cell.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CellProps } from '@zag-js/time-picker';
+export interface TimePickerMinuteCellProps extends Assign<HtmlIngredientProps<'div'>, CellProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -10,8 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: TimePickerPeriodCellProps =
-    $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: TimePickerPeriodCellProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -28,7 +33,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/period-cell.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { PeriodCellProps } from '@zag-js/time-picker';
+export interface TimePickerPeriodCellProps extends Assign<HtmlIngredientProps<'div'>, PeriodCellProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/time-picker/positioner.svelte

@@ -10,7 +10,12 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerPositionerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: TimePickerPositionerProps = $props();
 
   let timePicker = getTimePickerContext();
   let presence = getPresenceContext();
@@ -27,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimePickerPositionerProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/time-picker/root.svelte

@@ -23,7 +23,7 @@
   import {setTimePickerContext} from './context.svelte.js';
   import {createTimePicker} from './create-time-picker.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerProps = $props();
 
   let [timePickerProps, rest] = $derived(
     createSplitProps<CreateTimePickerProps>([
@@ -70,7 +70,7 @@
 {#if asChild}
   {@render asChild(mergedProps, timePicker)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(timePicker)}
   </div>
 {/if}

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

@@ -1,3 +1,8 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateTimePickerProps, CreateTimePickerReturn } from './create-time-picker.svelte.js';
+export interface TimePickerProps extends Assign<HtmlIngredientProps<'div', CreateTimePickerReturn>, CreateTimePickerProps>, PresenceStrategyProps {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -10,8 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {value, asChild, children, ...props}: TimePickerSecondCellProps =
-    $props();
+  let {
+    this: e,
+    value,
+    asChild,
+    children,
+    ...props
+  }: TimePickerSecondCellProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -23,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/second-cell.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CellProps } from '@zag-js/time-picker';
+export interface TimePickerSecondCellProps extends Assign<HtmlIngredientProps<'div'>, CellProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/time-picker/spacer.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerSpacerProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerSpacerProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimePickerSpacerProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/time-picker/trigger.svelte

@@ -9,7 +9,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimePickerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimePickerTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: TimePickerTriggerProps = $props();
 
   let timePicker = getTimePickerContext();
 
@@ -19,7 +19,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

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

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimePickerTriggerProps extends HtmlIngredientProps<'button'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/timer/action-trigger.svelte

@@ -10,7 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimerContext} from './context.svelte.js';
 
-  let {action, asChild, children, ...props}: TimerActionTriggerProps = $props();
+  let {
+    this: e,
+    action,
+    asChild,
+    children,
+    ...props
+  }: TimerActionTriggerProps = $props();
 
   let timer = getTimerContext();
 
@@ -22,7 +28,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/timer/action-trigger.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ActionTriggerProps } from '@zag-js/timer';
+export interface TimerActionTriggerProps extends Assign<HtmlIngredientProps<'button'>, ActionTriggerProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/timer/area.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TimerAreaProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getTimerContext} from './context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: TimerAreaProps = $props();
+
+  let timer = getTimerContext();
+
+  let mergedProps = $derived(mergeProps(props, timer.getAreaProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/timer/area.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimerAreaProps extends HtmlIngredientProps<'div'> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Area: $$__sveltets_2_IsomorphicComponent<TimerAreaProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Area = InstanceType<typeof Area>;
+export default Area;

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

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/timer';
 import type { CreateTimerReturn } from './create-timer.svelte.js';
-export declare const getTimerContext: () => CreateTimerReturn, setTimerContext: (context: CreateTimerReturn | (() => CreateTimerReturn)) => void;
-export declare const getTimerItemPropsContext: () => ItemProps, setTimerItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getTimerContext: () => CreateTimerReturn, setTimerContext: (context: CreateTimerReturn | (() => CreateTimerReturn)) => CreateTimerReturn;
+export declare const getTimerItemPropsContext: () => ItemProps, setTimerItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

package/dist/timer/control.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TimerControlProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getTimerContext} from './context.svelte.js';
+
+  let {this: e, asChild, children, ...props}: TimerControlProps = $props();
+
+  let timer = getTimerContext();
+
+  let mergedProps = $derived(mergeProps(props, timer.getControlProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/timer/control.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimerControlProps extends HtmlIngredientProps<'div'> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Control: $$__sveltets_2_IsomorphicComponent<TimerControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Control = InstanceType<typeof Control>;
+export default Control;

package/dist/timer/index.d.ts

@@ -1,5 +1,7 @@
 export * as Timer from './timer.js';
 export type { TimerActionTriggerProps } from './action-trigger.svelte';
+export type { TimerAreaProps } from './area.svelte';
+export type { TimerControlProps } from './control.svelte';
 export type { TimerItemLabelProps } from './item-label.svelte';
 export type { TimerItemValueProps } from './item-value.svelte';
 export type { TimerItemProps } from './item.svelte';

package/dist/timer/item-label.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimerContext, getTimerItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimerItemLabelProps = $props();
+  let {this: e, asChild, children, ...props}: TimerItemLabelProps = $props();
 
   let timer = getTimerContext();
   let itemProps = getTimerItemPropsContext();
@@ -21,7 +21,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/timer/item-label.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimerItemLabelProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/timer/item-value.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimerContext, getTimerItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimerItemValueProps = $props();
+  let {this: e, asChild, children, ...props}: TimerItemValueProps = $props();
 
   let timer = getTimerContext();
   let itemProps = getTimerItemPropsContext();
@@ -21,7 +21,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {#if children}
       {@render children?.()}
     {:else}

package/dist/timer/item-value.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimerItemValueProps extends HtmlIngredientProps<'div'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/timer/item.svelte

@@ -11,7 +11,7 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getTimerContext, setTimerItemPropsContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimerItemProps = $props();
+  let {this: e, asChild, children, ...props}: TimerItemProps = $props();
 
   let timer = getTimerContext();
 
@@ -29,7 +29,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/timer/item.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { ItemProps } from '@zag-js/timer';
+export interface TimerItemProps extends Assign<HtmlIngredientProps<'div'>, ItemProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/timer/root.svelte

@@ -19,7 +19,7 @@
   import {setTimerContext} from './context.svelte.js';
   import {createTimer} from './create-timer.svelte.js';
 
-  let {asChild, children, ...props}: TimerProps = $props();
+  let {this: e, asChild, children, ...props}: TimerProps = $props();
 
   let [timerProps, localProps] = $derived(
     createSplitProps<CreateTimerProps>([
@@ -44,7 +44,7 @@
 {#if asChild}
   {@render asChild(mergedProps, timer)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(timer)}
   </div>
 {/if}

package/dist/timer/root.svelte.d.ts

@@ -1,3 +1,7 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateTimerProps, CreateTimerReturn } from './create-timer.svelte.js';
+export interface TimerProps extends Assign<HtmlIngredientProps<'div', CreateTimerReturn>, CreateTimerProps> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/timer/separator.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getTimerContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: TimerSeparatorProps = $props();
+  let {this: e, asChild, children, ...props}: TimerSeparatorProps = $props();
 
   let timer = getTimerContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/timer/separator.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface TimerSeparatorProps extends HtmlIngredientProps<'span'> {
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/timer/timer.d.ts

@@ -1,5 +1,7 @@
 export { parse } from '@zag-js/timer';
 export { default as ActionTrigger } from './action-trigger.svelte';
+export { default as Area } from './area.svelte';
+export { default as Control } from './control.svelte';
 export { default as ItemLabel } from './item-label.svelte';
 export { default as ItemValue } from './item-value.svelte';
 export { default as Item } from './item.svelte';

package/dist/timer/timer.js

@@ -1,5 +1,7 @@
 export { parse } from '@zag-js/timer';
 export { default as ActionTrigger } from './action-trigger.svelte';
+export { default as Area } from './area.svelte';
+export { default as Control } from './control.svelte';
 export { default as ItemLabel } from './item-label.svelte';
 export { default as ItemValue } from './item-value.svelte';
 export { default as Item } from './item.svelte';