ui-ingredients 0.0.24 → 0.0.26

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TagsInputItemTextProps extends HtmlProps<'span'> {}
+  export interface TagsInputItemTextProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext, tagsInputItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: TagsInputItemTextProps = $props();
+  let {asChild, children, ...props}: TagsInputItemTextProps = $props();
 
   let tagsInput = tagsInputContext.get();
   let itemProps = tagsInputItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, tagsInput.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tags-input/item.svelte

@@ -1,26 +1,20 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/tags-input';
   import type {Snippet} from 'svelte';
 
   export interface TagsInputItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext, tagsInputItemPropsContext} from './context.svelte.js';
 
-  let {
-    /**/
-    index,
-    value,
-    disabled,
-    children,
-    ...props
-  }: TagsInputItemProps = $props();
+  let {index, value, disabled, asChild, children, ...props}: TagsInputItemProps = $props();
 
   let tagsInput = tagsInputContext.get();
   let itemProps = $derived({
@@ -35,6 +29,10 @@
   tagsInputItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/tags-input/label.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TagsInputLabelProps extends HtmlProps<'label'> {}
+  export interface TagsInputLabelProps extends HtmlProps<'label'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext} from './context.svelte.js';
 
-  let {children, ...props}: TagsInputLabelProps = $props();
+  let {asChild, children, ...props}: TagsInputLabelProps = $props();
 
   let tagsInput = tagsInputContext.get();
 
   let attrs = $derived(mergeProps(props, tagsInput.getLabelProps()));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/tags-input/root.svelte

@@ -1,16 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateTagsInputProps, CreateTagsInputReturn} from './create-tags-input.svelte.js';
 
   export interface TagsInputProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTagsInputProps> {
+    asChild?: Snippet<
+      [attrs: Omit<GenericHtmlProps, 'children'>, tagsInput: CreateTagsInputReturn]
+    >;
     children?: Snippet<[tagsInput: CreateTagsInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {tagsInputContext} from './context.svelte.js';
   import {createTagsInputt} from './create-tags-input.svelte.js';
 
@@ -42,6 +45,7 @@
     onHighlightChange,
     onInputValueChange,
     onPointerDownOutside,
+    asChild,
     children,
     ...props
   }: TagsInputProps = $props();
@@ -76,11 +80,15 @@
     onPointerDownOutside,
   });
 
-  let attrs = $derived(mergeProps(props, tagsInput.getRootProps()));
+  let attrs = $derived<Record<string, any>>(mergeProps(props, tagsInput.getRootProps()));
 
   tagsInputContext.set(tagsInput);
 </script>
 
-<div {...attrs}>
-  {@render children?.(tagsInput)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, tagsInput)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(tagsInput)}
+  </div>
+{/if}

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

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerClearTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TimePickerClearTriggerProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getClearTriggerProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -0,0 +1,18 @@
+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 ClearTrigger: $$__sveltets_2_IsomorphicComponent<TimePickerClearTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ClearTrigger = InstanceType<typeof ClearTrigger>;
+export default ClearTrigger;

package/dist/time-picker/column.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {ColumnProps} from '@zag-js/time-picker';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerColumnProps extends Assign<HtmlProps<'div'>, ColumnProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {unit, asChild, children, ...props}: TimePickerColumnProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getColumnProps({unit})));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+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 Column: $$__sveltets_2_IsomorphicComponent<TimePickerColumnProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Column = InstanceType<typeof Column>;
+export default Column;

package/dist/time-picker/content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerContentProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TimePickerContentProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getContentProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+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 Content: $$__sveltets_2_IsomorphicComponent<TimePickerContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Content = InstanceType<typeof Content>;
+export default Content;

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

@@ -0,0 +1,3 @@
+import { Context } from '../utils.svelte.js';
+import type { CreateTimePickerReturn } from './create-time-picker.svelte.js';
+export declare const timePickerContext: Context<CreateTimePickerReturn>;

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

@@ -0,0 +1,2 @@
+import { Context } from '../utils.svelte.js';
+export const timePickerContext = new Context('TimePicker');

