From 5f76b115953663abdf2080ececa5b567e2654728 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 28 Nov 2024 11:27:30 -0500
Subject: [PATCH 01/21] updating date input

---
 .../date-input/DateInput.stories.svelte       |  46 ++
 .../atoms/inputs/date-input/DateInput.svelte  | 142 +++++++
 .../atoms/inputs/date-input/_DateInput.svelte | 401 ++++++++++++++++++
 .../src/lib/atoms/inputs/date-input/index.js  |   1 +
 .../date-range/DateRange.stories.svelte       |   5 +-
 .../atoms/inputs/date-range/DateRange.svelte  |  18 +-
 .../src/lib/atoms/inputs/index.js             |   1 +
 .../shadcn/calendar/calendar-cell.svelte      |  19 +
 .../atoms/shadcn/calendar/calendar-day.svelte |  40 ++
 .../shadcn/calendar/calendar-grid-body.svelte |  11 +
 .../shadcn/calendar/calendar-grid-head.svelte |  11 +
 .../shadcn/calendar/calendar-grid-row.svelte  |  11 +
 .../shadcn/calendar/calendar-grid.svelte      |  11 +
 .../shadcn/calendar/calendar-head-cell.svelte |  14 +
 .../shadcn/calendar/calendar-header.svelte    |  14 +
 .../shadcn/calendar/calendar-heading.svelte   |  17 +
 .../shadcn/calendar/calendar-months.svelte    |  13 +
 .../calendar/calendar-next-button.svelte      |  25 ++
 .../calendar/calendar-prev-button.svelte      |  27 ++
 .../lib/atoms/shadcn/calendar/calendar.svelte | 177 ++++++++
 .../src/lib/atoms/shadcn/calendar/index.js    |  30 ++
 .../range-calendar/range-calendar.svelte      |   6 +-
 .../atoms/shadcn/select/select-trigger.svelte |   8 +-
 sites/docs/components/DocTab.svelte           |  15 +-
 sites/docs/components/DocWrapper.svelte       |   3 +
 .../docs/pages/components/date-input/index.md | 318 ++++++++++++++
 26 files changed, 1365 insertions(+), 19 deletions(-)
 create mode 100644 packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/inputs/date-input/index.js
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-cell.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-day.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-body.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-head.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-row.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-head-cell.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-header.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-heading.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-months.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-next-button.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-prev-button.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar.svelte
 create mode 100644 packages/ui/core-components/src/lib/atoms/shadcn/calendar/index.js
 create mode 100644 sites/docs/components/DocWrapper.svelte
 create mode 100644 sites/docs/pages/components/date-input/index.md

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
new file mode 100644
index 0000000000..369651f511
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
@@ -0,0 +1,46 @@
+<script context="module">
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'Atoms/inputs/DateInput',
+		argTypes: {},
+		args: {
+			title: 'Date Input',
+			name: 'DateInput',
+			omitGroup: []
+		}
+	};
+</script>
+
+<script>
+	import { Template, Story } from '@storybook/addon-svelte-csf';
+	import DateInput from './DateInput.svelte';
+	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	const inputStore = getInputContext();
+
+	// Mock "today"
+	import MockDate from 'mockdate';
+	MockDate.set('2024-12-30');
+</script>
+
+<Template let:args>
+	<DateInput {...args} />
+</Template>
+
+<Story name="Basic Usage" let:args>
+	<h1>
+		Input Store:
+		<h2>value: {$inputStore.dateInput.value}</h2>
+		<h2>start: {$inputStore.dateInput.start}</h2>
+		<h2>end: {$inputStore.dateInput.end}</h2>
+	</h1>
+	<DateInput {...args} name="dateInput" />
+</Story>
+<Story name="dateInput_range" let:args>
+	<h1>
+		Input Store:
+		<h2>value: {$inputStore.dateInput_range.value}</h2>
+		<h2>start: {$inputStore.dateInput_range.start}</h2>
+		<h2>end: {$inputStore.dateInput_range.end}</h2>
+	</h1>
+	<DateInput {...args} name="dateInput_range" range />
+</Story>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
new file mode 100644
index 0000000000..ea7310db1c
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -0,0 +1,142 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import DateInput from './_DateInput.svelte';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { getQueryFunction } from '@evidence-dev/component-utilities/buildQuery';
+	import { getLocalTimeZone } from '@internationalized/date';
+	import HiddenInPrint from '../shared/HiddenInPrint.svelte';
+	import { page } from '$app/stores';
+	import QueryLoad from '$lib/atoms/query-load/QueryLoad.svelte';
+	import { Skeleton } from '$lib/atoms/skeletons/index.js';
+	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+
+	function dateToYYYYMMDD(date) {
+		return date.toISOString().split('T')[0];
+	}
+
+	const inputs = getInputContext();
+
+	/** @type {string} */
+	export let name;
+	/** @type {string | undefined} */
+	export let title;
+	/** @type {boolean} */
+	export let hideDuringPrint = true;
+
+	/** @type {string | Date | undefined} */
+	export let start;
+	/** @type {string | Date | undefined} */
+	export let end;
+
+	/** @type {Query | string | undefined} */
+	export let data;
+	/** @type {string | undefined} */
+	export let dates;
+	/** @type {[]string | undefined} */
+	export let presetRanges;
+	/** @type {string | undefined} */
+	export let defaultValue;
+	/** @type {boolean} */
+	export let range = false;
+
+	const exec = getQueryFunction();
+	let query;
+	$: if (data && dates) {
+		const source = typeof data === 'string' ? data : `(${data.text})`;
+		query = Query.create(
+			`SELECT min(${dates}) as start, max(${dates}) as end FROM ${source}`,
+			exec,
+			{
+				initialData: $page?.data?.data[`DateInput-${name}_data`],
+				knownColumns: $page?.data?.data[`DateInput-${name}_columns`],
+				disableCache: true,
+				noResolve: false,
+				id: `DateInput-${name}`
+			}
+		);
+		query.fetch();
+	}
+	const YYYYMMDD = /^\d{4}-\d{2}-\d{2}$/;
+	$: startString =
+		typeof start === 'string' && YYYYMMDD.test(start)
+			? start
+			: start instanceof Date
+				? dateToYYYYMMDD(start)
+				: $query?.[0].start instanceof Date
+					? dateToYYYYMMDD($query?.[0].start)
+					: dateToYYYYMMDD(new Date(0));
+	$: endString =
+		typeof end === 'string' && YYYYMMDD.test(end)
+			? end
+			: end instanceof Date
+				? dateToYYYYMMDD(end)
+				: $query?.[0].end instanceof Date
+					? dateToYYYYMMDD($query?.[0].end)
+					: dateToYYYYMMDD(new Date());
+
+	$: if ((query && $query.dataLoaded) || !query) {
+		if (range) {
+			$inputs[name] = { value: undefined, start: startString, end: endString };
+		} else {
+			$inputs[name] = { value: startString, start: startString, end: undefined };
+		}
+	}
+
+	let currentDate = dateToYYYYMMDD(new Date(Date.now()));
+
+	let selectedDateInput;
+	$: if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end) && range) {
+		$inputs[name] = {
+			value: undefined,
+			start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
+			end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
+		};
+	} else if (selectedDateInput && selectedDateInput && !range) {
+		$inputs[name] = {
+			value: dateToYYYYMMDD(selectedDateInput.toDate(getLocalTimeZone()) ?? new Date(0)),
+			start: dateToYYYYMMDD(selectedDateInput.toDate(getLocalTimeZone()) ?? new Date(0)),
+			end: undefined
+		};
+	}
+</script>
+
+<HiddenInPrint enabled={hideDuringPrint}>
+	<div class="mt-2 mb-4 ml-0 mr-2 inline-block">
+		{#if title}
+			<span class="text-sm text-gray-500 block mb-1">{title}</span>
+		{/if}
+
+		{#if $query?.error}
+			<span
+				class="group inline-flex items-center relative cursor-help cursor-helpfont-sans px-1 border border-red-200 py-[1px] bg-red-50 rounded"
+			>
+				<span class="inline font-sans font-medium text-xs text-red-600">error</span>
+				<span
+					class="hidden text-white font-sans group-hover:inline absolute -top-1 left-[105%] text-sm z-10 px-2 py-1 bg-gray-800/80 leading-relaxed min-w-[150px] w-max max-w-[400px] rounded-md"
+				>
+					{$query.error}
+				</span>
+			</span>
+		{:else}
+			<QueryLoad data={query} let:loaded>
+				<svelte:fragment slot="skeleton">
+					<Skeleton class="h-8 w-72" />
+				</svelte:fragment>
+
+				<DateInput
+					bind:selectedDateInput
+					start={startString}
+					end={endString}
+					loaded={loaded?.ready ?? true}
+					{presetRanges}
+					{defaultValue}
+					{range}
+					{currentDate}
+				/>
+			</QueryLoad>
+		{/if}
+	</div>
+</HiddenInPrint>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
new file mode 100644
index 0000000000..3890d8d0d4
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -0,0 +1,401 @@
+<script>
+	import {
+		CalendarDate,
+		DateFormatter,
+		getLocalTimeZone,
+		startOfMonth,
+		endOfMonth,
+		startOfYear,
+		endOfYear
+	} from '@internationalized/date';
+	import { cn } from '$lib/utils.js';
+	import { Button } from '$lib/atoms/shadcn/button/index.js';
+	import { RangeCalendar } from '$lib/atoms/shadcn/range-calendar/index.js';
+	import * as Select from '$lib/atoms/shadcn/select/index.js';
+	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
+	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
+	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
+	import { writable } from 'svelte/store';
+
+	function YYYYMMDDToCalendar(yyyymmdd) {
+		const pieces = yyyymmdd.split('-');
+		return new CalendarDate(Number(pieces[0]), Number(pieces[1]), Number(pieces[2]));
+	}
+
+	const dfMedium = new DateFormatter('en-US', {
+		dateStyle: 'medium'
+	});
+
+	const dfShort = new DateFormatter('en-US', {
+		dateStyle: 'short'
+	});
+
+	/** @type {import('bits-ui').DateRange | undefined} */
+	export let selectedDateInput = undefined;
+	/** @type {string} */
+	export let start;
+	/** @type {string} */
+	export let end;
+	export let loaded = true;
+	/** @type {[]string] | undefined} */
+	export let presetRanges;
+	/** @type {string] | undefined} */
+	export let defaultValue;
+	/** @type {boolean} */
+	export let range = false;
+	/** @type {string} */
+	export let currentDate;
+
+	$: presets = range ? presetsRangeCalendar : presetsCalendar;
+
+	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
+	$: presetsRangeCalendar = [
+		{
+			label: 'Last 7 Days',
+			group: 'Days',
+			range: {
+				start: calendarEnd.subtract({ days: 6 }),
+				end: calendarEnd
+			}
+		},
+		{
+			label: 'Last 30 Days',
+			group: 'Days',
+			range: {
+				start: calendarEnd.subtract({ days: 29 }),
+				end: calendarEnd
+			}
+		},
+		{
+			label: 'Last 90 Days',
+			group: 'Days',
+			range: {
+				start: calendarEnd.subtract({ days: 89 }),
+				end: calendarEnd
+			}
+		},
+		{
+			label: 'Last 3 Months',
+			group: 'Months',
+			range: {
+				start: startOfMonth(calendarEnd.subtract({ months: 3 })),
+				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
+			}
+		},
+		{
+			label: 'Last 6 Months',
+			group: 'Months',
+			range: {
+				start: startOfMonth(calendarEnd.subtract({ months: 6 })),
+				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
+			}
+		},
+		{
+			label: 'Last 12 Months',
+			group: 'Months',
+			range: {
+				start: startOfMonth(calendarEnd.subtract({ months: 12 })),
+				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
+			}
+		},
+		{
+			label: 'Last Month',
+			group: 'Last',
+			range: {
+				start: startOfMonth(calendarEnd.subtract({ months: 1 })),
+				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
+			}
+		},
+		{
+			label: 'Last Year',
+			group: 'Last',
+			range: {
+				start: startOfYear(calendarEnd.subtract({ years: 1 })),
+				end: endOfYear(calendarEnd.subtract({ years: 1 }))
+			}
+		},
+		{
+			label: 'Month to Date',
+			group: 'To Date',
+			range: {
+				start: startOfMonth(calendarEnd),
+				end: endOfMonth(calendarEnd)
+			}
+		},
+		{
+			label: 'Year to Date',
+			group: 'To Date',
+			range: {
+				start: startOfYear(calendarEnd),
+				end: endOfYear(calendarEnd)
+			}
+		},
+		{
+			label: 'All Time',
+			group: 'To Date',
+			range: {
+				start: calendarStart,
+				end: calendarEnd
+			}
+		}
+	];
+
+	$: presetsCalendar = [
+		{
+			label: 'Last Day',
+			group: 'Single Input',
+			range: calendarEnd
+		},
+		{
+			label: 'Today',
+			group: 'Single Input',
+			range: calendarCurrent
+		},
+		{
+			label: 'First Day',
+			group: 'Single Input',
+			range: calendarStart
+		}
+	];
+
+	function lowerCaseNoSpaceString(unformattedStr) {
+		return unformattedStr.toString().toLowerCase().replace(/\s+/g, '');
+	}
+
+	$: {
+		if (typeof presetRanges === 'string') {
+			presetRanges = [presetRanges];
+		}
+
+		if (presetRanges && typeof presetRanges[0] === 'string') {
+			//filters out present range strings matching in preset array to be displayed to user
+			const formattedPresetRanges = presetRanges.map((preset) => lowerCaseNoSpaceString(preset));
+
+			let filteredPresets = presets.filter((preset) => {
+				return formattedPresetRanges.includes(lowerCaseNoSpaceString(preset.label));
+			});
+			presets = filteredPresets;
+		}
+	}
+
+	function setPlaceholderDefault(d) {
+		placeholder = d;
+	}
+
+	let selectedPreset;
+	let placeholder;
+	$: setPlaceholderDefault(calendarEnd);
+
+	// group exists check for nicely rendering group border for dropdown
+	function groupExists(groupName) {
+		return presets.some((preset) => preset.group === groupName);
+	}
+
+	/**
+	 * @param {typeof presets[number] | string} v
+	 */
+	function applyPreset(v) {
+		if (!v) return;
+		const targetPreset = presets.find(
+			(preset) =>
+				lowerCaseNoSpaceString(preset.label) ===
+				lowerCaseNoSpaceString(typeof v === 'string' ? v : v.label)
+		);
+		if (!targetPreset) return;
+		selectedPreset = targetPreset;
+		if (range) {
+			selectedDateInput = targetPreset.range ?? targetPreset.value;
+		} else {
+			selectedDateInput = targetPreset.range;
+		}
+	}
+
+	$: if (
+		typeof defaultValue === 'string' &&
+		!selectedDateInput &&
+		!selectedPreset &&
+		presets.length
+	)
+		applyPreset(defaultValue);
+
+	$: calendarStart = YYYYMMDDToCalendar(start);
+	$: calendarEnd = YYYYMMDDToCalendar(end);
+	let calendarCurrent;
+	if (!range) {
+		if (currentDate > calendarEnd) {
+			calendarCurrent = null;
+		} else if (currentDate < calendarStart) {
+			calendarCurrent = null;
+		} else {
+			calendarCurrent = YYYYMMDDToCalendar(end);
+		}
+	}
+
+	function updateDateRange(start, end) {
+		if (selectedPreset) return;
+
+		if (range) {
+			selectedDateInput = { start, end };
+		} else {
+			selectedDateInput = start;
+		}
+	}
+	$: updateDateRange(calendarStart, calendarEnd);
+
+	let openVar = writable(false);
+</script>
+
+<div class="flex bg-[white]">
+	<Popover.Root openFocus open={$openVar && !range}>
+		<Popover.Trigger asChild let:builder>
+			<Button
+				variant="outline"
+				size="sm"
+				class={cn(
+					`flex justify-start ${range ? 'border-r rounded-r-none text-left' : 'text-center'} font-normal`,
+					!selectedDateInput && 'text-gray-400'
+				)}
+				builders={[builder]}
+				disabled={!loaded}
+				on:click={(e) => {
+					if (!range) {
+						e.stopImmediatePropagation();
+						$openVar = !$openVar;
+					}
+				}}
+			>
+				<span class="hidden sm:inline">
+					{#if !loaded}
+						Loading...
+					{:else if selectedDateInput && !range}
+						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
+					{:else if selectedDateInput && selectedDateInput.start}
+						{#if selectedDateInput.end}
+							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
+								selectedDateInput.end.toDate(getLocalTimeZone())
+							)}
+						{:else}
+							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))}
+						{/if}
+					{:else if placeholder}
+						{dfMedium.format(placeholder.toDate(getLocalTimeZone()))}
+					{:else}
+						Date Range
+					{/if}
+				</span>
+				<span class="sm:hidden">
+					{#if !loaded}
+						Loading...
+					{:else if selectedDateInput && !range}
+						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
+					{:else if selectedDateInput && selectedDateInput.start}
+						{#if selectedDateInput.end}
+							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(
+								selectedDateInput.end.toDate(getLocalTimeZone())
+							)}
+						{:else}
+							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))}
+						{/if}
+					{:else if placeholder}
+						{dfShort.format(placeholder.toDate(getLocalTimeZone()))}
+					{:else}
+						Date Range
+					{/if}
+				</span>
+			</Button>
+		</Popover.Trigger>
+		<Popover.Content class="w-auto select-none p-0" align="start">
+			{#if range}
+				<RangeCalendar
+					bind:selectedDateInput
+					bind:placeholder
+					initialFocus
+					numberOfMonths={1}
+					onValueChange={(value) => {
+						selectedPreset = undefined;
+						selectedDateInput = value;
+					}}
+					minValue={calendarStart}
+					maxValue={calendarEnd}
+				/>
+			{:else}
+				<Calendar
+					bind:selectedDateInput
+					bind:placeholder
+					initialFocus
+					numberOfMonths={1}
+					onValueChange={(value) => {
+						selectedPreset = undefined;
+						selectedDateInput = value;
+					}}
+					minValue={calendarStart}
+					maxValue={calendarEnd}
+				/>
+			{/if}
+		</Popover.Content>
+	</Popover.Root>
+	<Select.Root
+		onSelectedChange={(v) => {
+			v.range = v.value;
+			applyPreset(v);
+		}}
+		bind:selected={selectedPreset}
+		disabled={!loaded}
+	>
+		<Select.Trigger
+			{range}
+			{openVar}
+			class="h-8 w-40 rounded-l-none px-3 text-xs font-medium"
+			sameWidth
+		>
+			{#if selectedPreset}
+				{selectedPreset.label}
+			{:else}
+				<span class="hidden sm:inline"> {range ? 'Select a Range' : 'Select a Date'} </span>
+				<span class="sm:hidden"> Range </span>
+			{/if}
+		</Select.Trigger>
+		{#if presets && presets.length === 0}
+			<Select.Content class="text-sm text-center">
+				<p>No Valid Presets</p>
+			</Select.Content>
+		{:else if range}
+			<Select.Content>
+				{#each presets.filter((d) => d.group === 'Days') as preset}
+					<Select.Item value={preset.range} label={preset.label} class="text-xs"
+						>{preset.label}</Select.Item
+					>
+				{/each}
+				{#if groupExists('Months')}
+					<Separator orientation="horizontal" />
+				{/if}
+				{#each presets.filter((d) => d.group === 'Months') as preset}
+					<Select.Item value={preset.range} label={preset.label} class="text-xs"
+						>{preset.label}</Select.Item
+					>
+				{/each}
+				{#if groupExists('Last')}
+					<Separator orientation="horizontal" />
+				{/if}
+				{#each presets.filter((d) => d.group === 'Last') as preset}
+					<Select.Item value={preset.range} label={preset.label} class="text-xs"
+						>{preset.label}</Select.Item
+					>
+				{/each}
+				{#if groupExists('To Date')}
+					<Separator orientation="horizontal" />
+				{/if}
+				{#each presets.filter((d) => d.group === 'To Date') as preset}
+					<Select.Item value={preset.range} label={preset.label} class="text-xs"
+						>{preset.label}</Select.Item
+					>
+				{/each}
+				{#each presets.filter((d) => d.group === 'Single Input') as preset}
+					<Select.Item value={preset.range} label={preset.label} class="text-xs"
+						>{preset.label}</Select.Item
+					>
+				{/each}
+			</Select.Content>
+		{/if}
+	</Select.Root>
+</div>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/index.js b/packages/ui/core-components/src/lib/atoms/inputs/date-input/index.js
new file mode 100644
index 0000000000..966031e43a
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/index.js
@@ -0,0 +1 @@
+export { default as DateInput } from './DateInput.svelte';
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte
index d591d58f60..68df33b211 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte
@@ -14,6 +14,8 @@
 <script>
 	import { Template, Story } from '@storybook/addon-svelte-csf';
 	import DateRange from './DateRange.svelte';
+	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	const inputStore = getInputContext();
 
 	// Mock "today"
 	import MockDate from 'mockdate';
@@ -25,7 +27,8 @@
 </Template>
 
 <Story name="Basic Usage" let:args>
-	<DateRange {...args} />
+	<DateRange {...args} name="dateRange" />
+	<h1>Input Store: {$inputStore.dateRange.start} - {$inputStore.dateRange.end}</h1>
 </Story>
 
 <Story name="Single presetRanges" args={{ presetRanges: 'last7Days' }} />
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
index 6fdb7bcd96..8083130268 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script>
-	import DateRange from './_DateRange.svelte';
+	import DateInput from '../date-input/_DateInput.svelte';
 	import { Query } from '@evidence-dev/sdk/usql';
 	import { getQueryFunction } from '@evidence-dev/component-utilities/buildQuery';
 	import { getLocalTimeZone } from '@internationalized/date';
@@ -39,6 +39,9 @@
 	/** @type {string | undefined} */
 	export let defaultValue;
 
+	/** @type {boolean} */
+	let range = true;
+
 	const exec = getQueryFunction();
 	let query;
 	$: if (data && dates) {
@@ -79,11 +82,11 @@
 		$inputs[name] = { start: startString, end: endString };
 	}
 
-	let selectedDateRange;
-	$: if (selectedDateRange && (selectedDateRange.start || selectedDateRange.end)) {
+	let selectedDateInput;
+	$: if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end)) {
 		$inputs[name] = {
-			start: dateToYYYYMMDD(selectedDateRange.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
-			end: dateToYYYYMMDD(selectedDateRange.end?.toDate(getLocalTimeZone()) ?? new Date())
+			start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
+			end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
 		};
 	}
 </script>
@@ -111,13 +114,14 @@
 					<Skeleton class="h-8 w-72" />
 				</svelte:fragment>
 
-				<DateRange
-					bind:selectedDateRange
+				<DateInput
+					bind:selectedDateInput
 					start={startString}
 					end={endString}
 					loaded={loaded?.ready ?? true}
 					{presetRanges}
 					{defaultValue}
+					{range}
 				/>
 			</QueryLoad>
 		{/if}
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/index.js b/packages/ui/core-components/src/lib/atoms/inputs/index.js
index b3e72e168b..bcf2ea55b6 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/index.js
+++ b/packages/ui/core-components/src/lib/atoms/inputs/index.js
@@ -2,5 +2,6 @@ export * from './text';
 export * from './dropdown';
 export * from './button-group';
 export * from './date-range';
+export * from './date-input';
 export * from './checkbox';
 export * from './slider';
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-cell.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-cell.svelte
new file mode 100644
index 0000000000..4403358207
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-cell.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	export let date;
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-day.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-day.svelte
new file mode 100644
index 0000000000..abeb09d3f1
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-day.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/atoms/shadcn/button';
+	import { cn } from '$lib/utils.js';
+
+	export let date;
+	export let month;
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'h-9 w-9 p-0 font-normal ',
+		// Today
+		'[&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:border-dashed  [&[data-today]:not([data-selected])]:text-gray-900',
+		// Selected
+		'data-[selected]:bg-gray-900 data-[selected]:text-white data-[selected]:hover:bg-gray-900 data-[selected]:hover:text-white data-[selected]:focus:bg-gray-900 data-[selected]:focus:text-white',
+		// Disabled
+		'data-[disabled]:text-gray-500 data-[disabled]:opacity-50',
+		// Unavailable
+		'data-[unavailable]:text-red-50 data-[unavailable]:line-through',
+		// Outside months
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-gray-500 data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-gray-100/50 [&[data-outside-month][data-selected]]:text-gray-500 [&[data-outside-month][data-selected]]:opacity-30',
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-body.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-body.svelte
new file mode 100644
index 0000000000..1c8f671e1d
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-body.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-head.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-head.svelte
new file mode 100644
index 0000000000..13714ca75d
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-head.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-row.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-row.svelte
new file mode 100644
index 0000000000..defc4def5b
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-row.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid.svelte
new file mode 100644
index 0000000000..d2061c88e3
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn('w-full border-collapse space-y-1', className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-head-cell.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-head-cell.svelte
new file mode 100644
index 0000000000..6cec056385
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-head-cell.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn('text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal', className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-header.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-header.svelte
new file mode 100644
index 0000000000..81084dc5e2
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-header.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn('relative flex w-full items-center justify-between pt-1', className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-heading.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-heading.svelte
new file mode 100644
index 0000000000..5f2dfc1a8c
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-heading.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn('text-sm font-medium', className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-months.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-months.svelte
new file mode 100644
index 0000000000..840829065f
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-months.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0', className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-next-button.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-next-button.svelte
new file mode 100644
index 0000000000..1c8f7c610f
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-next-button.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { ChevronRight } from '@steeze-ui/radix-icons';
+	import { buttonVariants } from '$lib/atoms/shadcn/button';
+	import { cn } from '$lib/utils';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<Icon src={ChevronRight} class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-prev-button.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-prev-button.svelte
new file mode 100644
index 0000000000..455cc094cc
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-prev-button.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { ChevronLeft } from '@steeze-ui/radix-icons';
+	import { buttonVariants } from '$lib/atoms/shadcn/button';
+	import { cn } from '$lib/utils';
+
+	/** @type {string | undefined | null} */
+	let className = undefined;
+
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<Icon src={ChevronLeft} class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar.svelte
new file mode 100644
index 0000000000..8f15743787
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar.svelte
@@ -0,0 +1,177 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import {
+		Day,
+		Cell,
+		Grid,
+		Header,
+		Months,
+		GridRow,
+		Heading,
+		GridBody,
+		GridHead,
+		HeadCell,
+		NextButton,
+		PrevButton
+	} from './index.js';
+	import * as Select from '../select/index.js';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
+
+	import { cn } from '$lib/utils.js';
+
+	/** @type {import("bits-ui").DateRange | undefined} */
+	let value = undefined;
+	/** @type {DateValue | undefined} */
+	let placeholder = undefined;
+	/** @type {{ start: DateValue; end: DateValue; } | undefined} */
+	let selectedDateInput = undefined;
+	/** @type {'short' | 'long' | undefined} */
+	let weekdayFormat = 'short';
+	/** @type {DateValue | undefined} */
+	let startValue = undefined;
+	/** @type {CalendarDate | undefined} */
+	let minValue = undefined;
+	/** @type {CalendarDate | undefined} */
+	let maxValue = undefined;
+
+	/** @type {string | undefined | null} */
+	let className = undefined;
+
+	const monthOptions = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	].map((month, i) => ({ value: i + 1, label: month }));
+
+	const monthFmt = new DateFormatter('en-US', {
+		month: 'long'
+	});
+
+	$: yearOptions = Array.from({ length: 100 }, (_, i) => ({
+		label: String(new Date().getFullYear() - i),
+		value: new Date().getFullYear() - i
+	})).filter(({ value }) => !(minValue?.year > value || value > maxValue?.year));
+
+	$: defaultYear = placeholder
+		? { value: placeholder.year, label: String(placeholder.year) }
+		: undefined;
+
+	$: defaultMonth = placeholder
+		? { value: placeholder.month, label: monthFmt.format(placeholder.toDate(getLocalTimeZone())) }
+		: undefined;
+
+	export {
+		className as class,
+		value,
+		placeholder,
+		weekdayFormat,
+		startValue,
+		selectedDateInput,
+		minValue,
+		maxValue
+	};
+</script>
+
+<CalendarPrimitive.Root
+	bind:value
+	bind:placeholder
+	bind:startValue
+	bind:selectedDateInput
+	{minValue}
+	{maxValue}
+	{weekdayFormat}
+	class={cn('p-3', className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+>
+	<Header>
+		<PrevButton />
+		<Heading class="flex items-center justify-between font-normal text-gray-700 group">
+			<Select.Root
+				selected={defaultMonth}
+				items={monthOptions}
+				onSelectedChange={(v) => {
+					if (!v || !placeholder) return;
+					if (v.value === placeholder?.month) return;
+					placeholder = placeholder.set({ month: v.value });
+				}}
+			>
+				<SelectPrimitive.Trigger
+					aria-label="Select month"
+					class="text-sm pr-1 pl-2 py-1 rounded-tl rounded-bl border-r border-white transition-colors duration-200 group-hover:bg-gray-100 group-hover:border-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400"
+				>
+					<Select.Value placeholder="Select month" />
+				</SelectPrimitive.Trigger>
+				<Select.Content class="max-h-[200px] overflow-y-auto !w-[118px]">
+					{#each monthOptions as { value, label }}
+						<Select.Item {value} {label}>
+							{label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<Select.Root
+				selected={defaultYear}
+				items={yearOptions}
+				onSelectedChange={(v) => {
+					if (!v || !placeholder) return;
+					if (v.value === placeholder?.year) return;
+					placeholder = placeholder.set({ year: v.value });
+				}}
+			>
+				<SelectPrimitive.Trigger
+					aria-label="Select year"
+					class=" pr-2 pl-1 py-1 rounded-tr rounded-br text-sm group-hover:bg-gray-100 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400"
+				>
+					<Select.Value placeholder="Select year" />
+				</SelectPrimitive.Trigger>
+				<Select.Content class="max-h-[200px] overflow-y-auto !w-[79px]">
+					{#each yearOptions as { value, label }}
+						<Select.Item {value} {label}>
+							{label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</Heading>
+		<NextButton />
+	</Header>
+	<Months>
+		{#each months as month}
+			<Grid>
+				<GridHead>
+					<GridRow class="flex">
+						{#each weekdays as weekday}
+							<HeadCell>
+								{weekday.slice(0, 2)}
+							</HeadCell>
+						{/each}
+					</GridRow>
+				</GridHead>
+				<GridBody>
+					{#each month.weeks as weekDates}
+						<GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<Cell {date}>
+									<Day {date} month={month.value} />
+								</Cell>
+							{/each}
+						</GridRow>
+					{/each}
+				</GridBody>
+			</Grid>
+		{/each}
+	</Months>
+</CalendarPrimitive.Root>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/index.js b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/index.js
new file mode 100644
index 0000000000..5d60fa56eb
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/index.js
@@ -0,0 +1,30 @@
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar
+};
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte
index 79a3e07bcf..3e96699df3 100644
--- a/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte
@@ -15,7 +15,7 @@
 	/** @type {DateValue | undefined} */
 	let placeholder = undefined;
 	/** @type {{ start: DateValue; end: DateValue; } | undefined} */
-	let selectedDateRange = undefined;
+	let selectedDateInput = undefined;
 	/** @type {'short' | 'long' | undefined} */
 	let weekdayFormat = 'short';
 	/** @type {DateValue | undefined} */
@@ -66,7 +66,7 @@
 		placeholder,
 		weekdayFormat,
 		startValue,
-		selectedDateRange,
+		selectedDateInput,
 		minValue,
 		maxValue
 	};
@@ -76,7 +76,7 @@
 	bind:value
 	bind:placeholder
 	bind:startValue
-	bind:selectedDateRange
+	bind:selectedDateInput
 	{minValue}
 	{maxValue}
 	{weekdayFormat}
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
index 134a69fa7c..5e10dc4039 100644
--- a/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
@@ -6,11 +6,17 @@
 
 	/** @type {string | undefined | null} */
 	let className = undefined;
-
+	export let range = undefined;
+	export let openVar = undefined;
 	export { className as class };
 </script>
 
 <SelectPrimitive.Trigger
+	on:click={() => {
+		if (range === false && openVar) {
+			$openVar = !$openVar;
+		}
+	}}
 	class={cn(
 		'border-input flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-50',
 		className
diff --git a/sites/docs/components/DocTab.svelte b/sites/docs/components/DocTab.svelte
index 9dce689588..9ee18d1800 100644
--- a/sites/docs/components/DocTab.svelte
+++ b/sites/docs/components/DocTab.svelte
@@ -5,11 +5,9 @@
 	let activeTab = 'preview';
 
 	const tabs = ['preview', 'code'];
-	let tabButtons = [];
 
-	function setTab(tab, index) {
+	function setTab(tab) {
 		activeTab = tab;
-		updateActiveBorder(index);
 	}
 
 	const [send, receive] = crossfade({
@@ -21,15 +19,14 @@
 <div class="doc-tab mt-2">
 	<div class="flex justify-end">
 		<div class="flex gap-1 bg-gray-100 rounded-md p-1 shadow-inner">
-			{#each tabs as tab, index}
+			{#each tabs as tab}
 				<div class="relative">
 					<button
 						class="relative z-10 py-1 px-2 transition-colors duration-300 text-xs font-medium ease-in-out capitalize tracking-wide focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400 rounded-md hover:text-gray-950 {activeTab ===
 						tab
 							? 'text-gray-950'
 							: 'text-gray-600'}"
-						on:click={() => setTab(tab, index)}
-						bind:this={tabButtons[index]}
+						on:click={() => setTab(tab)}
 					>
 						{tab}
 					</button>
@@ -51,7 +48,9 @@
 			class={activeTab !== 'preview' ? 'h-[0px]' : 'mb-3 mt-2'}
 			class:invisible={activeTab !== 'preview'}
 		>
-			<slot name="preview" />
+			<div>
+				<slot name="preview" />
+			</div>
 		</div>
 		<div
 			class="overflow-auto md-preview {activeTab !== 'code' ? 'h-[0px]' : 'mt-2'}"
@@ -66,5 +65,7 @@
 	/* Styles codeblocks inside doctabs */
 	:global(.md-preview > div:first-of-type) {
 		margin: 0;
+		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+			var(--tw-shadow);
 	}
 </style>
diff --git a/sites/docs/components/DocWrapper.svelte b/sites/docs/components/DocWrapper.svelte
new file mode 100644
index 0000000000..95785e5b12
--- /dev/null
+++ b/sites/docs/components/DocWrapper.svelte
@@ -0,0 +1,3 @@
+<div class="border border-rounded border-gray-200">
+	<slot />
+</div>
diff --git a/sites/docs/pages/components/date-input/index.md b/sites/docs/pages/components/date-input/index.md
new file mode 100644
index 0000000000..0151bb7525
--- /dev/null
+++ b/sites/docs/pages/components/date-input/index.md
@@ -0,0 +1,318 @@
+---
+title: Date Input
+sidebar_position: 1
+queries: 
+- orders_by_day.sql
+---
+
+Creates a date picker that can be used to filter a query.
+
+To see how to filter a query using an input component, see [Filters](/core-concepts/filters).
+
+```sql filtered_query
+select 
+*
+from ${orders_by_day}
+where day = '${inputs.date_filtering_a_query.value}'
+```
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-200 p-2 text-center '>
+            <DateInput
+                name=date_filtering_a_query
+                data={orders_by_day}
+                dates=day
+            />
+
+            <BarChart
+                data={filtered_query}
+                x=day
+                y=sales
+                y2=num_orders
+            />
+        </div>
+    </div>
+
+````markdown
+
+```sql filtered_query
+select 
+    *
+from ${orders_by_day}
+where day = '${inputs.range_filtering_a_query.value}'
+```
+
+<DateInput
+    name=range_filtering_a_query
+    data={orders_by_day}
+    dates=day
+/>
+
+<BarChart
+    data={filtered_query}
+    x=day
+    y=sales
+    y2=num_orders
+/>
+````
+</DocTab>
+
+## Examples
+
+### Using Date Input from a Query
+
+The Date selected can be accessed through the `inputs.[name].value` 
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
+            <DateInput
+                name=date_input_from_query
+                data={orders_by_day}
+                dates=day
+            />
+
+            Date Selected: {inputs.date_input_from_query.value}
+        </div>
+    </div>
+
+````markdown
+<DateInput
+    name=date_range_from_query
+    data={orders_by_day}
+    dates=day
+/>
+
+Date Selected: {inputs.date_input_from_query.value}
+````
+</DocTab>
+
+### With a Title
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner'>
+            <DateInput
+                name=date_range_with_title
+                data={orders_by_day}
+                dates=day
+                title="Select a Date Input"
+                range
+            />
+        </div>
+    </div>
+
+```markdown
+<DateInput
+    name=date_range_with_title
+    data={orders_by_day}
+    dates=day
+    title="Select a Date Input"
+    range
+/>
+```
+</DocTab>
+
+## Date Range
+
+Creates a date picker for selecting a date range to filter queries, with selectable preset date options.
+
+### Filtering a Query with Range Calendar
+
+The Date selected can be accessed through the `inputs.[name].start` & `inputs.[name].end`
+
+```sql filtered_query_ranged
+select 
+    *
+from ${orders_by_day}
+where day between '${inputs.range_filtering_a_query.start}' and '${inputs.range_filtering_a_query.end}'
+```
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
+            <DateInput
+                name=range_filtering_a_query
+                data={orders_by_day}
+                dates=day
+                range
+            />
+        </div>
+
+        <LineChart
+            data={filtered_query_ranged}
+            x=day
+            y=sales
+        />
+    </div>
+
+````markdown
+
+```sql filtered_query_ranged
+select 
+    *
+from ${orders_by_day}
+where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_filtering_a_query.end}'
+```
+
+<DateInput
+    name=range_filtering_a_query
+    data={orders_by_day}
+    dates=day
+    range
+/>
+
+<LineChart
+    data={filtered_query_ranged}
+    x=day
+    y=sales
+/>
+````
+</DocTab>
+
+### Default Value for Preset Ranges
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
+            <DateInput defaultValue={'Last 7 Days'} range/>
+        </div>
+    </div>
+
+````svelte
+<DateInput
+    name=name_of_date_range
+    defaultValue={'Last 7 Days'}
+    range
+/>
+````
+</DocTab>
+
+### Customizing Single Preset Ranges
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
+            <DateInput presetRanges={'Last 7 Days'} range/>
+        </div>
+    </div>
+
+```svelte
+<DateInput
+    name=name_of_date_range
+    range
+    presetRanges={'Last 7 Days'}
+/>
+```
+</DocTab>
+
+### Customizing Multiple Preset Ranges
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
+            <DateInput presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']} range/>
+        </div>
+    </div>
+
+````svelte
+<DateInput
+    name=name_of_date_range
+    range
+    presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']}
+/>
+````
+</DocTab>
+
+### Manually Specifying a Range
+
+<DocTab>
+    <div slot='preview'>
+        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
+            <DateInput
+                name=manual_date_range
+                start=2019-01-01
+                end=2019-12-31
+                range
+            />
+        </div>
+    </div>
+
+```markdown
+<DateInput
+    name=manual_date_range
+    start=2019-01-01
+    end=2019-12-31
+    range
+/>
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="name"
+    description="Name of the DateInput, used to reference the selected values elsewhere as {`{inputs.name.start`} or {`inputs.name.end`}"
+    required=true
+    options="string"
+/>
+<PropListing 
+    name="data"
+    description="Query name, wrapped in curly braces"
+    options="query name"
+/>
+<PropListing 
+    name="range"
+    description="toggles between a ranged and single input calendar"
+    options={["true", "false"]}
+    default=false
+/>
+<PropListing 
+    name="dates"
+    description="Column name from the query containing Date Input to span"
+    options="column name"
+/>
+<PropListing 
+    name="start"
+    description="A manually specified start date to use for the range"
+    options="string formatted YYYY-MM-DD"
+/>
+<PropListing 
+    name="end"
+    description="A manually specified end date to use for the range"
+    options="string formatted YYYY-MM-DD"
+/>
+<PropListing 
+    name="title"
+    options="string"
+>
+
+Title to display in the Date Input component
+
+</PropListing>
+<PropListing 
+    name="presetRanges"
+    options= "string | array of values e.g. {`{['Last 7 Days', 'Last 30 Days']}`}"
+    default=undefined
+>
+
+Customize "Select a Range" drop down, by including present range options. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Year to Date'` `'All Time'`
+
+</PropListing>
+<PropListing 
+    name="defaultValue"
+    options= "string e.g. {'Last 7 Days'} or {'Last 6 Months'}"
+    default=undefined
+>
+
+
+Accepts preset in string format to apply default value in Date Input picker. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Year to Date'` `'All Time'`
+
+</PropListing>
+<PropListing 
+    name="hideDuringPrint"
+    description="Hide the component when the report is printed"
+    options={["true", "false"]}
+    default="true"
+/>

From e31bbd4d759be483b48f81f5b0726cd62a45aea7 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 28 Nov 2024 16:28:22 -0500
Subject: [PATCH 02/21] removed dateInput dropdown

---
 .../atoms/inputs/date-input/_DateInput.svelte | 125 +++++++++---------
 .../docs/pages/components/date-input/index.md |  16 ---
 2 files changed, 63 insertions(+), 78 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 3890d8d0d4..4230fc547e 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -334,68 +334,69 @@
 			{/if}
 		</Popover.Content>
 	</Popover.Root>
-	<Select.Root
-		onSelectedChange={(v) => {
-			v.range = v.value;
-			applyPreset(v);
-		}}
-		bind:selected={selectedPreset}
-		disabled={!loaded}
-	>
-		<Select.Trigger
-			{range}
-			{openVar}
-			class="h-8 w-40 rounded-l-none px-3 text-xs font-medium"
-			sameWidth
+	{#if range}
+		<Select.Root
+			onSelectedChange={(v) => {
+				v.range = v.value;
+				applyPreset(v);
+			}}
+			bind:selected={selectedPreset}
+			disabled={!loaded}
 		>
-			{#if selectedPreset}
-				{selectedPreset.label}
-			{:else}
-				<span class="hidden sm:inline"> {range ? 'Select a Range' : 'Select a Date'} </span>
-				<span class="sm:hidden"> Range </span>
-			{/if}
-		</Select.Trigger>
-		{#if presets && presets.length === 0}
-			<Select.Content class="text-sm text-center">
-				<p>No Valid Presets</p>
-			</Select.Content>
-		{:else if range}
-			<Select.Content>
-				{#each presets.filter((d) => d.group === 'Days') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('Months')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'Months') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('Last')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'Last') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('To Date')}
-					<Separator orientation="horizontal" />
+			<Select.Trigger
+				{range}
+				{openVar}
+				class="h-8 w-40 rounded-l-none px-3 text-xs font-medium"
+				sameWidth
+			>
+				{#if selectedPreset}
+					{selectedPreset.label}
+				{:else}
+					<span class="hidden sm:inline"> {range ? 'Select a Range' : 'Select a Date'} </span>
+					<span class="sm:hidden"> Range </span>
 				{/if}
-				{#each presets.filter((d) => d.group === 'To Date') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#each presets.filter((d) => d.group === 'Single Input') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-			</Select.Content>
-		{/if}
-	</Select.Root>
+			</Select.Trigger>
+			{#if presets && presets.length === 0}
+				<Select.Content class="text-sm text-center">
+					<p>No Valid Presets</p>
+				</Select.Content>
+				<Select.Content>
+					{#each presets.filter((d) => d.group === 'Days') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+					{#if groupExists('Months')}
+						<Separator orientation="horizontal" />
+					{/if}
+					{#each presets.filter((d) => d.group === 'Months') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+					{#if groupExists('Last')}
+						<Separator orientation="horizontal" />
+					{/if}
+					{#each presets.filter((d) => d.group === 'Last') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+					{#if groupExists('To Date')}
+						<Separator orientation="horizontal" />
+					{/if}
+					{#each presets.filter((d) => d.group === 'To Date') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+					{#each presets.filter((d) => d.group === 'Single Input') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+				</Select.Content>
+			{/if}
+		</Select.Root>
+	{/if}
 </div>
diff --git a/sites/docs/pages/components/date-input/index.md b/sites/docs/pages/components/date-input/index.md
index 0151bb7525..c33d1b8b7a 100644
--- a/sites/docs/pages/components/date-input/index.md
+++ b/sites/docs/pages/components/date-input/index.md
@@ -18,7 +18,6 @@ where day = '${inputs.date_filtering_a_query.value}'
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-200 p-2 text-center '>
             <DateInput
                 name=date_filtering_a_query
                 data={orders_by_day}
@@ -31,7 +30,6 @@ where day = '${inputs.date_filtering_a_query.value}'
                 y=sales
                 y2=num_orders
             />
-        </div>
     </div>
 
 ````markdown
@@ -66,7 +64,6 @@ The Date selected can be accessed through the `inputs.[name].value`
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
             <DateInput
                 name=date_input_from_query
                 data={orders_by_day}
@@ -74,7 +71,6 @@ The Date selected can be accessed through the `inputs.[name].value`
             />
 
             Date Selected: {inputs.date_input_from_query.value}
-        </div>
     </div>
 
 ````markdown
@@ -92,7 +88,6 @@ Date Selected: {inputs.date_input_from_query.value}
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner'>
             <DateInput
                 name=date_range_with_title
                 data={orders_by_day}
@@ -100,7 +95,6 @@ Date Selected: {inputs.date_input_from_query.value}
                 title="Select a Date Input"
                 range
             />
-        </div>
     </div>
 
 ```markdown
@@ -131,14 +125,12 @@ where day between '${inputs.range_filtering_a_query.start}' and '${inputs.range_
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
             <DateInput
                 name=range_filtering_a_query
                 data={orders_by_day}
                 dates=day
                 range
             />
-        </div>
 
         <LineChart
             data={filtered_query_ranged}
@@ -175,9 +167,7 @@ where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_fi
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
             <DateInput defaultValue={'Last 7 Days'} range/>
-        </div>
     </div>
 
 ````svelte
@@ -193,9 +183,7 @@ where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_fi
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
             <DateInput presetRanges={'Last 7 Days'} range/>
-        </div>
     </div>
 
 ```svelte
@@ -211,9 +199,7 @@ where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_fi
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
             <DateInput presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']} range/>
-        </div>
     </div>
 
 ````svelte
@@ -229,14 +215,12 @@ where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_fi
 
 <DocTab>
     <div slot='preview'>
-        <div class='border rounded-md border-gray-50 p-2 text-center bg-gray-100 shadow-inner '>
             <DateInput
                 name=manual_date_range
                 start=2019-01-01
                 end=2019-12-31
                 range
             />
-        </div>
     </div>
 
 ```markdown

From 46dd2524f7955e272d4eda56c1f0a2f99bdc725d Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 28 Nov 2024 16:29:13 -0500
Subject: [PATCH 03/21] removed docwrapper

---
 sites/docs/components/DocWrapper.svelte | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 sites/docs/components/DocWrapper.svelte

diff --git a/sites/docs/components/DocWrapper.svelte b/sites/docs/components/DocWrapper.svelte
deleted file mode 100644
index 95785e5b12..0000000000
--- a/sites/docs/components/DocWrapper.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="border border-rounded border-gray-200">
-	<slot />
-</div>

From 959a44994a7f7f3e0e901457e82a15e618c62bc3 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 28 Nov 2024 16:43:08 -0500
Subject: [PATCH 04/21] fixed preset select

---
 .../atoms/inputs/date-input/_DateInput.svelte | 45 +++----------------
 .../atoms/shadcn/select/select-trigger.svelte |  7 ---
 2 files changed, 5 insertions(+), 47 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 4230fc547e..4da4efff15 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -46,10 +46,8 @@
 	/** @type {string} */
 	export let currentDate;
 
-	$: presets = range ? presetsRangeCalendar : presetsCalendar;
-
 	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
-	$: presetsRangeCalendar = [
+	$: presets = [
 		{
 			label: 'Last 7 Days',
 			group: 'Days',
@@ -140,24 +138,6 @@
 		}
 	];
 
-	$: presetsCalendar = [
-		{
-			label: 'Last Day',
-			group: 'Single Input',
-			range: calendarEnd
-		},
-		{
-			label: 'Today',
-			group: 'Single Input',
-			range: calendarCurrent
-		},
-		{
-			label: 'First Day',
-			group: 'Single Input',
-			range: calendarStart
-		}
-	];
-
 	function lowerCaseNoSpaceString(unformattedStr) {
 		return unformattedStr.toString().toLowerCase().replace(/\s+/g, '');
 	}
@@ -246,7 +226,7 @@
 </script>
 
 <div class="flex bg-[white]">
-	<Popover.Root openFocus open={$openVar && !range}>
+	<Popover.Root openFocus>
 		<Popover.Trigger asChild let:builder>
 			<Button
 				variant="outline"
@@ -257,12 +237,6 @@
 				)}
 				builders={[builder]}
 				disabled={!loaded}
-				on:click={(e) => {
-					if (!range) {
-						e.stopImmediatePropagation();
-						$openVar = !$openVar;
-					}
-				}}
 			>
 				<span class="hidden sm:inline">
 					{#if !loaded}
@@ -343,16 +317,11 @@
 			bind:selected={selectedPreset}
 			disabled={!loaded}
 		>
-			<Select.Trigger
-				{range}
-				{openVar}
-				class="h-8 w-40 rounded-l-none px-3 text-xs font-medium"
-				sameWidth
-			>
+			<Select.Trigger class="h-8 w-40 rounded-l-none px-3 text-xs font-medium" sameWidth>
 				{#if selectedPreset}
 					{selectedPreset.label}
 				{:else}
-					<span class="hidden sm:inline"> {range ? 'Select a Range' : 'Select a Date'} </span>
+					<span class="hidden sm:inline"> Select a Range </span>
 					<span class="sm:hidden"> Range </span>
 				{/if}
 			</Select.Trigger>
@@ -360,6 +329,7 @@
 				<Select.Content class="text-sm text-center">
 					<p>No Valid Presets</p>
 				</Select.Content>
+			{:else}
 				<Select.Content>
 					{#each presets.filter((d) => d.group === 'Days') as preset}
 						<Select.Item value={preset.range} label={preset.label} class="text-xs"
@@ -390,11 +360,6 @@
 							>{preset.label}</Select.Item
 						>
 					{/each}
-					{#each presets.filter((d) => d.group === 'Single Input') as preset}
-						<Select.Item value={preset.range} label={preset.label} class="text-xs"
-							>{preset.label}</Select.Item
-						>
-					{/each}
 				</Select.Content>
 			{/if}
 		</Select.Root>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
index 5e10dc4039..cf4be36e53 100644
--- a/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
@@ -6,17 +6,10 @@
 
 	/** @type {string | undefined | null} */
 	let className = undefined;
-	export let range = undefined;
-	export let openVar = undefined;
 	export { className as class };
 </script>
 
 <SelectPrimitive.Trigger
-	on:click={() => {
-		if (range === false && openVar) {
-			$openVar = !$openVar;
-		}
-	}}
 	class={cn(
 		'border-input flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-50',
 		className

From a9edd3377204729fade9bd4e35d1a3fdaf537080 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 28 Nov 2024 16:47:41 -0500
Subject: [PATCH 05/21] chore: ling + changeset

---
 .changeset/cold-trains-visit.md                      |  5 +++++
 .../lib/atoms/inputs/date-input/_DateInput.svelte    | 12 ------------
 2 files changed, 5 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/cold-trains-visit.md

diff --git a/.changeset/cold-trains-visit.md b/.changeset/cold-trains-visit.md
new file mode 100644
index 0000000000..d8a6a9f41c
--- /dev/null
+++ b/.changeset/cold-trains-visit.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Feature: DateInput - supports single and ranged calendar date inputs
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 4da4efff15..7037435a7c 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -200,16 +200,6 @@
 
 	$: calendarStart = YYYYMMDDToCalendar(start);
 	$: calendarEnd = YYYYMMDDToCalendar(end);
-	let calendarCurrent;
-	if (!range) {
-		if (currentDate > calendarEnd) {
-			calendarCurrent = null;
-		} else if (currentDate < calendarStart) {
-			calendarCurrent = null;
-		} else {
-			calendarCurrent = YYYYMMDDToCalendar(end);
-		}
-	}
 
 	function updateDateRange(start, end) {
 		if (selectedPreset) return;
@@ -221,8 +211,6 @@
 		}
 	}
 	$: updateDateRange(calendarStart, calendarEnd);
-
-	let openVar = writable(false);
 </script>
 
 <div class="flex bg-[white]">

From 9da5eb0372e2d84c4cf3cfd15e5f42a53050a15a Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Fri, 29 Nov 2024 10:23:09 -0500
Subject: [PATCH 06/21] added redirect

---
 vercel.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/vercel.json b/vercel.json
index d929a27d4c..94e729fd85 100644
--- a/vercel.json
+++ b/vercel.json
@@ -45,6 +45,11 @@
 			"source": "/guides/updating-your-project",
 			"destination": "/guides/updating-your-app/",
 			"permanent": true
+		},
+		{
+			"source": "/components/date-range/",
+			"destination": "/components/date-input/",
+			"permanent": true
 		}
 	]
 }

From 49c1bac89245dc8da6bb25e9190e9d58b6bf5200 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Fri, 29 Nov 2024 10:27:14 -0500
Subject: [PATCH 07/21] added package manager, linted

---
 package.json                                                   | 3 ++-
 .../src/lib/atoms/inputs/date-input/_DateInput.svelte          | 3 ---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index ab29a0f8a6..b3650776cb 100644
--- a/package.json
+++ b/package.json
@@ -111,5 +111,6 @@
 			"dset": ">=3.1.4",
 			"cookie": ">=0.7.1"
 		}
-	}
+	},
+	"packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81"
 }
\ No newline at end of file
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 7037435a7c..9cdc0794ee 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -15,7 +15,6 @@
 	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
 	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
-	import { writable } from 'svelte/store';
 
 	function YYYYMMDDToCalendar(yyyymmdd) {
 		const pieces = yyyymmdd.split('-');
@@ -43,8 +42,6 @@
 	export let defaultValue;
 	/** @type {boolean} */
 	export let range = false;
-	/** @type {string} */
-	export let currentDate;
 
 	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
 	$: presets = [

From af367986ac834878d7dad3b9a538c35a74ede291 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Fri, 29 Nov 2024 11:58:40 -0500
Subject: [PATCH 08/21] updated docs changes, added default title

---
 .../src/lib/atoms/inputs/date-input/DateInput.svelte |  2 +-
 sites/docs/pages/components/date-input/index.md      | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
index ea7310db1c..8f1a8b6fb0 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -22,7 +22,7 @@
 	/** @type {string} */
 	export let name;
 	/** @type {string | undefined} */
-	export let title;
+	export let title = 'Date Input';
 	/** @type {boolean} */
 	export let hideDuringPrint = true;
 
diff --git a/sites/docs/pages/components/date-input/index.md b/sites/docs/pages/components/date-input/index.md
index c33d1b8b7a..6018b677a8 100644
--- a/sites/docs/pages/components/date-input/index.md
+++ b/sites/docs/pages/components/date-input/index.md
@@ -1,11 +1,12 @@
 ---
 title: Date Input
 sidebar_position: 1
+description: A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.
 queries: 
 - orders_by_day.sql
 ---
 
-Creates a date picker that can be used to filter a query.
+A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.
 
 To see how to filter a query using an input component, see [Filters](/core-concepts/filters).
 
@@ -13,7 +14,7 @@ To see how to filter a query using an input component, see [Filters](/core-conce
 select 
 *
 from ${orders_by_day}
-where day = '${inputs.date_filtering_a_query.value}'
+where day > '${inputs.date_filtering_a_query.value}'
 ```
 
 <DocTab>
@@ -38,7 +39,7 @@ where day = '${inputs.date_filtering_a_query.value}'
 select 
     *
 from ${orders_by_day}
-where day = '${inputs.range_filtering_a_query.value}'
+where day > '${inputs.range_filtering_a_query.value}'
 ```
 
 <DateInput
@@ -93,7 +94,6 @@ Date Selected: {inputs.date_input_from_query.value}
                 data={orders_by_day}
                 dates=day
                 title="Select a Date Input"
-                range
             />
     </div>
 
@@ -102,9 +102,7 @@ Date Selected: {inputs.date_input_from_query.value}
     name=date_range_with_title
     data={orders_by_day}
     dates=day
-    title="Select a Date Input"
-    range
-/>
+    title="Select a Date Input"/>
 ```
 </DocTab>
 

From 4be852e4242ec7e3d8d36248b45867aef057f26d Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Fri, 29 Nov 2024 12:02:27 -0500
Subject: [PATCH 09/21] removed y2 from barcharts

---
 sites/docs/pages/components/date-input/index.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/sites/docs/pages/components/date-input/index.md b/sites/docs/pages/components/date-input/index.md
index 6018b677a8..a4f41537ff 100644
--- a/sites/docs/pages/components/date-input/index.md
+++ b/sites/docs/pages/components/date-input/index.md
@@ -29,7 +29,6 @@ where day > '${inputs.date_filtering_a_query.value}'
                 data={filtered_query}
                 x=day
                 y=sales
-                y2=num_orders
             />
     </div>
 
@@ -43,7 +42,7 @@ where day > '${inputs.range_filtering_a_query.value}'
 ```
 
 <DateInput
-    name=range_filtering_a_query
+    name=date_filtering_a_query
     data={orders_by_day}
     dates=day
 />
@@ -52,7 +51,6 @@ where day > '${inputs.range_filtering_a_query.value}'
     data={filtered_query}
     x=day
     y=sales
-    y2=num_orders
 />
 ````
 </DocTab>

From 0527feb0da06e42c59a051ce332b172abb6c47ce Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Fri, 29 Nov 2024 14:02:09 -0500
Subject: [PATCH 10/21] updated date input ui

---
 .../lib/atoms/inputs/date-input/DateInput.svelte   |  6 +++---
 .../lib/atoms/inputs/date-input/_DateInput.svelte  | 14 +++++++++++++-
 sites/docs/pages/components/date-input/index.md    |  3 +++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
index 8f1a8b6fb0..323305a0fc 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -22,7 +22,7 @@
 	/** @type {string} */
 	export let name;
 	/** @type {string | undefined} */
-	export let title = 'Date Input';
+	export let title;
 	/** @type {boolean} */
 	export let hideDuringPrint = true;
 
@@ -105,7 +105,7 @@
 
 <HiddenInPrint enabled={hideDuringPrint}>
 	<div class="mt-2 mb-4 ml-0 mr-2 inline-block">
-		{#if title}
+		{#if title && range}
 			<span class="text-sm text-gray-500 block mb-1">{title}</span>
 		{/if}
 
@@ -125,7 +125,6 @@
 				<svelte:fragment slot="skeleton">
 					<Skeleton class="h-8 w-72" />
 				</svelte:fragment>
-
 				<DateInput
 					bind:selectedDateInput
 					start={startString}
@@ -135,6 +134,7 @@
 					{defaultValue}
 					{range}
 					{currentDate}
+					{title}
 				/>
 			</QueryLoad>
 		{/if}
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 9cdc0794ee..fd64490764 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -15,6 +15,8 @@
 	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
 	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { Calendar as CalendarIcon } from '@steeze-ui/radix-icons';
 
 	function YYYYMMDDToCalendar(yyyymmdd) {
 		const pieces = yyyymmdd.split('-');
@@ -42,6 +44,8 @@
 	export let defaultValue;
 	/** @type {boolean} */
 	export let range = false;
+	/** @type {string} */
+	export let title;
 
 	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
 	$: presets = [
@@ -223,11 +227,18 @@
 				builders={[builder]}
 				disabled={!loaded}
 			>
+				{#if !range && title}
+					{title}
+					<span class="m-2"> | </span>
+				{/if}
 				<span class="hidden sm:inline">
 					{#if !loaded}
 						Loading...
 					{:else if selectedDateInput && !range}
-						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
+						<span class="flex align-center">
+							{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
+							<Icon src={CalendarIcon} class="ml-1 h-[14px] w-[14px]" />
+						</span>
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
@@ -247,6 +258,7 @@
 						Loading...
 					{:else if selectedDateInput && !range}
 						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
+						<Icon src={CalendarIcon} class="ml" />
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(
diff --git a/sites/docs/pages/components/date-input/index.md b/sites/docs/pages/components/date-input/index.md
index a4f41537ff..95a41d7cd8 100644
--- a/sites/docs/pages/components/date-input/index.md
+++ b/sites/docs/pages/components/date-input/index.md
@@ -21,6 +21,7 @@ where day > '${inputs.date_filtering_a_query.value}'
     <div slot='preview'>
             <DateInput
                 name=date_filtering_a_query
+                title='Sales After'
                 data={orders_by_day}
                 dates=day
             />
@@ -125,6 +126,7 @@ where day between '${inputs.range_filtering_a_query.start}' and '${inputs.range_
                 name=range_filtering_a_query
                 data={orders_by_day}
                 dates=day
+                title='Date Range'
                 range
             />
 
@@ -148,6 +150,7 @@ where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_fi
     name=range_filtering_a_query
     data={orders_by_day}
     dates=day
+    title='Date Range'
     range
 />
 

From 95667bfd4cd23f850c9f7c8a00d244a991e915c8 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Fri, 29 Nov 2024 14:30:08 -0500
Subject: [PATCH 11/21] added margin, lighten color calendar icon

---
 .../src/lib/atoms/inputs/date-input/_DateInput.svelte           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index fd64490764..395bc0cfbd 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -237,7 +237,7 @@
 					{:else if selectedDateInput && !range}
 						<span class="flex align-center">
 							{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
-							<Icon src={CalendarIcon} class="ml-1 h-[14px] w-[14px]" />
+							<Icon src={CalendarIcon} class="ml-2 h-[14px] w-[14px] text-gray-500" />
 						</span>
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}

From 41d31caec4f234ced29911464724ac08de008bcf Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 2 Dec 2024 11:18:02 -0500
Subject: [PATCH 12/21] matched ranged and non-ranged border styling

---
 .../src/lib/atoms/inputs/date-input/_DateInput.svelte      | 7 ++++---
 packages/ui/core-components/src/lib/atoms/inputs/index.js  | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 395bc0cfbd..e8c666b9d4 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -228,14 +228,15 @@
 				disabled={!loaded}
 			>
 				{#if !range && title}
-					{title}
-					<span class="m-2"> | </span>
+					<span class="border-r-2 border-gray-200 pr-2.5 h-full flex items-center">
+						{title}
+					</span>
 				{/if}
 				<span class="hidden sm:inline">
 					{#if !loaded}
 						Loading...
 					{:else if selectedDateInput && !range}
-						<span class="flex align-center">
+						<span class="flex align-center {title ? 'ml-2' : ''}">
 							{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
 							<Icon src={CalendarIcon} class="ml-2 h-[14px] w-[14px] text-gray-500" />
 						</span>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/index.js b/packages/ui/core-components/src/lib/atoms/inputs/index.js
index bcf2ea55b6..2abde54a92 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/index.js
+++ b/packages/ui/core-components/src/lib/atoms/inputs/index.js
@@ -2,6 +2,6 @@ export * from './text';
 export * from './dropdown';
 export * from './button-group';
 export * from './date-range';
-export * from './date-input';
 export * from './checkbox';
 export * from './slider';
+export * from './date-input';

From f728875606f0b290b647e9180292dfef71f2c9f6 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 2 Dec 2024 11:29:44 -0500
Subject: [PATCH 13/21] lighten border divider

---
 .../src/lib/atoms/inputs/date-input/_DateInput.svelte         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index e8c666b9d4..2120616b1a 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -228,7 +228,7 @@
 				disabled={!loaded}
 			>
 				{#if !range && title}
-					<span class="border-r-2 border-gray-200 pr-2.5 h-full flex items-center">
+					<span class="border-r-[2px] pr-2.5 h-full flex items-center">
 						{title}
 					</span>
 				{/if}
@@ -236,7 +236,7 @@
 					{#if !loaded}
 						Loading...
 					{:else if selectedDateInput && !range}
-						<span class="flex align-center {title ? 'ml-2' : ''}">
+						<span class="flex align-center {title ? 'ml-2 ' : ''}">
 							{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
 							<Icon src={CalendarIcon} class="ml-2 h-[14px] w-[14px] text-gray-500" />
 						</span>

From 389ef3d2c7c32f1813d3d1adc513b47a2b443309 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 2 Dec 2024 11:54:42 -0500
Subject: [PATCH 14/21] matched date input with dropdown seperator styling

---
 .../lib/atoms/inputs/date-input/_DateInput.svelte   | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 2120616b1a..224979ba80 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -227,16 +227,15 @@
 				builders={[builder]}
 				disabled={!loaded}
 			>
-				{#if !range && title}
-					<span class="border-r-[2px] pr-2.5 h-full flex items-center">
-						{title}
-					</span>
-				{/if}
-				<span class="hidden sm:inline">
+				<span class="hidden sm:inline font-medium">
 					{#if !loaded}
 						Loading...
 					{:else if selectedDateInput && !range}
-						<span class="flex align-center {title ? 'ml-2 ' : ''}">
+						<span class="flex align-center">
+							{#if title}
+								{title}
+								<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />
+							{/if}
 							{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
 							<Icon src={CalendarIcon} class="ml-2 h-[14px] w-[14px] text-gray-500" />
 						</span>

From ef35f7bde5feceae28ff0a6a2ca6b5f4b551d81c Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 2 Dec 2024 14:59:10 -0500
Subject: [PATCH 15/21] updated icon

---
 .../atoms/inputs/date-input/_DateInput.svelte | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 224979ba80..b74e3f8bc0 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -16,7 +16,7 @@
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
 	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
 	import { Icon } from '@steeze-ui/svelte-icon';
-	import { Calendar as CalendarIcon } from '@steeze-ui/radix-icons';
+	import { Calendar as CalendarIcon } from '@steeze-ui/tabler-icons';
 
 	function YYYYMMDDToCalendar(yyyymmdd) {
 		const pieces = yyyymmdd.split('-');
@@ -227,18 +227,17 @@
 				builders={[builder]}
 				disabled={!loaded}
 			>
-				<span class="hidden sm:inline font-medium">
+				<span class="hidden sm:flex font-medium items-center">
 					{#if !loaded}
 						Loading...
 					{:else if selectedDateInput && !range}
-						<span class="flex align-center">
-							{#if title}
-								{title}
-								<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />
-							{/if}
-							{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
-							<Icon src={CalendarIcon} class="ml-2 h-[14px] w-[14px] text-gray-500" />
-						</span>
+						{#if title}
+							{title}
+							<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />
+						{/if}
+						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
+
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 stroke-1 mb-[2px]" />
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
@@ -250,15 +249,15 @@
 					{:else if placeholder}
 						{dfMedium.format(placeholder.toDate(getLocalTimeZone()))}
 					{:else}
-						Date Range
+						Date Input
 					{/if}
 				</span>
-				<span class="sm:hidden">
+				<span class="sm:hidden flex items-center">
 					{#if !loaded}
 						Loading...
 					{:else if selectedDateInput && !range}
 						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
-						<Icon src={CalendarIcon} class="ml" />
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 text-gray-600 mb-[2px]" />
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(
@@ -270,7 +269,7 @@
 					{:else if placeholder}
 						{dfShort.format(placeholder.toDate(getLocalTimeZone()))}
 					{:else}
-						Date Range
+						Date Input
 					{/if}
 				</span>
 			</Button>

From 175be7f4739b4524d39632850ec4e116d63aab55 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 2 Dec 2024 16:19:35 -0500
Subject: [PATCH 16/21] stroke-1 text-black

---
 .../src/lib/atoms/inputs/date-input/_DateInput.svelte         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index b74e3f8bc0..f7768d5010 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -237,7 +237,7 @@
 						{/if}
 						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
 
-						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 stroke-1 mb-[2px]" />
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-1 text-black" />
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
@@ -257,7 +257,7 @@
 						Loading...
 					{:else if selectedDateInput && !range}
 						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
-						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 text-gray-600 mb-[2px]" />
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-1 text-black" />
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(

From 3150c626ff62518237883ea2e92ec20f88100049 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Wed, 4 Dec 2024 16:24:11 -0500
Subject: [PATCH 17/21] changed calendar icon

---
 .../atoms/inputs/date-input/_DateInput.svelte | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index f7768d5010..f8791c1a6a 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -16,7 +16,7 @@
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
 	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
 	import { Icon } from '@steeze-ui/svelte-icon';
-	import { Calendar as CalendarIcon } from '@steeze-ui/tabler-icons';
+	import { CalendarOutline as CalendarIcon } from '@steeze-ui/custom-icons';
 
 	function YYYYMMDDToCalendar(yyyymmdd) {
 		const pieces = yyyymmdd.split('-');
@@ -236,8 +236,26 @@
 							<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />
 						{/if}
 						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
+						<span class="ml-2 mb-[2px]">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<rect x="4" y="5" width="16" height="16" rx="2" />
+								<path d="M4 11h16" />
 
-						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-1 text-black" />
+								<path d="M8 3v4" />
+								<path d="M16 3v4" />
+							</svg>
+						</span>
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
@@ -257,7 +275,26 @@
 						Loading...
 					{:else if selectedDateInput && !range}
 						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
-						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-1 text-black" />
+						<span class="ml-2 mb-[2px]">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<rect x="4" y="5" width="16" height="16" rx="2" />
+								<path d="M4 11h16" />
+
+								<path d="M8 3v4" />
+								<path d="M16 3v4" />
+							</svg>
+						</span>
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(

From 9505d5470924079b149c8d41115cca3114e25fed Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Wed, 4 Dec 2024 16:26:05 -0500
Subject: [PATCH 18/21] linted

---
 .../src/lib/atoms/inputs/date-input/_DateInput.svelte           | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index f8791c1a6a..2919d79a77 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -15,8 +15,6 @@
 	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
 	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
-	import { Icon } from '@steeze-ui/svelte-icon';
-	import { CalendarOutline as CalendarIcon } from '@steeze-ui/custom-icons';
 
 	function YYYYMMDDToCalendar(yyyymmdd) {
 		const pieces = yyyymmdd.split('-');

From d3c9818070912e7f30a75c8d17081a04da5727ec Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 5 Dec 2024 09:18:06 -0500
Subject: [PATCH 19/21] add icon to smaller screen width version

---
 .../lib/atoms/inputs/date-input/_DateInput.svelte    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 2919d79a77..5173753069 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -15,6 +15,8 @@
 	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
 	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { CalendarEvent as CalendarIcon } from '@steeze-ui/tabler-icons';
 
 	function YYYYMMDDToCalendar(yyyymmdd) {
 		const pieces = yyyymmdd.split('-');
@@ -234,7 +236,8 @@
 							<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />
 						{/if}
 						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
-						<span class="ml-2 mb-[2px]">
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-[1.8px] text-gray-700" />
+						<!-- <span class="ml-2 mb-[2px]">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								width="16"
@@ -253,7 +256,7 @@
 								<path d="M8 3v4" />
 								<path d="M16 3v4" />
 							</svg>
-						</span>
+						</span> -->
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
@@ -273,7 +276,8 @@
 						Loading...
 					{:else if selectedDateInput && !range}
 						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
-						<span class="ml-2 mb-[2px]">
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-[1.8px] text-gray-700" />
+						<!-- <span class="ml-2 mb-[2px]">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								width="16"
@@ -292,7 +296,7 @@
 								<path d="M8 3v4" />
 								<path d="M16 3v4" />
 							</svg>
-						</span>
+						</span> -->
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(

From a51230dc6670dfc3fec5e9756c9509d0d13fa4ec Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 5 Dec 2024 11:48:21 -0500
Subject: [PATCH 20/21] added toBoolean check for range prop, removed commented
 out code

---
 .../date-input/DateInput.stories.svelte       | 20 +++++++++-
 .../atoms/inputs/date-input/DateInput.svelte  |  5 +++
 .../atoms/inputs/date-input/_DateInput.svelte | 40 -------------------
 3 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
index 369651f511..e751762fd2 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
@@ -42,5 +42,23 @@
 		<h2>start: {$inputStore.dateInput_range.start}</h2>
 		<h2>end: {$inputStore.dateInput_range.end}</h2>
 	</h1>
-	<DateInput {...args} name="dateInput_range" range />
+	<div>
+		<DateInput {...args} name="dateInput_range" range />
+	</div>
+	<div>
+		boolean true
+		<DateInput {...args} name="dateInput_range" range={true} />
+	</div>
+	<div>
+		string true
+		<DateInput {...args} name="dateInput_range" range="true" />
+	</div>
+	<div>
+		boolean false
+		<DateInput {...args} name="dateInput_range" range={false} />
+	</div>
+	<div>
+		string false
+		<DateInput {...args} name="dateInput_range" range="false" />
+	</div>
 </Story>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
index 323305a0fc..9aaa0d382d 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -12,6 +12,7 @@
 	import QueryLoad from '$lib/atoms/query-load/QueryLoad.svelte';
 	import { Skeleton } from '$lib/atoms/skeletons/index.js';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	import { toBoolean } from '../../../utils.js';
 
 	function dateToYYYYMMDD(date) {
 		return date.toISOString().split('T')[0];
@@ -42,6 +43,10 @@
 	/** @type {boolean} */
 	export let range = false;
 
+	$: range = toBoolean(range);
+
+	$: console.log(range);
+
 	const exec = getQueryFunction();
 	let query;
 	$: if (data && dates) {
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 5173753069..300e142af0 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -237,26 +237,6 @@
 						{/if}
 						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
 						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-[1.8px] text-gray-700" />
-						<!-- <span class="ml-2 mb-[2px]">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							>
-								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-								<rect x="4" y="5" width="16" height="16" rx="2" />
-								<path d="M4 11h16" />
-
-								<path d="M8 3v4" />
-								<path d="M16 3v4" />
-							</svg>
-						</span> -->
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
@@ -277,26 +257,6 @@
 					{:else if selectedDateInput && !range}
 						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
 						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-[1.8px] text-gray-700" />
-						<!-- <span class="ml-2 mb-[2px]">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							>
-								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-								<rect x="4" y="5" width="16" height="16" rx="2" />
-								<path d="M4 11h16" />
-
-								<path d="M8 3v4" />
-								<path d="M16 3v4" />
-							</svg>
-						</span> -->
 					{:else if selectedDateInput && selectedDateInput.start}
 						{#if selectedDateInput.end}
 							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(

From 849bef5584dbdf8948d2aa176728d1fedb555c26 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Thu, 5 Dec 2024 15:20:26 -0500
Subject: [PATCH 21/21] refactored reused functions into helper.js - DateInput
 & DateRange

---
 .../date-input/DateInput.stories.svelte       |  20 +-
 .../atoms/inputs/date-input/DateInput.svelte  |  27 +-
 .../lib/atoms/inputs/date-input/helpers.js    |  17 +
 .../atoms/inputs/date-range/DateRange.svelte  |  24 +-
 .../atoms/inputs/date-range/_DateRange.svelte | 321 ------------------
 5 files changed, 25 insertions(+), 384 deletions(-)
 create mode 100644 packages/ui/core-components/src/lib/atoms/inputs/date-input/helpers.js
 delete mode 100644 packages/ui/core-components/src/lib/atoms/inputs/date-range/_DateRange.svelte

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
index e751762fd2..369651f511 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
@@ -42,23 +42,5 @@
 		<h2>start: {$inputStore.dateInput_range.start}</h2>
 		<h2>end: {$inputStore.dateInput_range.end}</h2>
 	</h1>
-	<div>
-		<DateInput {...args} name="dateInput_range" range />
-	</div>
-	<div>
-		boolean true
-		<DateInput {...args} name="dateInput_range" range={true} />
-	</div>
-	<div>
-		string true
-		<DateInput {...args} name="dateInput_range" range="true" />
-	</div>
-	<div>
-		boolean false
-		<DateInput {...args} name="dateInput_range" range={false} />
-	</div>
-	<div>
-		string false
-		<DateInput {...args} name="dateInput_range" range="false" />
-	</div>
+	<DateInput {...args} name="dateInput_range" range />
 </Story>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
index 9aaa0d382d..0543d6faf4 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -13,10 +13,7 @@
 	import { Skeleton } from '$lib/atoms/skeletons/index.js';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	import { toBoolean } from '../../../utils.js';
-
-	function dateToYYYYMMDD(date) {
-		return date.toISOString().split('T')[0];
-	}
+	import { dateToYYYYMMDD, formatDateString } from './helpers.js';
 
 	const inputs = getInputContext();
 
@@ -45,8 +42,6 @@
 
 	$: range = toBoolean(range);
 
-	$: console.log(range);
-
 	const exec = getQueryFunction();
 	let query;
 	$: if (data && dates) {
@@ -64,23 +59,9 @@
 		);
 		query.fetch();
 	}
-	const YYYYMMDD = /^\d{4}-\d{2}-\d{2}$/;
-	$: startString =
-		typeof start === 'string' && YYYYMMDD.test(start)
-			? start
-			: start instanceof Date
-				? dateToYYYYMMDD(start)
-				: $query?.[0].start instanceof Date
-					? dateToYYYYMMDD($query?.[0].start)
-					: dateToYYYYMMDD(new Date(0));
-	$: endString =
-		typeof end === 'string' && YYYYMMDD.test(end)
-			? end
-			: end instanceof Date
-				? dateToYYYYMMDD(end)
-				: $query?.[0].end instanceof Date
-					? dateToYYYYMMDD($query?.[0].end)
-					: dateToYYYYMMDD(new Date());
+
+	$: startString = formatDateString(start || $query?.[0].start || new Date(0));
+	$: endString = formatDateString(end || $query?.[0].end || new Date());
 
 	$: if ((query && $query.dataLoaded) || !query) {
 		if (range) {
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/helpers.js b/packages/ui/core-components/src/lib/atoms/inputs/date-input/helpers.js
new file mode 100644
index 0000000000..302f3a74e1
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/helpers.js
@@ -0,0 +1,17 @@
+const YYYYMMDD = /^\d{4}-\d{2}-\d{2}$/;
+
+function dateToYYYYMMDD(date) {
+	return date.toISOString().split('T')[0];
+}
+
+function formatDateString(date) {
+	if (typeof date === 'string' && YYYYMMDD.test(date)) {
+		return date;
+	} else if (date instanceof Date) {
+		return dateToYYYYMMDD(date);
+	} else {
+		return dateToYYYYMMDD(new Date());
+	}
+}
+
+export { dateToYYYYMMDD, formatDateString };
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
index 8083130268..e0f0cefe94 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
@@ -12,10 +12,7 @@
 	import QueryLoad from '$lib/atoms/query-load/QueryLoad.svelte';
 	import { Skeleton } from '$lib/atoms/skeletons/index.js';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
-
-	function dateToYYYYMMDD(date) {
-		return date.toISOString().split('T')[0];
-	}
+	import { dateToYYYYMMDD, formatDateString } from '../date-input/helpers.js';
 
 	const inputs = getInputContext();
 	/** @type {string} */
@@ -60,23 +57,8 @@
 		query.fetch();
 	}
 
-	const YYYYMMDD = /^\d{4}-\d{2}-\d{2}$/;
-	$: startString =
-		typeof start === 'string' && YYYYMMDD.test(start)
-			? start
-			: start instanceof Date
-				? dateToYYYYMMDD(start)
-				: $query?.[0].start instanceof Date
-					? dateToYYYYMMDD($query?.[0].start)
-					: dateToYYYYMMDD(new Date(0));
-	$: endString =
-		typeof end === 'string' && YYYYMMDD.test(end)
-			? end
-			: end instanceof Date
-				? dateToYYYYMMDD(end)
-				: $query?.[0].end instanceof Date
-					? dateToYYYYMMDD($query?.[0].end)
-					: dateToYYYYMMDD(new Date());
+	$: startString = formatDateString(start || $query?.[0].start || new Date(0));
+	$: endString = formatDateString(end || $query?.[0].end || new Date());
 
 	$: if ((query && $query.dataLoaded) || !query) {
 		$inputs[name] = { start: startString, end: endString };
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/_DateRange.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-range/_DateRange.svelte
deleted file mode 100644
index 28ee4e4135..0000000000
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-range/_DateRange.svelte
+++ /dev/null
@@ -1,321 +0,0 @@
-<script>
-	import {
-		CalendarDate,
-		DateFormatter,
-		getLocalTimeZone,
-		startOfMonth,
-		endOfMonth,
-		startOfYear,
-		endOfYear
-	} from '@internationalized/date';
-	import { cn } from '$lib/utils.js';
-	import { Button } from '$lib/atoms/shadcn/button/index.js';
-	import { RangeCalendar } from '$lib/atoms/shadcn/range-calendar/index.js';
-	import * as Select from '$lib/atoms/shadcn/select/index.js';
-	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
-	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
-
-	function YYYYMMDDToCalendar(yyyymmdd) {
-		const pieces = yyyymmdd.split('-');
-		return new CalendarDate(Number(pieces[0]), Number(pieces[1]), Number(pieces[2]));
-	}
-
-	const dfMedium = new DateFormatter('en-US', {
-		dateStyle: 'medium'
-	});
-
-	const dfShort = new DateFormatter('en-US', {
-		dateStyle: 'short'
-	});
-
-	/** @type {import('bits-ui').DateRange | undefined} */
-	export let selectedDateRange = undefined;
-	/** @type {string} */
-	export let start;
-	/** @type {string} */
-	export let end;
-	export let loaded = true;
-	/** @type {[]string] | undefined} */
-	export let presetRanges;
-	/** @type {string] | undefined} */
-	export let defaultValue;
-
-	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
-	$: presets = [
-		{
-			label: 'Last 7 Days',
-			group: 'Days',
-			range: {
-				start: calendarEnd.subtract({ days: 6 }),
-				end: calendarEnd
-			}
-		},
-		{
-			label: 'Last 30 Days',
-			group: 'Days',
-			range: {
-				start: calendarEnd.subtract({ days: 29 }),
-				end: calendarEnd
-			}
-		},
-		{
-			label: 'Last 90 Days',
-			group: 'Days',
-			range: {
-				start: calendarEnd.subtract({ days: 89 }),
-				end: calendarEnd
-			}
-		},
-		{
-			label: 'Last 3 Months',
-			group: 'Months',
-			range: {
-				start: startOfMonth(calendarEnd.subtract({ months: 3 })),
-				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
-			}
-		},
-		{
-			label: 'Last 6 Months',
-			group: 'Months',
-			range: {
-				start: startOfMonth(calendarEnd.subtract({ months: 6 })),
-				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
-			}
-		},
-		{
-			label: 'Last 12 Months',
-			group: 'Months',
-			range: {
-				start: startOfMonth(calendarEnd.subtract({ months: 12 })),
-				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
-			}
-		},
-		{
-			label: 'Last Month',
-			group: 'Last',
-			range: {
-				start: startOfMonth(calendarEnd.subtract({ months: 1 })),
-				end: endOfMonth(calendarEnd.subtract({ months: 1 }))
-			}
-		},
-		{
-			label: 'Last Year',
-			group: 'Last',
-			range: {
-				start: startOfYear(calendarEnd.subtract({ years: 1 })),
-				end: endOfYear(calendarEnd.subtract({ years: 1 }))
-			}
-		},
-		{
-			label: 'Month to Date',
-			group: 'To Date',
-			range: {
-				start: startOfMonth(calendarEnd),
-				end: endOfMonth(calendarEnd)
-			}
-		},
-		{
-			label: 'Year to Date',
-			group: 'To Date',
-			range: {
-				start: startOfYear(calendarEnd),
-				end: endOfYear(calendarEnd)
-			}
-		},
-		{
-			label: 'All Time',
-			group: 'To Date',
-			range: {
-				start: calendarStart,
-				end: calendarEnd
-			}
-		}
-	];
-
-	function lowerCaseNoSpaceString(unformattedStr) {
-		return unformattedStr.toString().toLowerCase().replace(/\s+/g, '');
-	}
-
-	$: {
-		if (typeof presetRanges === 'string') {
-			presetRanges = [presetRanges];
-		}
-
-		if (presetRanges && typeof presetRanges[0] === 'string') {
-			//filters out present range strings matching in preset array to be displayed to user
-			const formattedPresetRanges = presetRanges.map((preset) => lowerCaseNoSpaceString(preset));
-
-			let filteredPresets = presets.filter((preset) => {
-				return formattedPresetRanges.includes(lowerCaseNoSpaceString(preset.label));
-			});
-			presets = filteredPresets;
-		}
-	}
-
-	function setPlaceholderDefault(d) {
-		placeholder = d;
-	}
-
-	let selectedPreset;
-	let placeholder;
-	$: setPlaceholderDefault(calendarEnd);
-
-	// group exists check for nicely rendering group border for dropdown
-	function groupExists(groupName) {
-		return presets.some((preset) => preset.group === groupName);
-	}
-
-	/**
-	 * @param {typeof presets[number] | string} v
-	 */
-	function applyPreset(v) {
-		if (!v) return;
-		const targetPreset = presets.find(
-			(preset) =>
-				lowerCaseNoSpaceString(preset.label) ===
-				lowerCaseNoSpaceString(typeof v === 'string' ? v : v.label)
-		);
-		if (!targetPreset) return;
-		selectedDateRange = targetPreset.range ?? targetPreset.value;
-		selectedPreset = targetPreset;
-	}
-
-	$: if (
-		typeof defaultValue === 'string' &&
-		!selectedDateRange &&
-		!selectedPreset &&
-		presets.length
-	)
-		applyPreset(defaultValue);
-
-	$: calendarStart = YYYYMMDDToCalendar(start);
-	$: calendarEnd = YYYYMMDDToCalendar(end);
-
-	function updateDateRange(start, end) {
-		if (selectedPreset) return;
-		selectedDateRange = { start, end };
-	}
-
-	$: updateDateRange(calendarStart, calendarEnd);
-</script>
-
-<div class="flex">
-	<Popover.Root openFocus>
-		<Popover.Trigger asChild let:builder>
-			<Button
-				variant="outline"
-				size="sm"
-				class={cn(
-					'flex justify-start rounded-r-none border-r-0 text-left font-normal',
-					!selectedDateRange && 'text-gray-400'
-				)}
-				builders={[builder]}
-				disabled={!loaded}
-			>
-				<span class="hidden sm:inline">
-					{#if !loaded}
-						Loading...
-					{:else if selectedDateRange && selectedDateRange.start}
-						{#if selectedDateRange.end}
-							{dfMedium.format(selectedDateRange.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
-								selectedDateRange.end.toDate(getLocalTimeZone())
-							)}
-						{:else}
-							{dfMedium.format(selectedDateRange.start.toDate(getLocalTimeZone()))}
-						{/if}
-					{:else if placeholder}
-						{dfMedium.format(placeholder.toDate(getLocalTimeZone()))}
-					{:else}
-						Date Range
-					{/if}
-				</span>
-				<span class="sm:hidden">
-					{#if !loaded}
-						Loading...
-					{:else if selectedDateRange && selectedDateRange.start}
-						{#if selectedDateRange.end}
-							{dfShort.format(selectedDateRange.start.toDate(getLocalTimeZone()))} - {dfShort.format(
-								selectedDateRange.end.toDate(getLocalTimeZone())
-							)}
-						{:else}
-							{dfShort.format(selectedDateRange.start.toDate(getLocalTimeZone()))}
-						{/if}
-					{:else if placeholder}
-						{dfShort.format(placeholder.toDate(getLocalTimeZone()))}
-					{:else}
-						Date Range
-					{/if}
-				</span>
-			</Button>
-		</Popover.Trigger>
-		<Popover.Content class="w-auto select-none p-0" align="start">
-			<RangeCalendar
-				bind:selectedDateRange
-				bind:placeholder
-				initialFocus
-				numberOfMonths={1}
-				onValueChange={(value) => {
-					selectedPreset = undefined;
-					selectedDateRange = value;
-				}}
-				minValue={calendarStart}
-				maxValue={calendarEnd}
-			/>
-		</Popover.Content>
-	</Popover.Root>
-
-	<Select.Root
-		onSelectedChange={(v) => {
-			v.range = v.value;
-			applyPreset(v);
-		}}
-		bind:selected={selectedPreset}
-		disabled={!loaded}
-	>
-		<Select.Trigger class="h-8 w-40 rounded-l-none px-3 text-xs font-medium" sameWidth>
-			{#if selectedPreset}
-				{selectedPreset.label}
-			{:else}
-				<span class="hidden sm:inline"> Select a Range </span>
-				<span class="sm:hidden"> Range </span>
-			{/if}
-		</Select.Trigger>
-		{#if presets && presets.length === 0}
-			<Select.Content class="text-sm text-center">
-				<p>No Valid Presets</p>
-			</Select.Content>
-		{:else}
-			<Select.Content>
-				{#each presets.filter((d) => d.group === 'Days') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('Months')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'Months') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('Last')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'Last') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('To Date')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'To Date') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-			</Select.Content>
-		{/if}
-	</Select.Root>
-</div>