@dryui/ui 0.2.2 → 0.4.0

package/dist/date-picker/{datepicker-calendar.svelte → datepicker-button-calendar.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getDatePickerCtx } from './context.svelte.js';
 	import {
 		getCalendarDays,
@@ -81,33 +82,33 @@
 </script>
 
 <div {@attach bindContainer} class={className} {...rest} data-dp-calendar>
-	<!-- Calendar header: month/year + navigation -->
 	<div role="group" aria-label={monthYearLabel} data-calendar-panel>
 		<div class="dp-header" data-calendar-header>
-			<button
+			<Button
+				variant="trigger"
+				size="icon-sm"
 				type="button"
 				aria-label="Previous month"
-				data-calendar-nav
 				disabled={ctx.disabled}
 				onclick={() => ctx.prevMonth()}
 			>
 				‹
-			</button>
+			</Button>
 			<span aria-live="polite" aria-atomic="true" data-calendar-heading>
 				{monthYearLabel}
 			</span>
-			<button
+			<Button
+				variant="trigger"
+				size="icon-sm"
 				type="button"
 				aria-label="Next month"
-				data-calendar-nav
 				disabled={ctx.disabled}
 				onclick={() => ctx.nextMonth()}
 			>
 				›
-			</button>
+			</Button>
 		</div>
 
-		<!-- Day-of-week header row -->
 		<div role="grid" aria-label={monthYearLabel}>
 			<div role="row" data-calendar-row>
 				{#each weekdayLabels as label (label)}
@@ -117,7 +118,6 @@
 				{/each}
 			</div>
 
-			<!-- Calendar day grid -->
 			{#each weeks as week, weekIndex (weekIndex)}
 				<div role="row" data-calendar-row>
 					{#each week as day (getDayISOString(day))}
@@ -128,7 +128,9 @@
 						{@const focused = isSameDay(day, ctx.focusedDate)}
 						{@const isoStr = getDayISOString(day)}
 						<div role="gridcell" data-calendar-cell>
-							<button
+							<Button
+								variant="trigger"
+								size="icon-sm"
 								type="button"
 								tabindex={focused ? 0 : -1}
 								aria-label={formatDate(day, ctx.locale, {
@@ -138,17 +140,16 @@
 								})}
 								aria-pressed={selected}
 								aria-disabled={disabled}
-								data-calendar-day-button
 								data-calendar-day={isoStr}
 								data-today={today ? '' : undefined}
 								data-selected={selected ? '' : undefined}
 								data-outside-month={!isCurrent ? '' : undefined}
-								data-disabled={disabled ? '' : undefined}
+								{disabled}
 								onclick={() => handleDayClick(day)}
 								onkeydown={(e) => handleDayKeydown(e, day)}
 							>
 								{day.getDate()}
-							</button>
+							</Button>
 						</div>
 					{/each}
 				</div>
@@ -159,7 +160,6 @@
 
 <style>
 	[data-dp-calendar] {
-		--dry-calendar-grid-gap: 1px;
 		display: grid;
 		gap: var(--dry-space-2);
 		user-select: none;
@@ -179,53 +179,29 @@
 		gap: var(--dry-space-2);
 	}
 
-	[data-dp-calendar] [data-calendar-nav] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-8);
-		aspect-ratio: 1;
-		border: 1px solid transparent;
-		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-calendar-header-color, var(--dry-color-text-strong));
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-dp-calendar] [data-calendar-nav]:hover:not([disabled]) {
-		background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
-		border-color: var(--dry-color-stroke-strong);
-	}
-
-	[data-dp-calendar] [data-calendar-nav]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-
 	[data-dp-calendar] [data-calendar-heading] {
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-size: var(--dry-type-small-size);
 		font-weight: 600;
 		letter-spacing: -0.01em;
+		text-align: center;
 	}
 
 	[data-dp-calendar] [role='grid'] {
 		display: grid;
-		gap: var(--dry-calendar-grid-gap);
+		gap: 1px;
 	}
 
 	[data-dp-calendar] [data-calendar-row] {
 		display: grid;
 		grid-template-columns: repeat(7, minmax(0, 1fr));
-		gap: var(--dry-calendar-grid-gap);
+		gap: 1px;
 	}
 
 	[data-dp-calendar] [data-calendar-columnheader] {
 		display: grid;
 		place-items: center;
 		min-height: var(--dry-space-8);
-		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
+		font-size: var(--dry-type-tiny-size);
 		color: var(--dry-calendar-muted-color, var(--dry-color-text-weak));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
@@ -233,60 +209,6 @@
 
 	[data-dp-calendar] [data-calendar-cell] {
 		display: grid;
-		grid-template-columns: var(--dry-calendar-day-size, 2.25rem);
-		place-items: center;
-	}
-
-	[data-dp-calendar] [data-calendar-day-button] {
-		display: inline-grid;
 		place-items: center;
-		min-height: var(--dry-calendar-day-size, 2.25rem);
-		aspect-ratio: 1;
-		border: none;
-		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font: inherit;
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-		font-variant-numeric: tabular-nums;
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-dp-calendar] [data-calendar-day-button]:hover:not([data-disabled]) {
-		background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
-	}
-
-	[data-dp-calendar] [data-calendar-day-button]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-
-	[data-dp-calendar] [data-calendar-day-button][data-today]:not([data-selected]) {
-		color: var(--dry-calendar-today-color, var(--dry-color-fill-brand));
-		font-weight: 600;
-	}
-
-	[data-dp-calendar] [data-calendar-day-button][data-selected] {
-		background: var(--dry-calendar-selected-bg, var(--dry-color-fill-brand));
-		color: var(--dry-calendar-selected-color, var(--dry-color-on-brand));
-		font-weight: 600;
-	}
-
-	[data-dp-calendar] [data-calendar-day-button][data-selected]:hover:not([data-disabled]) {
-		background: var(--dry-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
-	}
-
-	[data-dp-calendar] [data-calendar-day-button][data-outside-month] {
-		color: var(--dry-calendar-outside-color, var(--dry-color-text-weak));
-		opacity: 0.6;
-	}
-
-	[data-dp-calendar] [data-calendar-day-button][data-disabled] {
-		cursor: not-allowed;
-		opacity: 0.4;
-		pointer-events: none;
 	}
 </style>

package/dist/date-picker/datepicker-button-calendar.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+declare const DatepickerButtonCalendar: import("svelte").Component<Props, {}, "">;
+type DatepickerButtonCalendar = ReturnType<typeof DatepickerButtonCalendar>;
+export default DatepickerButtonCalendar;

package/dist/date-picker/datepicker-button-trigger.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getDatePickerCtx } from './context.svelte.js';
+	import { formatDate } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		placeholder?: string;
+		size?: 'sm' | 'md' | 'lg';
+		children?: Snippet | undefined;
+	}
+
+	let { placeholder = 'Select date', children, size = 'md', ...rest }: Props = $props();
+
+	const ctx = getDatePickerCtx();
+
+	$effect(() => {
+		const node = document.getElementById(ctx.triggerId);
+		if (node) {
+			ctx.triggerEl = node as HTMLButtonElement;
+		}
+		return () => {
+			if (ctx.triggerEl && ctx.triggerEl.id === ctx.triggerId) {
+				ctx.triggerEl = null;
+			}
+		};
+	});
+
+	const displayText = $derived(
+		ctx.value
+			? formatDate(ctx.value, ctx.locale, { year: 'numeric', month: 'long', day: 'numeric' })
+			: ''
+	);
+</script>
+
+<Button
+	variant="outline"
+	type="button"
+	{size}
+	id={ctx.triggerId}
+	aria-haspopup="dialog"
+	aria-expanded={ctx.open}
+	aria-controls={ctx.contentId}
+	data-state={ctx.open ? 'open' : 'closed'}
+	data-disabled={ctx.disabled ? '' : undefined}
+	disabled={ctx.disabled}
+	popovertarget={ctx.contentId}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<span data-placeholder={!ctx.value ? '' : undefined}>
+			{displayText || placeholder}
+		</span>
+	{/if}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		aria-hidden="true"
+		><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line
+			x1="16"
+			y1="2"
+			x2="16"
+			y2="6"
+		/><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg
+	>
+</Button>

package/dist/date-picker/datepicker-button-trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    children?: Snippet | undefined;
+}
+declare const DatepickerButtonTrigger: import("svelte").Component<Props, {}, "">;
+type DatepickerButtonTrigger = ReturnType<typeof DatepickerButtonTrigger>;
+export default DatepickerButtonTrigger;

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

