@dryui/ui 0.0.1

package/dist/date-range-picker/index.js

@@ -0,0 +1,12 @@
+import DateRangePickerRoot from './date-range-picker-root.svelte';
+import DateRangePickerTrigger from './date-range-picker-trigger.svelte';
+import DateRangePickerContent from './date-range-picker-content.svelte';
+import DateRangePickerCalendar from './date-range-picker-calendar.svelte';
+import DateRangePickerPreset from './date-range-picker-preset.svelte';
+export const DateRangePicker = {
+    Root: DateRangePickerRoot,
+    Trigger: DateRangePickerTrigger,
+    Content: DateRangePickerContent,
+    Calendar: DateRangePickerCalendar,
+    Preset: DateRangePickerPreset
+};

package/dist/date-time-input/date-time-input.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { DateField } from '../date-field/index.js';
+	import { TimeInput } from '../time-input/index.js';
+
+	type DateSegmentType = 'month' | 'day' | 'year';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: Date;
+		min?: Date;
+		max?: Date;
+		disabled?: boolean;
+		locale?: string;
+		name?: string;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let {
+		value = $bindable(new Date()),
+		min,
+		max,
+		disabled = false,
+		locale = 'en-US',
+		name,
+		size = 'md',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	function getSegmentOrder(loc: string): DateSegmentType[] {
+		const formatter = new Intl.DateTimeFormat(loc, {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		});
+		const parts = formatter.formatToParts(new Date(2000, 0, 1));
+		const order: DateSegmentType[] = [];
+		for (const part of parts) {
+			if (part.type === 'month') order.push('month');
+			else if (part.type === 'day') order.push('day');
+			else if (part.type === 'year') order.push('year');
+		}
+		return order.length === 3 ? order : ['month', 'day', 'year'];
+	}
+
+	const segmentOrder = $derived(getSegmentOrder(locale));
+
+	let dateValue = $state<Date | null>(value);
+	let timeValue = $state(
+		String(value.getHours()).padStart(2, '0') + ':' + String(value.getMinutes()).padStart(2, '0')
+	);
+
+	let updating = false;
+
+	$effect(() => {
+		if (updating) return;
+		const v = value;
+		if (v) {
+			dateValue = new Date(v.getFullYear(), v.getMonth(), v.getDate());
+			timeValue =
+				String(v.getHours()).padStart(2, '0') + ':' + String(v.getMinutes()).padStart(2, '0');
+		}
+	});
+
+	$effect(() => {
+		if (!dateValue) return;
+		const [hStr, mStr] = timeValue.split(':');
+		const hours = parseInt(hStr ?? '0', 10);
+		const minutes = parseInt(mStr ?? '0', 10);
+
+		const combined = new Date(
+			dateValue.getFullYear(),
+			dateValue.getMonth(),
+			dateValue.getDate(),
+			hours,
+			minutes,
+			0,
+			0
+		);
+
+		if (min && combined < min) return;
+		if (max && combined > max) return;
+
+		if (combined.getTime() !== value.getTime()) {
+			updating = true;
+			value = combined;
+			updating = false;
+		}
+	});
+
+	const isoString = $derived(value ? value.toISOString() : '');
+</script>
+
+<div data-date-time-input class={className} {...rest}>
+	<div data-part="date-section">
+		<DateField.Root bind:value={dateValue} {locale} {disabled} {size}>
+			{#each segmentOrder as segmentType, i}
+				{#if i > 0}
+					<DateField.Separator />
+				{/if}
+				<DateField.Segment type={segmentType} />
+			{/each}
+		</DateField.Root>
+	</div>
+
+	<div data-part="time-section">
+		<TimeInput bind:value={timeValue} {disabled} />
+	</div>
+
+	{#if name}
+		<input type="hidden" {name} value={isoString} {disabled} />
+	{/if}
+</div>
+
+<style>
+	[data-date-time-input] {
+		--dry-dti-gap: var(--dry-space-2, 0.5rem);
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-dti-gap);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	value?: Date;
+	min?: Date;
+	max?: Date;
+	disabled?: boolean;
+	locale?: string;
+	name?: string;
+	size?: 'sm' | 'md' | 'lg';
+}
+declare const DateTimeInput: import('svelte').Component<Props, {}, 'value'>;
+type DateTimeInput = ReturnType<typeof DateTimeInput>;
+export default DateTimeInput;

package/dist/date-time-input/index.d.ts

@@ -0,0 +1,5 @@
+import type { DateTimeInputProps as PrimitiveDateTimeInputProps } from '@dryui/primitives';
+export interface DateTimeInputProps extends PrimitiveDateTimeInputProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+export { default as DateTimeInput } from './date-time-input.svelte';

package/dist/date-time-input/index.js

@@ -0,0 +1 @@
+export { default as DateTimeInput } from './date-time-input.svelte';

package/dist/description-list/description-list-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<dd data-description-list-dd class={className} {...rest}>
+	{@render children()}
+</dd>
+
+<style>
+	[data-description-list-dd] {
+		margin: 0;
+		font-size: var(--dry-description-list-description-size, var(--dry-type-small-size));
+		line-height: 1.6;
+		color: var(--dry-description-list-description-color, var(--dry-color-text-strong));
+	}
+</style>

package/dist/description-list/description-list-description.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+	children: Snippet;
+}
+declare const DescriptionListDescription: import('svelte').Component<Props, {}, ''>;
+type DescriptionListDescription = ReturnType<typeof DescriptionListDescription>;
+export default DescriptionListDescription;

package/dist/description-list/description-list-item.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-description-list-item class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-description-list-item] {
+		display: grid;
+		gap: var(--dry-description-list-item-gap, var(--dry-space-2));
+		padding-block: var(--dry-description-list-item-padding-y, var(--dry-space-3));
+		border-bottom: 1px solid var(--dry-description-list-border, var(--dry-color-stroke-weak));
+	}
+
+	[data-description-list-item]:last-child {
+		border-bottom: none;
+	}
+
+	@container (min-width: 768px) {
+		[data-description-list-item] {
+			grid-template-columns: minmax(11rem, 0.95fr) minmax(0, 1.4fr);
+			align-items: start;
+		}
+	}
+</style>

package/dist/description-list/description-list-item.svelte.d.ts

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

package/dist/description-list/description-list-root.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDListElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<dl data-description-list class={className} {...rest}>
+	{@render children()}
+</dl>
+
+<style>
+	[data-description-list] {
+		container-type: inline-size;
+		display: grid;
+		gap: var(--dry-description-list-gap, var(--dry-space-4));
+	}
+</style>

package/dist/description-list/description-list-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDListElement> {
+	children: Snippet;
+}
+declare const DescriptionListRoot: import('svelte').Component<Props, {}, ''>;
+type DescriptionListRoot = ReturnType<typeof DescriptionListRoot>;
+export default DescriptionListRoot;

package/dist/description-list/description-list-term.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<dt data-description-list-term class={className} {...rest}>
+	{@render children()}
+</dt>
+
+<style>
+	[data-description-list-term] {
+		margin: 0;
+		font-size: var(--dry-description-list-term-size, var(--dry-type-small-size));
+		font-weight: 600;
+		color: var(--dry-description-list-term-color, var(--dry-color-text-weak));
+	}
+</style>

package/dist/description-list/description-list-term.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+	children: Snippet;
+}
+declare const DescriptionListTerm: import('svelte').Component<Props, {}, ''>;
+type DescriptionListTerm = ReturnType<typeof DescriptionListTerm>;
+export default DescriptionListTerm;

