@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/date-picker/date-picker-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseDatePickerContext } from './use-date-picker-context.js'
+
+  export interface DatePickerContextProps {
+    render: Snippet<[UseDatePickerContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  let { render }: DatePickerContextProps = $props()
+
+  const context = useDatePickerContext()
+</script>
+
+{@render render(context)}

package/dist/components/date-picker/date-picker-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseDatePickerContext } from './use-date-picker-context.js';
+export interface DatePickerContextProps {
+    render: Snippet<[UseDatePickerContext]>;
+}
+declare const DatePickerContext: import("svelte").Component<DatePickerContextProps, {}, "">;
+type DatePickerContext = ReturnType<typeof DatePickerContext>;
+export default DatePickerContext;

package/dist/components/date-picker/date-picker-control.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface DatePickerControlProps extends Assign<HTMLProps<'div'>, DatePickerControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  const props: DatePickerControlProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getControlProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/date-picker/date-picker-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerControlBaseProps extends PolymorphicProps<'div'> {
+}
+export interface DatePickerControlProps extends Assign<HTMLProps<'div'>, DatePickerControlBaseProps> {
+}
+declare const DatePickerControl: import("svelte").Component<DatePickerControlProps, {}, "">;
+type DatePickerControl = ReturnType<typeof DatePickerControl>;
+export default DatePickerControl;

package/dist/components/date-picker/date-picker-input.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { InputProps } from '@zag-js/date-picker'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerInputBaseProps extends InputProps, PolymorphicProps<'input'> {}
+  export interface DatePickerInputProps extends Assign<HTMLProps<'input'>, DatePickerInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  const props: DatePickerInputProps = $props()
+
+  const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['index', 'fixOnBlur']))
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getInputProps(inputProps), localProps))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/date-picker/date-picker-input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { InputProps } from '@zag-js/date-picker';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerInputBaseProps extends InputProps, PolymorphicProps<'input'> {
+}
+export interface DatePickerInputProps extends Assign<HTMLProps<'input'>, DatePickerInputBaseProps> {
+}
+declare const DatePickerInput: import("svelte").Component<DatePickerInputProps, {}, "">;
+type DatePickerInput = ReturnType<typeof DatePickerInput>;
+export default DatePickerInput;

package/dist/components/date-picker/date-picker-label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface DatePickerLabelProps extends Assign<HTMLProps<'label'>, DatePickerLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  const props: DatePickerLabelProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getLabelProps(), props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/date-picker/date-picker-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerLabelBaseProps extends PolymorphicProps<'label'> {
+}
+export interface DatePickerLabelProps extends Assign<HTMLProps<'label'>, DatePickerLabelBaseProps> {
+}
+declare const DatePickerLabel: import("svelte").Component<DatePickerLabelProps, {}, "">;
+type DatePickerLabel = ReturnType<typeof DatePickerLabel>;
+export default DatePickerLabel;

package/dist/components/date-picker/date-picker-month-select.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerMonthSelectBaseProps extends PolymorphicProps<'select'> {}
+  export interface DatePickerMonthSelectProps extends Assign<HTMLProps<'select'>, DatePickerMonthSelectBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  const props: DatePickerMonthSelectProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getMonthSelectProps(), props))
+</script>
+
+<Ark as="select" {...mergedProps}>
+  {#each datePicker().getMonths() as month, i}
+    <option value={month.value}>
+      {month.label}
+    </option>
+  {/each}
+</Ark>

package/dist/components/date-picker/date-picker-month-select.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerMonthSelectBaseProps extends PolymorphicProps<'select'> {
+}
+export interface DatePickerMonthSelectProps extends Assign<HTMLProps<'select'>, DatePickerMonthSelectBaseProps> {
+}
+declare const DatePickerMonthSelect: import("svelte").Component<DatePickerMonthSelectProps, {}, "">;
+type DatePickerMonthSelect = ReturnType<typeof DatePickerMonthSelect>;
+export default DatePickerMonthSelect;

package/dist/components/date-picker/date-picker-next-trigger.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerNextTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DatePickerNextTriggerProps extends Assign<HTMLProps<'button'>, DatePickerNextTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+  import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
+
+  const props: DatePickerNextTriggerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const viewProps = useDatePickerViewPropsContext()
+  const mergedProps = $derived(mergeProps(datePicker().getNextTriggerProps(viewProps()), props))
+</script>
+
+<Ark as="button" {...mergedProps} /> 

package/dist/components/date-picker/date-picker-next-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerNextTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface DatePickerNextTriggerProps extends Assign<HTMLProps<'button'>, DatePickerNextTriggerBaseProps> {
+}
+declare const DatePickerNextTrigger: import("svelte").Component<DatePickerNextTriggerProps, {}, "">;
+type DatePickerNextTrigger = ReturnType<typeof DatePickerNextTrigger>;
+export default DatePickerNextTrigger;

package/dist/components/date-picker/date-picker-positioner.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface DatePickerPositionerProps extends Assign<HTMLProps<'div'>, DatePickerPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+  import { usePresenceContext } from '../presence/index.js'
+
+  const props: DatePickerPositionerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(datePicker().getPositionerProps(), props))
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} />
+{/if}