@@ -1,22 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	placement?:
-		| 'top'
-		| 'top-start'
-		| 'top-end'
-		| 'bottom'
-		| 'bottom-start'
-		| 'bottom-end'
-		| 'left'
-		| 'left-start'
-		| 'left-end'
-		| 'right'
-		| 'right-start'
-		| 'right-end';
-	offset?: number;
-	children: Snippet;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+    offset?: number;
+    children: Snippet;
 }
-declare const DatepickerContent: import('svelte').Component<Props, {}, ''>;
+declare const DatepickerContent: import("svelte").Component<Props, {}, "">;
 type DatepickerContent = ReturnType<typeof DatepickerContent>;
 export default DatepickerContent;

package/dist/date-picker/datepicker-input-root.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    value?: Date | null;
+    name?: string;
+    locale?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const DatepickerInputRoot: import("svelte").Component<Props, {}, "value" | "open">;
+type DatepickerInputRoot = ReturnType<typeof DatepickerInputRoot>;
+export default DatepickerInputRoot;

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

@@ -3,10 +3,10 @@ export type { DatePickerRootProps, DatePickerContentProps, DatePickerCalendarPro
 export interface DatePickerTriggerProps extends PrimitiveDatePickerTriggerProps {
     size?: 'sm' | 'md' | 'lg';
 }
-import DatePickerRoot from './datepicker-root.svelte';
-import DatePickerTrigger from './datepicker-trigger.svelte';
+import DatePickerRoot from './datepicker-input-root.svelte';
+import DatePickerTrigger from './datepicker-button-trigger.svelte';
 import DatePickerContent from './datepicker-content.svelte';
-import DatePickerCalendar from './datepicker-calendar.svelte';
+import DatePickerCalendar from './datepicker-button-calendar.svelte';
 export declare const DatePicker: {
     Root: typeof DatePickerRoot;
     Trigger: typeof DatePickerTrigger;

package/dist/date-picker/index.js

@@ -1,7 +1,7 @@
-import DatePickerRoot from './datepicker-root.svelte';
-import DatePickerTrigger from './datepicker-trigger.svelte';
+import DatePickerRoot from './datepicker-input-root.svelte';
+import DatePickerTrigger from './datepicker-button-trigger.svelte';
 import DatePickerContent from './datepicker-content.svelte';
-import DatePickerCalendar from './datepicker-calendar.svelte';
+import DatePickerCalendar from './datepicker-button-calendar.svelte';
 export const DatePicker = {
     Root: DatePickerRoot,
     Trigger: DatePickerTrigger,

package/dist/date-range-picker/{date-range-picker-calendar.svelte → date-range-picker-button-calendar.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getDateRangePickerCtx } from './context.svelte.js';
 	import {
 		getCalendarDays,
@@ -127,33 +128,33 @@
 </script>
 
 <div {@attach bindContainer} class={className} {...rest} data-drp-calendar>
-	<!-- Calendar header: month/year + navigation -->
 	<div role="group" aria-label={monthYearLabel} data-calendar-panel>
 		<div data-calendar-header>
-			<button
+			<Button
+				variant="trigger"
+				size="icon-sm"
 				type="button"
 				aria-label="Previous month"
-				data-calendar-nav
 				disabled={ctx.disabled}
 				onclick={() => ctx.prevMonth()}
 			>
 				&#8249;
-			</button>
+			</Button>
 			<span aria-live="polite" aria-atomic="true" data-calendar-heading>
 				{monthYearLabel}
 			</span>
-			<button
+			<Button
+				variant="trigger"
+				size="icon-sm"
 				type="button"
 				aria-label="Next month"
-				data-calendar-nav
 				disabled={ctx.disabled}
 				onclick={() => ctx.nextMonth()}
 			>
 				&#8250;
-			</button>
+			</Button>
 		</div>
 
-		<!-- Day-of-week header row -->
 		<div role="grid" aria-label={monthYearLabel}>
 			<div role="row" data-calendar-row>
 				{#each weekdayLabels as label (label)}
@@ -163,7 +164,6 @@
 				{/each}
 			</div>
 
-			<!-- Calendar day grid -->
 			{#each weeks as week, weekIndex (weekIndex)}
 				<div role="row" data-calendar-row>
 					{#each week as day (getDayISOString(day))}
@@ -183,7 +183,9 @@
 							data-range-start={rangeStart ? '' : undefined}
 							data-range-end={rangeEnd ? '' : undefined}
 						>
-							<button
+							<Button
+								variant="trigger"
+								size="icon-sm"
 								type="button"
 								tabindex={focused ? 0 : -1}
 								aria-label={formatDate(day, ctx.locale, {
@@ -193,7 +195,6 @@
 								})}
 								aria-pressed={selected}
 								aria-disabled={disabled}
-								data-calendar-day-button
 								data-calendar-day={isoStr}
 								data-today={today ? '' : undefined}
 								data-selected={selected ? '' : undefined}
@@ -201,7 +202,7 @@
 								data-range-start={rangeStart ? '' : undefined}
 								data-range-end={rangeEnd ? '' : undefined}
 								data-outside-month={!isCurrent ? '' : undefined}
-								data-disabled={disabled ? '' : undefined}
+								{disabled}
 								onclick={() => handleDayClick(day)}
 								onkeydown={(e) => handleDayKeydown(e, day)}
 								onmouseenter={() => {
@@ -216,7 +217,7 @@
 								}}
 							>
 								{day.getDate()}
-							</button>
+							</Button>
 						</div>
 					{/each}
 				</div>
@@ -246,35 +247,11 @@
 		gap: var(--dry-space-2);
 	}
 
-	[data-drp-calendar] [data-calendar-nav] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-8);
-		aspect-ratio: 1;
-		border: 1px solid transparent;
-		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-drp-calendar] [data-calendar-nav]:hover:not([disabled]) {
-		background: var(--dry-range-calendar-day-hover-bg, var(--dry-color-bg-raised));
-		border-color: var(--dry-color-stroke-strong);
-	}
-
-	[data-drp-calendar] [data-calendar-nav]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-
 	[data-drp-calendar] [data-calendar-heading] {
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-size: var(--dry-type-small-size);
 		font-weight: 600;
 		letter-spacing: -0.01em;
+		text-align: center;
 	}
 
 	[data-drp-calendar] [role='grid'] {
@@ -287,100 +264,8 @@
 		grid-template-columns: repeat(7, minmax(0, 1fr));
 	}
 
-	[data-drp-calendar] [data-calendar-columnheader] {
-		display: grid;
-		place-items: center;
-		min-height: var(--dry-space-8);
-		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
-		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-	}
-
 	[data-drp-calendar] [data-calendar-cell] {
 		display: grid;
 		place-items: center;
 	}
-
-	/* ── Cell-level range band (seamless, fills entire grid track) ── */
-
-	[data-drp-calendar] [data-calendar-cell][data-in-range],
-	[data-drp-calendar] [data-calendar-cell][data-range-start],
-	[data-drp-calendar] [data-calendar-cell][data-range-end] {
-		background: var(
-			--dry-range-calendar-range-bg,
-			color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent)
-		);
-	}
-
-	[data-drp-calendar] [data-calendar-cell][data-range-start] {
-		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md)) 0 0
-			var(--dry-range-calendar-day-radius, var(--dry-radius-md));
-	}
-
-	[data-drp-calendar] [data-calendar-cell][data-range-end] {
-		border-radius: 0 var(--dry-range-calendar-day-radius, var(--dry-radius-md))
-			var(--dry-range-calendar-day-radius, var(--dry-radius-md)) 0;
-	}
-
-	/* ── Day button base ── */
-
-	[data-drp-calendar] [data-calendar-day-button] {
-		display: inline-grid;
-		place-items: center;
-		min-height: var(--dry-range-calendar-day-size, 2.25rem);
-		aspect-ratio: 1;
-		border: none;
-		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font: inherit;
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-		font-variant-numeric: tabular-nums;
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-drp-calendar] [data-calendar-day-button]:hover:not([data-disabled]) {
-		background: var(--dry-range-calendar-day-hover-bg, var(--dry-color-bg-raised));
-	}
-
-	[data-drp-calendar] [data-calendar-day-button]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-
-	[data-drp-calendar]
-		[data-calendar-day-button][data-today]:not([data-range-start]):not([data-range-end]) {
-		color: var(--dry-range-calendar-today-color, var(--dry-color-fill-brand));
-		font-weight: 600;
-	}
-
-	[data-drp-calendar] [data-calendar-day-button][data-outside-month] {
-		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
-		opacity: 0.6;
-	}
-
-	[data-drp-calendar] [data-calendar-day-button][data-disabled] {
-		cursor: not-allowed;
-		opacity: 0.4;
-		pointer-events: none;
-	}
-
-	/* ── Range endpoints (last to win specificity over in-range/outside) ── */
-
-	[data-drp-calendar] [data-calendar-day-button][data-range-start],
-	[data-drp-calendar] [data-calendar-day-button][data-range-end] {
-		background: var(--dry-range-calendar-selected-bg, var(--dry-color-fill-brand));
-		color: var(--dry-range-calendar-selected-color, var(--dry-color-on-brand));
-		font-weight: 600;
-		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
-	}
-
-	[data-drp-calendar] [data-calendar-day-button][data-range-start]:hover:not([data-disabled]),
-	[data-drp-calendar] [data-calendar-day-button][data-range-end]:hover:not([data-disabled]) {
-		background: var(--dry-range-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
-	}
 </style>

package/dist/date-range-picker/date-range-picker-button-calendar.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+declare const DateRangePickerButtonCalendar: import("svelte").Component<Props, {}, "">;
+type DateRangePickerButtonCalendar = ReturnType<typeof DateRangePickerButtonCalendar>;
+export default DateRangePickerButtonCalendar;

package/dist/date-range-picker/date-range-picker-button-preset.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getDateRangePickerCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		startDate: Date;
+		endDate: Date;
+		children: Snippet;
+	}
+
+	let { startDate, endDate, children, ...rest }: Props = $props();
+
+	const ctx = getDateRangePickerCtx();
+
+	function handleClick() {
+		ctx.selectDate(startDate);
+		ctx.selectDate(endDate);
+	}
+</script>
+
+<Button variant="pill" size="sm" type="button" {...rest} onclick={handleClick}>
+	{@render children()}
+</Button>

package/dist/date-range-picker/date-range-picker-button-preset.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+    startDate: Date;
+    endDate: Date;
+    children: Snippet;
+}
+declare const DateRangePickerButtonPreset: import("svelte").Component<Props, {}, "">;
+type DateRangePickerButtonPreset = ReturnType<typeof DateRangePickerButtonPreset>;
+export default DateRangePickerButtonPreset;