package/dist/description-list/index.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface DescriptionListRootProps extends HTMLAttributes<HTMLDListElement> {
+	children: Snippet;
+}
+export interface DescriptionListItemProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+export interface DescriptionListTermProps extends HTMLAttributes<HTMLElement> {
+	children: Snippet;
+}
+export interface DescriptionListDescriptionProps extends HTMLAttributes<HTMLElement> {
+	children: Snippet;
+}
+import DescriptionListRoot from './description-list-root.svelte';
+import DescriptionListItem from './description-list-item.svelte';
+import DescriptionListTerm from './description-list-term.svelte';
+import DescriptionListDescription from './description-list-description.svelte';
+export declare const DescriptionList: {
+	Root: typeof DescriptionListRoot;
+	Item: typeof DescriptionListItem;
+	Term: typeof DescriptionListTerm;
+	Description: typeof DescriptionListDescription;
+};

package/dist/description-list/index.js

@@ -0,0 +1,10 @@
+import DescriptionListRoot from './description-list-root.svelte';
+import DescriptionListItem from './description-list-item.svelte';
+import DescriptionListTerm from './description-list-term.svelte';
+import DescriptionListDescription from './description-list-description.svelte';
+export const DescriptionList = {
+    Root: DescriptionListRoot,
+    Item: DescriptionListItem,
+    Term: DescriptionListTerm,
+    Description: DescriptionListDescription
+};

package/dist/dialog/context.svelte.d.ts

@@ -0,0 +1,8 @@
+interface DialogContext {
+    readonly open: boolean;
+    readonly headerId: string;
+    show: () => void;
+    close: () => void;
+}
+export declare const setDialogCtx: (ctx: DialogContext) => DialogContext, getDialogCtx: () => DialogContext;
+export {};

package/dist/dialog/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setDialogCtx, getDialogCtx] = createContext('dialog');