package/dist/time-picker/control.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerControlProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TimePickerControlProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getControlProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+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<TimePickerControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Control = InstanceType<typeof Control>;
+export default Control;

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

@@ -0,0 +1,8 @@
+import * as timePicker from '@zag-js/time-picker';
+export interface CreateTimePickerProps extends Omit<timePicker.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
+    defaultOpen?: boolean;
+}
+export interface CreateTimePickerReturn extends timePicker.Api {
+}
+export declare function createTimePicker(props: CreateTimePickerProps): CreateTimePickerReturn;

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

@@ -0,0 +1,20 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import * as timePicker from '@zag-js/time-picker';
+export function createTimePicker(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const [state, send] = useMachine(timePicker.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: locale?.dir,
+        open: props.defaultOpen,
+        locale: props.locale ?? locale?.locale,
+        getRootNode: environment?.getRootNode,
+        'open.controlled': props.defaultOpen != null,
+    }));
+    const api = $derived(reflect(() => timePicker.connect(state, send, normalizeProps)));
+    return api;
+}

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

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {CellProps} from '@zag-js/time-picker';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerHourCellProps extends Assign<HtmlProps<'div'>, CellProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: TimePickerHourCellProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getHourCellProps({value})));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+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 HourCell: $$__sveltets_2_IsomorphicComponent<TimePickerHourCellProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type HourCell = InstanceType<typeof HourCell>;
+export default HourCell;

package/dist/time-picker/index.d.ts

@@ -0,0 +1,15 @@
+export * as TimePicker from './time-picker.js';
+export type { TimePickerClearTriggerProps } from './clear-trigger.svelte';
+export type { TimePickerColumnProps } from './column.svelte';
+export type { TimePickerContentProps } from './content.svelte';
+export type { TimePickerControlProps } from './control.svelte';
+export type { TimePickerHourCellProps } from './hour-cell.svelte';
+export type { TimePickerInputProps } from './input.svelte';
+export type { TimePickerLabelProps } from './label.svelte';
+export type { TimePickerMinuteCellProps } from './minute-cell.svelte';
+export type { TimePickerPeriodCellProps } from './period-cell.svelte';
+export type { TimePickerPositionerProps } from './positioner.svelte';
+export type { TimePickerProps } from './root.svelte';
+export type { TimePickerSecondCellProps } from './second-cell.svelte';
+export type { TimePickerSpacerProps } from './spacer.svelte';
+export type { TimePickerTriggerProps } from './trigger.svelte';

package/dist/time-picker/index.js

@@ -0,0 +1 @@
+export * as TimePicker from './time-picker.js';

package/dist/time-picker/input.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerInputProps extends HtmlProps<'input'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TimePickerInputProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getInputProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

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

@@ -0,0 +1,18 @@
+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 Input: $$__sveltets_2_IsomorphicComponent<TimePickerInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/time-picker/label.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerLabelProps extends HtmlProps<'label'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TimePickerLabelProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getLabelProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

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

@@ -0,0 +1,18 @@
+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 Label: $$__sveltets_2_IsomorphicComponent<TimePickerLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Label = InstanceType<typeof Label>;
+export default Label;

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

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {CellProps} from '@zag-js/time-picker';
+  import type {Snippet} from 'svelte';
+
+  export interface TimePickerMinuteCellProps extends Assign<HtmlProps<'div'>, CellProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: TimePickerMinuteCellProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, timePicker.getMinuteCellProps({value})));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,18 @@
+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 MinuteCell: $$__sveltets_2_IsomorphicComponent<TimePickerMinuteCellProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type MinuteCell = InstanceType<typeof MinuteCell>;
+export default MinuteCell;

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

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {PeriodCellProps} from '@zag-js/time-picker';
+
+  export interface TimePickerPeriodCellProps extends Assign<HtmlProps<'div'>, PeriodCellProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {timePickerContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: TimePickerPeriodCellProps = $props();
+
+  let timePicker = timePickerContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      timePicker.getPeriodCellProps({
+        value,
+      }),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}