package/dist/components/date-picker/date-picker-positioner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerPositionerBaseProps extends PolymorphicProps<'div'> {
+}
+export interface DatePickerPositionerProps extends Assign<HTMLProps<'div'>, DatePickerPositionerBaseProps> {
+}
+declare const DatePickerPositioner: import("svelte").Component<DatePickerPositionerProps, {}, "">;
+type DatePickerPositioner = ReturnType<typeof DatePickerPositioner>;
+export default DatePickerPositioner;

package/dist/components/date-picker/date-picker-preset-trigger.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { PresetTriggerProps } from '@zag-js/date-picker'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerPresetTriggerBaseProps extends PresetTriggerProps, PolymorphicProps<'button'> {}
+  export interface DatePickerPresetTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPresetTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  const props: DatePickerPresetTriggerProps = $props()
+
+  const [presetTriggerProps, localProps] = $derived(createSplitProps<PresetTriggerProps>()(props, ['value']))
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getPresetTriggerProps(presetTriggerProps), localProps))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/date-picker/date-picker-preset-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PresetTriggerProps } from '@zag-js/date-picker';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerPresetTriggerBaseProps extends PresetTriggerProps, PolymorphicProps<'button'> {
+}
+export interface DatePickerPresetTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPresetTriggerBaseProps> {
+}
+declare const DatePickerPresetTrigger: import("svelte").Component<DatePickerPresetTriggerProps, {}, "">;
+type DatePickerPresetTrigger = ReturnType<typeof DatePickerPresetTrigger>;
+export default DatePickerPresetTrigger;

package/dist/components/date-picker/date-picker-prev-trigger.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerPrevTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DatePickerPrevTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPrevTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+  import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
+
+  const props: DatePickerPrevTriggerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const viewProps = useDatePickerViewPropsContext()
+  const mergedProps = $derived(mergeProps(datePicker().getPrevTriggerProps(viewProps()), props))
+</script>
+
+<Ark as="button" {...mergedProps} /> 

package/dist/components/date-picker/date-picker-prev-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerPrevTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface DatePickerPrevTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPrevTriggerBaseProps> {
+}
+declare const DatePickerPrevTrigger: import("svelte").Component<DatePickerPrevTriggerProps, {}, "">;
+type DatePickerPrevTrigger = ReturnType<typeof DatePickerPrevTrigger>;
+export default DatePickerPrevTrigger;

package/dist/components/date-picker/date-picker-range-text.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerRangeTextBaseProps extends PolymorphicProps<'div'> {}
+  export interface DatePickerRangeTextProps extends Assign<HTMLProps<'div'>, DatePickerRangeTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { uniq } from '@zag-js/utils'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  const props: DatePickerRangeTextProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getRangeTextProps(), props))
+
+  const visibleRangeText = $derived.by(() => {
+    const { start, end } = datePicker().visibleRangeText
+    return uniq([start, end]).filter(Boolean).join(' - ')
+  })
+</script>
+
+<Ark as="div" {...mergedProps}>
+  {visibleRangeText}
+</Ark>

package/dist/components/date-picker/date-picker-range-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerRangeTextBaseProps extends PolymorphicProps<'div'> {
+}
+export interface DatePickerRangeTextProps extends Assign<HTMLProps<'div'>, DatePickerRangeTextBaseProps> {
+}
+declare const DatePickerRangeText: import("svelte").Component<DatePickerRangeTextProps, {}, "">;
+type DatePickerRangeText = ReturnType<typeof DatePickerRangeText>;
+export default DatePickerRangeText;