package/dist/dialog/dialog-body.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-dialog-body class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-dialog-body] {
+		--dry-section-padding: var(--dry-dialog-padding);
+		padding: var(--dry-section-padding);
+		overflow-y: auto;
+		min-height: 0;
+	}
+</style>

package/dist/dialog/dialog-body.svelte.d.ts

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

package/dist/dialog/dialog-close.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getDialogCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getDialogCtx();
+</script>
+
+<CloseButtonBase onclick={() => ctx.close()} class={className} {...rest}>
+	{@render children()}
+</CloseButtonBase>

package/dist/dialog/dialog-close.svelte.d.ts

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

package/dist/dialog/dialog-content.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDialogCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDialogElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getDialogCtx();
+
+	let dialogEl = $state<HTMLDialogElement>();
+
+	$effect(() => {
+		if (ctx.open && dialogEl && !dialogEl.open) {
+			dialogEl.showModal();
+		}
+		if (!ctx.open && dialogEl?.open) {
+			dialogEl.close();
+		}
+	});
+</script>
+
+<dialog
+	bind:this={dialogEl}
+	data-dialog-content
+	aria-labelledby={ctx.headerId}
+	data-state={ctx.open ? 'open' : 'closed'}
+	onclose={() => ctx.close()}
+	onclick={(e) => {
+		if (e.target === dialogEl) {
+			ctx.close();
+		}
+	}}
+	class={className}
+	{...rest}
+>
+	<div data-dialog-panel>
+		{@render children()}
+	</div>
+</dialog>
+
+<style>
+	[data-dialog-content] {
+		position: fixed;
+		inset: 0;
+		height: 100vh;
+		height: 100dvh;
+		max-height: none;
+		border: none;
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		padding: 0;
+		margin: 0;
+		display: grid;
+		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
+		place-items: center;
+		overflow: visible;
+	}
+
+	[data-dialog-content]:not([open]) {
+		display: none;
+	}
+
+	[data-dialog-content]::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop));
+		backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+	}
+
+	[data-dialog-panel] {
+		--dry-dialog-border: var(--dry-overlay-border, var(--dry-color-stroke-weak));
+		--dry-dialog-padding: var(--dry-space-8);
+		--dry-radius-nested: max(
+			0px,
+			calc(
+				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl))) -
+					var(--dry-dialog-padding)
+			)
+		);
+
+		container-type: inline-size;
+		border: 1px solid var(--dry-dialog-border);
+		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl)));
+		background: var(--dry-dialog-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-dialog-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
+		padding: 0;
+		max-height: 85vh;
+		display: grid;
+		overflow: auto;
+
+		transition:
+			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
+	}
+
+	[data-dialog-content][data-state='open'] [data-dialog-panel] {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-dialog-content][open] [data-dialog-panel] {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter)) translateY(var(--dry-motion-distance-sm));
+		}
+	}
+</style>

package/dist/dialog/dialog-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDialogElement> {
+	children: Snippet;
+}
+declare const DialogContent: import('svelte').Component<Props, {}, ''>;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/dialog/dialog-footer.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-dialog-footer class={className} {...rest}>
+	{@render children()}
+</div>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	[data-dialog-footer] {
+		--dry-section-padding: var(--dry-dialog-padding);
+		--dry-section-border: var(--dry-dialog-border);
+		padding: var(--dry-section-padding);
+		border-top: 1px solid var(--dry-section-border);
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		justify-items: var(--dry-section-footer-justify, start);
+		gap: var(--dry-section-footer-gap, var(--dry-space-4));
+	}
+
+	@container (max-width: 320px) {
+		[data-dialog-footer] {
+			grid-auto-flow: row;
+			grid-auto-columns: auto;
+		}
+	}
+</style>

package/dist/dialog/dialog-footer.svelte.d.ts

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

package/dist/dialog/dialog-header.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDialogCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getDialogCtx();
+</script>
+
+<div data-dialog-header id={ctx.headerId} class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-dialog-header] {
+		--dry-section-padding: var(--dry-dialog-padding);
+		--dry-section-border: var(--dry-dialog-border);
+		padding: var(--dry-section-padding);
+		border-bottom: 1px solid var(--dry-section-border);
+	}
+</style>

package/dist/dialog/dialog-header.svelte.d.ts

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

package/dist/dialog/dialog-overlay.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDialogCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+
+	const ctx = getDialogCtx();
+</script>
+
+<div data-state={ctx.open ? 'open' : 'closed'} aria-hidden="true" class={className} {...rest}></div>
+
+<style>
+	div {
+		position: fixed;
+		inset: 0;
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop));
+		backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+		z-index: var(--dry-layer-overlay);
+		will-change: opacity;
+	}
+
+	div[data-state='closed'] {
+		display: none;
+	}
+</style>

package/dist/dialog/dialog-overlay.svelte.d.ts

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