@sprawlify/svelte 0.0.44 → 0.0.45

package/dist/components/carousel/carousel-anatomy.d.ts

@@ -1 +1 @@
-export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "item" | "control" | "indicator" | "prevTrigger" | "nextTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;
+export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "item" | "control" | "indicator" | "nextTrigger" | "prevTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;

package/dist/components/color-picker/color-picker-anatomy.d.ts

@@ -1 +1 @@
-export declare const colorPickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "area" | "view" | "root" | "content" | "trigger" | "control" | "valueText" | "positioner" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;
+export declare const colorPickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "area" | "view" | "root" | "content" | "trigger" | "control" | "valueText" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;

package/dist/components/combobox/combobox-anatomy.d.ts

@@ -1 +1 @@
-export declare const comboboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "content" | "trigger" | "list" | "item" | "control" | "itemGroup" | "positioner" | "itemIndicator" | "clearTrigger" | "itemText" | "itemGroupLabel" | "empty">;
+export declare const comboboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "content" | "trigger" | "list" | "item" | "control" | "itemGroup" | "positioner" | "itemIndicator" | "itemText" | "clearTrigger" | "itemGroupLabel" | "empty">;

package/dist/components/combobox/combobox-root-provider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { Snippet } from 'svelte'
   import type { CollectionItem } from '../collection/index.js'
   import type { UsePresenceProps } from '../presence/use-presence.svelte.js'
@@ -26,8 +26,8 @@
 
 <script lang="ts" generics="T extends CollectionItem">
   import { mergeProps } from '../../core'
-  import { Sprawlify } from '../factory/index.js'
-  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence/index.js'
+  import { Sprawlify } from '../factory'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
   import { ComboboxProvider } from './use-combobox-context.js'
 
   let { ref = $bindable(null), value, children, ...props }: ComboboxRootProviderProps<T> = $props()

package/dist/components/combobox/combobox-root-provider.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { Snippet } from 'svelte';
 import type { CollectionItem } from '../collection/index.js';
 import type { UsePresenceProps } from '../presence/use-presence.svelte.js';

package/dist/components/date-picker/date-picker-anatomy.d.ts

@@ -0,0 +1 @@
+export declare const datePickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "table" | "view" | "root" | "content" | "trigger" | "control" | "nextTrigger" | "prevTrigger" | "positioner" | "clearTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">;

package/dist/components/date-picker/date-picker-anatomy.js