package/dist/components/date-picker/date-picker-root-provider.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { UsePresenceProps } from '../presence/index.js'
+  import type { UseDatePickerReturn } from './use-date-picker.svelte.js'
+
+  interface RootProviderProps {
+    value: UseDatePickerReturn
+  }
+
+  export interface DatePickerRootProviderBaseProps
+    extends RootProviderProps,
+      UsePresenceProps,
+      PolymorphicProps<'div'> {}
+  export interface DatePickerRootProviderProps extends Assign<HTMLProps<'div'>, DatePickerRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence/index.js'
+  import { DatePickerProvider } from './use-date-picker-context.js'
+
+  const { value, ...props }: DatePickerRootProviderProps = $props()
+
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+
+  const presence = usePresence(() => ({ present: value().open, ...presenceProps }))
+  const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
+
+  DatePickerProvider(value)
+  PresenceProvider(presence)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/date-picker/date-picker-root-provider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { UsePresenceProps } from '../presence/index.js';
+import type { UseDatePickerReturn } from './use-date-picker.svelte.js';
+interface RootProviderProps {
+    value: UseDatePickerReturn;
+}
+export interface DatePickerRootProviderBaseProps extends RootProviderProps, UsePresenceProps, PolymorphicProps<'div'> {
+}
+export interface DatePickerRootProviderProps extends Assign<HTMLProps<'div'>, DatePickerRootProviderBaseProps> {
+}
+declare const DatePickerRootProvider: import("svelte").Component<DatePickerRootProviderProps, {}, "">;
+type DatePickerRootProvider = ReturnType<typeof DatePickerRootProvider>;
+export default DatePickerRootProvider;

package/dist/components/date-picker/date-picker-root.svelte

@@ -0,0 +1,101 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { UseDatePickerProps } from './use-date-picker.svelte.js'
+  import type { UsePresenceProps } from '../presence/index.js'
+
+  export interface DatePickerRootBaseProps extends UseDatePickerProps, UsePresenceProps, PolymorphicProps<'div'> {}
+  export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+  import { Ark } from '../factory/index.js'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence/index.js'
+  import { useDatePicker } from './use-date-picker.svelte.js'
+  import { DatePickerProvider } from './use-date-picker-context.js'
+
+  let {
+    value = $bindable(),
+    focusedValue = $bindable(),
+    open = $bindable(),
+    view = $bindable(),
+    ...props
+  }: DatePickerRootProps = $props()
+  const providedId = $props.id()
+
+  const [presenceProps, datePickerProps] = $derived(splitPresenceProps(props))
+  const [useDatePickerProps, localProps] = $derived(
+    createSplitProps<UseDatePickerProps>()(datePickerProps, [
+      'closeOnSelect',
+      'defaultFocusedValue',
+      'defaultOpen',
+      'defaultValue',
+      'defaultView',
+      'disabled',
+      'fixedWeeks',
+      'focusedValue',
+      'format',
+      'id',
+      'ids',
+      'isDateUnavailable',
+      'locale',
+      'max',
+      'maxView',
+      'min',
+      'minView',
+      'name',
+      'numOfMonths',
+      'onFocusChange',
+      'onOpenChange',
+      'onValueChange',
+      'onViewChange',
+      'open',
+      'outsideDaySelectable',
+      'parse',
+      'placeholder',
+      'positioning',
+      'readOnly',
+      'selectionMode',
+      'startOfWeek',
+      'timeZone',
+      'translations',
+      'value',
+      'view',
+    ]),
+  )
+
+  const resolvedProps = $derived<UseDatePickerProps>({
+    ...useDatePickerProps,
+    id: useDatePickerProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      useDatePickerProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+    focusedValue,
+    onFocusChange(details) {
+      useDatePickerProps.onFocusChange?.(details)
+      if (focusedValue !== undefined) focusedValue = details.focusedValue
+    },
+    open,
+    onOpenChange(details) {
+      useDatePickerProps.onOpenChange?.(details)
+      if (open !== undefined) open = details.open
+    },
+    view,
+    onViewChange(details) {
+      useDatePickerProps.onViewChange?.(details)
+      if (view !== undefined) view = details.view
+    },
+  })
+
+  const datePicker = useDatePicker(() => resolvedProps)
+  const presence = usePresence(() => ({ present: datePicker().open, ...presenceProps }))
+  const mergedProps = $derived(mergeProps(datePicker().getRootProps(), localProps))
+
+  DatePickerProvider(datePicker)
+  PresenceProvider(presence)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/date-picker/date-picker-root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { UseDatePickerProps } from './use-date-picker.svelte.js';
+import type { UsePresenceProps } from '../presence/index.js';
+export interface DatePickerRootBaseProps extends UseDatePickerProps, UsePresenceProps, PolymorphicProps<'div'> {
+}
+export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {
+}
+declare const DatePickerRoot: import("svelte").Component<DatePickerRootProps, {}, "view" | "value" | "open" | "focusedValue">;
+type DatePickerRoot = ReturnType<typeof DatePickerRoot>;
+export default DatePickerRoot;