@@ -0,0 +1,2 @@
+import { anatomy } from '@sprawlify/primitives/machines/date-picker';
+export const datePickerAnatomy = anatomy.extendWith('view');

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface DatePickerClearTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface DatePickerClearTriggerProps extends Assign<HTMLProps<'button'>, DatePickerClearTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerClearTriggerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getClearTriggerProps(), props))
+</script>
+
+<Sprawlify bind:ref as="button" {...mergedProps} />

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

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

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

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface DatePickerContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface DatePickerContentProps extends Assign<HTMLProps<'div'>, DatePickerContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+  import { usePresenceContext } from '../presence'
+
+  let { ref = $bindable(null), ...props }: DatePickerContentProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(datePicker().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: HTMLElement) {
+    presence().setNode(node)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

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

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

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'
+
+  export interface DatePickerContextProps {
+    render: Snippet<[UseDatePickerContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  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';
+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, RefAttribute } from '../../types'
+
+  export interface DatePickerControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface DatePickerControlProps extends Assign<HTMLProps<'div'>, DatePickerControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerControlProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getControlProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface DatePickerControlProps extends Assign<HTMLProps<'div'>, DatePickerControlBaseProps> {
+}
+declare const DatePickerControl: import("svelte").Component<DatePickerControlProps, {}, "ref">;
+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 '@sprawlify/primitives/machines/date-picker'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface DatePickerInputBaseProps extends InputProps, PolymorphicProps<'input'>, RefAttribute {}
+  export interface DatePickerInputProps extends Assign<HTMLProps<'input'>, DatePickerInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerInputProps = $props()
+
+  const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['index', 'fixOnBlur']))
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getInputProps(inputProps), localProps))
+</script>
+
+<Sprawlify as="input" bind:ref {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { InputProps } from '@sprawlify/primitives/machines/date-picker';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerInputBaseProps extends InputProps, PolymorphicProps<'input'>, RefAttribute {
+}
+export interface DatePickerInputProps extends Assign<HTMLProps<'input'>, DatePickerInputBaseProps> {
+}
+declare const DatePickerInput: import("svelte").Component<DatePickerInputProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface DatePickerLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
+  export interface DatePickerLabelProps extends Assign<HTMLProps<'label'>, DatePickerLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerLabelProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getLabelProps(), props))
+</script>
+
+<Sprawlify as="label" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {
+}
+export interface DatePickerLabelProps extends Assign<HTMLProps<'label'>, DatePickerLabelBaseProps> {
+}
+declare const DatePickerLabel: import("svelte").Component<DatePickerLabelProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface DatePickerMonthSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {}
+  export interface DatePickerMonthSelectProps extends Assign<HTMLProps<'select'>, DatePickerMonthSelectBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerMonthSelectProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getMonthSelectProps(), props))
+</script>
+
+<Sprawlify as="select" bind:ref {...mergedProps}>
+  {#each datePicker().getMonths() as month, i}
+    <option value={month.value}>
+      {month.label}
+    </option>
+  {/each}
+</Sprawlify>

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerMonthSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {
+}
+export interface DatePickerMonthSelectProps extends Assign<HTMLProps<'select'>, DatePickerMonthSelectBaseProps> {
+}
+declare const DatePickerMonthSelect: import("svelte").Component<DatePickerMonthSelectProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface DatePickerNextTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface DatePickerNextTriggerProps extends Assign<HTMLProps<'button'>, DatePickerNextTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+  import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerNextTriggerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const viewProps = useDatePickerViewPropsContext()
+  const mergedProps = $derived(mergeProps(datePicker().getNextTriggerProps(viewProps()), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerNextTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
+}
+export interface DatePickerNextTriggerProps extends Assign<HTMLProps<'button'>, DatePickerNextTriggerBaseProps> {
+}
+declare const DatePickerNextTrigger: import("svelte").Component<DatePickerNextTriggerProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface DatePickerPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface DatePickerPositionerProps extends Assign<HTMLProps<'div'>, DatePickerPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+  import { usePresenceContext } from '../presence'
+
+  let { ref = $bindable(null), ...props }: DatePickerPositionerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(datePicker().getPositionerProps(), props))
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {...mergedProps} />
+{/if}

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

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

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

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { PresetTriggerProps } from '@sprawlify/primitives/machines/date-picker'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface DatePickerPresetTriggerBaseProps
+    extends PresetTriggerProps,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
+  export interface DatePickerPresetTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPresetTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerPresetTriggerProps = $props()
+
+  const [presetTriggerProps, localProps] = $derived(createSplitProps<PresetTriggerProps>()(props, ['value']))
+  const datePicker = useDatePickerContext()
+  const mergedProps = $derived(mergeProps(datePicker().getPresetTriggerProps(presetTriggerProps), localProps))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { PresetTriggerProps } from '@sprawlify/primitives/machines/date-picker';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerPresetTriggerBaseProps extends PresetTriggerProps, PolymorphicProps<'button'>, RefAttribute {
+}
+export interface DatePickerPresetTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPresetTriggerBaseProps> {
+}
+declare const DatePickerPresetTrigger: import("svelte").Component<DatePickerPresetTriggerProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface DatePickerPrevTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface DatePickerPrevTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPrevTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+  import { useDatePickerViewPropsContext } from './use-date-picker-view-props-context'
+
+  let { ref = $bindable(null), ...props }: DatePickerPrevTriggerProps = $props()
+
+  const datePicker = useDatePickerContext()
+  const viewProps = useDatePickerViewPropsContext()
+  const mergedProps = $derived(mergeProps(datePicker().getPrevTriggerProps(viewProps()), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerPrevTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
+}
+export interface DatePickerPrevTriggerProps extends Assign<HTMLProps<'button'>, DatePickerPrevTriggerBaseProps> {
+}
+declare const DatePickerPrevTrigger: import("svelte").Component<DatePickerPrevTriggerProps, {}, "ref">;
+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, RefAttribute } from '../../types'
+
+  export interface DatePickerRangeTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface DatePickerRangeTextProps extends Assign<HTMLProps<'div'>, DatePickerRangeTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { uniq } from '@sprawlify/primitives/utils'
+  import { Sprawlify } from '../factory'
+  import { useDatePickerContext } from './use-date-picker-context'
+
+  let { ref = $bindable(null), ...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>
+
+<Sprawlify as="div" bind:ref {...mergedProps}>
+  {visibleRangeText}
+</Sprawlify>

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface DatePickerRangeTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface DatePickerRangeTextProps extends Assign<HTMLProps<'div'>, DatePickerRangeTextBaseProps> {
+}
+declare const DatePickerRangeText: import("svelte").Component<DatePickerRangeTextProps, {}, "ref">;
+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'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseDatePickerReturn } from './use-date-picker.svelte'
+
+  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 '../../core'
+  import { Sprawlify } from '../factory'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { DatePickerProvider } from './use-date-picker-context'
+
+  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>
+
+<Sprawlify 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';
+import type { UsePresenceProps } from '../presence';
+import type { UseDatePickerReturn } from './use-date-picker.svelte';
+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,109 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseDatePickerProps } from './use-date-picker.svelte'
+  import type { UsePresenceProps } from '../presence'
+
+  export interface DatePickerRootBaseProps
+    extends UseDatePickerProps,
+      UsePresenceProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
+  export interface DatePickerRootProps extends Assign<HTMLProps<'div'>, DatePickerRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { useDatePicker } from './use-date-picker.svelte'
+  import { DatePickerProvider } from './use-date-picker-context'
+
+  let {
+    ref = $bindable(null),
+    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',
+      'inline',
+      'invalid',
+      'isDateUnavailable',
+      'locale',
+      'max',
+      'maxView',
+      'min',
+      'minView',
+      'name',
+      'numOfMonths',
+      'onFocusChange',
+      'onOpenChange',
+      'onValueChange',
+      'onViewChange',
+      'open',
+      'outsideDaySelectable',
+      'parse',
+      'placeholder',
+      'positioning',
+      'readOnly',
+      'required',
+      '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>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

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