package/dist/components/date-picker/date-picker-table-body.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerTableBodyBaseProps extends PolymorphicProps<'tbody'> {}
+  export interface DatePickerTableBodyProps extends Assign<HTMLProps<'tbody'>, DatePickerTableBodyBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+
+  const props: DatePickerTableBodyProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getTableBodyProps(), props))
+</script>
+
+<Ark as="tbody" {...mergedProps} />

package/dist/components/date-picker/date-picker-table-body.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerTableBodyBaseProps extends PolymorphicProps<'tbody'> {
+}
+export interface DatePickerTableBodyProps extends Assign<HTMLProps<'tbody'>, DatePickerTableBodyBaseProps> {
+}
+declare const DatePickerTableBody: import("svelte").Component<DatePickerTableBodyProps, {}, "">;
+type DatePickerTableBody = ReturnType<typeof DatePickerTableBody>;
+export default DatePickerTableBody;

package/dist/components/date-picker/date-picker-table-cell-trigger.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface DatePickerTableCellTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface DatePickerTableCellTriggerProps
+    extends Assign<HTMLProps<'button'>, DatePickerTableCellTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+  import { useDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js'
+  import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
+
+  const props: DatePickerTableCellTriggerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const cellProps = useDatePickerTableCellPropsContext()
+  const viewProps = useDatePickerViewPropsContext()
+
+  const triggerProps = $derived.by(() => {
+    const viewMap = {
+      day: datePicker().getDayTableCellTriggerProps,
+      month: datePicker().getMonthTableCellTriggerProps,
+      year: datePicker().getYearTableCellTriggerProps,
+    }
+
+    // @ts-expect-error fix later
+    const viewFn = viewMap[viewProps().view]
+
+    return viewFn(cellProps())
+  })
+
+  const mergedProps = $derived(mergeProps(triggerProps, props))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/date-picker/date-picker-table-cell-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface DatePickerTableCellTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface DatePickerTableCellTriggerProps extends Assign<HTMLProps<'button'>, DatePickerTableCellTriggerBaseProps> {
+}
+declare const DatePickerTableCellTrigger: import("svelte").Component<DatePickerTableCellTriggerProps, {}, "">;
+type DatePickerTableCellTrigger = ReturnType<typeof DatePickerTableCellTrigger>;
+export default DatePickerTableCellTrigger;

package/dist/components/date-picker/date-picker-table-cell.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import type { UseDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js'
+
+  export interface DatePickerTableCellBaseProps
+    extends ReturnType<UseDatePickerTableCellPropsContext>,
+      PolymorphicProps<'td'> {}
+  export interface DatePickerTableCellProps extends Assign<HTMLProps<'td'>, DatePickerTableCellBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+  import { Ark } from '../factory/index.js'
+  import { useDatePickerContext } from './use-date-picker-context.js'
+  import { DatePickerTableCellPropsProvider } from './use-date-picker-table-cell-props-context.js'
+  import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context.js'
+
+  const props: DatePickerTableCellProps = $props()
+
+  const [cellProps, localProps] = $derived(
+    createSplitProps<ReturnType<UseDatePickerTableCellPropsContext>>()(props, [
+      'disabled',
+      'value',
+      'visibleRange',
+      'columns',
+    ]),
+  )
+
+  const datePicker = useDatePickerContext()
+  const viewProps = useDatePickerViewPropsContext()
+
+  const tableCellProps = $derived(() => {
+    const viewMap = {
+      day: datePicker().getDayTableCellProps,
+      month: datePicker().getMonthTableCellProps,
+      year: datePicker().getYearTableCellProps,
+    }
+
+    // @ts-expect-error value is number filter
+    return viewMap[viewProps().view](cellProps)
+  })
+
+  const mergedProps = $derived(mergeProps(tableCellProps, localProps))
+
+  DatePickerTableCellPropsProvider(() => cellProps)
+</script>
+
+<Ark as="td" {...mergedProps} />

package/dist/components/date-picker/date-picker-table-cell.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { UseDatePickerTableCellPropsContext } from './use-date-picker-table-cell-props-context.js';
+export interface DatePickerTableCellBaseProps extends ReturnType<UseDatePickerTableCellPropsContext>, PolymorphicProps<'td'> {
+}
+export interface DatePickerTableCellProps extends Assign<HTMLProps<'td'>, DatePickerTableCellBaseProps> {
+}
+declare const DatePickerTableCell: import("svelte").Component<DatePickerTableCellProps, {}, "">;
+type DatePickerTableCell = ReturnType<typeof DatePickerTableCell>;
+export default DatePickerTableCell;