@dryui/ui 0.0.1

package/dist/drag-and-drop/drag-and-drop-root.svelte

@@ -0,0 +1,199 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setDragAndDropCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		items: T[];
+		onReorder: (items: T[]) => void;
+		orientation?: 'vertical' | 'horizontal';
+		children: Snippet;
+	}
+
+	let {
+		items,
+		onReorder,
+		orientation = 'vertical',
+		children,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let draggedIndex: number | null = $state(null);
+	let overIndex: number | null = $state(null);
+	let isDragging = $state(false);
+	let hasHandle = $state(false);
+	let liveRegionMessage = $state('');
+
+	let rootElement: HTMLDivElement | undefined = $state();
+
+	function reorder(from: number, to: number) {
+		if (from === to) return;
+		const newItems = [...items];
+		const removed = newItems.splice(from, 1);
+		if (removed.length === 0) return;
+		newItems.splice(to, 0, removed[0]!);
+		onReorder(newItems);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (!isDragging || draggedIndex === null || !rootElement) return;
+
+		const itemElements = Array.from(rootElement.querySelectorAll<HTMLElement>('[data-dnd-item]'));
+
+		const pointerPos = orientation === 'vertical' ? e.clientY : e.clientX;
+
+		let closestIndex = draggedIndex;
+		let closestDist = Infinity;
+
+		for (let i = 0; i < itemElements.length; i++) {
+			const el = itemElements[i];
+			if (!el) continue;
+			const rect = el.getBoundingClientRect();
+			const center =
+				orientation === 'vertical' ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+			const dist = Math.abs(pointerPos - center);
+			if (dist < closestDist) {
+				closestDist = dist;
+				closestIndex = i;
+			}
+		}
+
+		overIndex = closestIndex;
+	}
+
+	function handlePointerUp() {
+		if (isDragging && draggedIndex !== null && overIndex !== null) {
+			reorder(draggedIndex, overIndex);
+			announce(`Item moved to position ${overIndex + 1}`);
+		}
+		resetState();
+	}
+
+	function resetState() {
+		draggedIndex = null;
+		overIndex = null;
+		isDragging = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && isDragging) {
+			e.preventDefault();
+			announce('Reorder cancelled');
+			resetState();
+		}
+	}
+
+	setDragAndDropCtx({
+		get draggedIndex() {
+			return draggedIndex;
+		},
+		get overIndex() {
+			return overIndex;
+		},
+		get isDragging() {
+			return isDragging;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get hasHandle() {
+			return hasHandle;
+		},
+		registerHandle() {
+			hasHandle = true;
+		},
+		startDrag(index: number, event: PointerEvent) {
+			draggedIndex = index;
+			overIndex = index;
+			isDragging = true;
+
+			const target = event.currentTarget as HTMLElement;
+			target.setPointerCapture(event.pointerId);
+			announce(`Grabbed item at position ${index + 1}. Use arrow keys to move.`);
+		},
+		handleDragOver(index: number) {
+			if (isDragging) {
+				overIndex = index;
+			}
+		},
+		endDrag() {
+			if (isDragging && draggedIndex !== null && overIndex !== null) {
+				reorder(draggedIndex, overIndex);
+				announce(`Item moved to position ${overIndex + 1}`);
+			}
+			resetState();
+		},
+		cancelDrag() {
+			announce('Reorder cancelled');
+			resetState();
+		},
+		moveItem(fromIndex: number, direction: 'up' | 'down') {
+			const toIndex =
+				direction === 'up' ? Math.max(0, fromIndex - 1) : Math.min(items.length - 1, fromIndex + 1);
+			if (fromIndex !== toIndex) {
+				reorder(fromIndex, toIndex);
+				announce(`Item moved to position ${toIndex + 1} of ${items.length}`);
+			}
+		},
+		announce(message: string) {
+			liveRegionMessage = message;
+		}
+	});
+
+	function announce(message: string) {
+		liveRegionMessage = '';
+		// Force re-announcement by clearing then setting
+		requestAnimationFrame(() => {
+			liveRegionMessage = message;
+		});
+	}
+</script>
+
+<div
+	bind:this={rootElement}
+	role="listbox"
+	data-dnd-root
+	data-orientation={orientation}
+	data-dragging={isDragging ? '' : undefined}
+	onpointermove={handlePointerMove}
+	onpointerup={handlePointerUp}
+	onkeydown={handleKeydown}
+	{...rest}
+	class={className}
+>
+	{@render children()}
+	<div aria-live="assertive" aria-atomic="true" class="liveRegion">
+		{liveRegionMessage}
+	</div>
+</div>
+
+<style>
+	.liveRegion {
+		position: absolute;
+		aspect-ratio: 1;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+	}
+
+	[data-dnd-root] {
+		position: relative;
+		display: grid;
+		gap: var(--dry-dnd-gap, var(--dry-space-2));
+	}
+
+	[data-dnd-root][data-orientation='vertical'] {
+		grid-auto-flow: row;
+	}
+
+	[data-dnd-root][data-orientation='horizontal'] {
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+	}
+
+	[data-dnd-root][data-dragging] {
+		cursor: grabbing;
+	}
+</style>

package/dist/drag-and-drop/drag-and-drop-root.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T>(): {
+	props: HTMLAttributes<HTMLDivElement> & {
+		items: T[];
+		onReorder: (items: T[]) => void;
+		orientation?: 'vertical' | 'horizontal';
+		children: Snippet;
+	};
+	exports: {};
+	bindings: '';
+	slots: {};
+	events: {};
+};
+declare class __sveltets_Render<T> {
+	props(): ReturnType<typeof $$render<T>>['props'];
+	events(): ReturnType<typeof $$render<T>>['events'];
+	slots(): ReturnType<typeof $$render<T>>['slots'];
+	bindings(): '';
+	exports(): {};
+}
+interface $$IsomorphicComponent {
+	new <T>(
+		options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>
+	): import('svelte').SvelteComponent<
+		ReturnType<__sveltets_Render<T>['props']>,
+		ReturnType<__sveltets_Render<T>['events']>,
+		ReturnType<__sveltets_Render<T>['slots']>
+	> & {
+		$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+	} & ReturnType<__sveltets_Render<T>['exports']>;
+	<T>(
+		internal: unknown,
+		props: ReturnType<__sveltets_Render<T>['props']> & {}
+	): ReturnType<__sveltets_Render<T>['exports']>;
+	z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DragAndDropRoot: $$IsomorphicComponent;
+type DragAndDropRoot<T> = InstanceType<typeof DragAndDropRoot<T>>;
+export default DragAndDropRoot;

package/dist/drag-and-drop/index.d.ts

@@ -0,0 +1,13 @@
+export type {
+	DragAndDropRootProps,
+	DragAndDropItemProps,
+	DragAndDropHandleProps
+} from '@dryui/primitives';
+import DragAndDropRoot from './drag-and-drop-root.svelte';
+import DragAndDropItem from './drag-and-drop-item.svelte';
+import DragAndDropHandle from './drag-and-drop-handle.svelte';
+export declare const DragAndDrop: {
+	Root: typeof DragAndDropRoot;
+	Item: typeof DragAndDropItem;
+	Handle: typeof DragAndDropHandle;
+};

package/dist/drag-and-drop/index.js

@@ -0,0 +1,8 @@
+import DragAndDropRoot from './drag-and-drop-root.svelte';
+import DragAndDropItem from './drag-and-drop-item.svelte';
+import DragAndDropHandle from './drag-and-drop-handle.svelte';
+export const DragAndDrop = {
+    Root: DragAndDropRoot,
+    Item: DragAndDropItem,
+    Handle: DragAndDropHandle
+};

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

@@ -0,0 +1,9 @@
+interface DrawerContext {
+    readonly open: boolean;
+    readonly side: 'top' | 'right' | 'bottom' | 'left';
+    readonly headerId: string;
+    show: () => void;
+    close: () => void;
+}
+export declare const setDrawerCtx: (ctx: DrawerContext) => DrawerContext, getDrawerCtx: () => DrawerContext;
+export {};

package/dist/drawer/context.svelte.js

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

package/dist/drawer/drawer-body.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		padding?: boolean;
+		children: Snippet;
+	}
+
+	let { padding = true, class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-drawer-body data-no-padding={!padding || undefined} class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-drawer-body] {
+		padding: var(--dry-space-12) var(--dry-space-8);
+		overflow-y: auto;
+		min-height: 0;
+
+		--dry-sidebar-bg: var(--dry-drawer-bg);
+		--dry-sidebar-border: transparent;
+		--dry-sidebar-shadow: none;
+		--dry-sidebar-radius: 0;
+	}
+
+	[data-drawer-body][data-no-padding] {
+		padding: 0;
+	}
+</style>

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

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

package/dist/drawer/drawer-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 { getDrawerCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getDrawerCtx();
+</script>
+
+<CloseButtonBase onclick={() => ctx.close()} class={className} {...rest}>
+	{@render children()}
+</CloseButtonBase>

package/dist/drawer/drawer-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 DrawerClose: import('svelte').Component<Props, {}, ''>;
+type DrawerClose = ReturnType<typeof DrawerClose>;
+export default DrawerClose;

package/dist/drawer/drawer-content.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDrawerCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDialogElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getDrawerCtx();
+
+	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-drawer-content
+	data-side={ctx.side}
+	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-drawer-panel>
+		{@render children()}
+	</div>
+</dialog>
+
+<style>
+	[data-drawer-content] {
+		all: unset;
+		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;
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: minmax(0, 1fr);
+	}
+
+	[data-drawer-content]:not([open]) {
+		display: none;
+	}
+
+	[data-drawer-content]::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop-strong));
+		backdrop-filter: blur(var(--dry-overlay-blur, 8px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 8px));
+	}
+
+	/* Side positioning via grid alignment */
+	[data-drawer-content][data-side='right'] {
+		grid-template-columns:
+			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)))
+			var(--dry-drawer-size, 25rem);
+	}
+
+	[data-drawer-content][data-side='left'] {
+		grid-template-columns:
+			var(--dry-drawer-size, 25rem)
+			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)));
+	}
+
+	[data-drawer-content][data-side='top'] {
+		grid-template-rows:
+			var(--dry-drawer-size, 25rem)
+			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)));
+	}
+
+	[data-drawer-content][data-side='bottom'] {
+		grid-template-rows:
+			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)))
+			var(--dry-drawer-size, 25rem);
+	}
+
+	/* Panel */
+	[data-drawer-panel] {
+		--dry-drawer-bg: var(--dry-color-bg-overlay);
+		--dry-drawer-border: var(--dry-color-stroke-weak);
+		--dry-drawer-size: 25rem;
+
+		background: var(--dry-drawer-bg);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-drawer-shadow, var(--dry-shadow-overlay));
+		padding: 0;
+		display: grid;
+		overflow: auto;
+
+		transition:
+			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),
+			opacity var(--dry-duration-normal) var(--dry-ease-out);
+	}
+
+	[data-drawer-content][data-side='right'] [data-drawer-panel] {
+		grid-column: 2;
+		height: 100%;
+		border-left: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-drawer-content][data-side='left'] [data-drawer-panel] {
+		grid-column: 1;
+		height: 100%;
+		border-right: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-drawer-content][data-side='top'] [data-drawer-panel] {
+		grid-row: 1;
+		height: var(--dry-drawer-size);
+		border-bottom: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-drawer-content][data-side='bottom'] [data-drawer-panel] {
+		grid-row: 2;
+		height: var(--dry-drawer-size);
+		border-top: 1px solid var(--dry-drawer-border);
+	}
+
+	@starting-style {
+		[data-drawer-content][data-side='right'][open] [data-drawer-panel] {
+			opacity: 0;
+			transform: translateX(100%);
+		}
+		[data-drawer-content][data-side='left'][open] [data-drawer-panel] {
+			opacity: 0;
+			transform: translateX(-100%);
+		}
+		[data-drawer-content][data-side='top'][open] [data-drawer-panel] {
+			opacity: 0;
+			transform: translateY(-100%);
+		}
+		[data-drawer-content][data-side='bottom'][open] [data-drawer-panel] {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+	}
+
+	[data-drawer-content][data-state='open'] [data-drawer-panel] {
+		opacity: 1;
+		transform: translate(0);
+	}
+</style>

package/dist/drawer/drawer-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 DrawerContent: import('svelte').Component<Props, {}, ''>;
+type DrawerContent = ReturnType<typeof DrawerContent>;
+export default DrawerContent;

package/dist/drawer/drawer-footer.svelte

@@ -0,0 +1,26 @@
+<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-drawer-footer class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-drawer-footer] {
+		padding: var(--dry-space-6) var(--dry-space-8);
+		border-top: 1px solid var(--dry-drawer-border);
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		justify-items: end;
+		gap: var(--dry-space-2);
+	}
+</style>

package/dist/drawer/drawer-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 DrawerFooter: import('svelte').Component<Props, {}, ''>;
+type DrawerFooter = ReturnType<typeof DrawerFooter>;
+export default DrawerFooter;

package/dist/drawer/drawer-header.svelte

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

package/dist/drawer/drawer-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 DrawerHeader: import('svelte').Component<Props, {}, ''>;
+type DrawerHeader = ReturnType<typeof DrawerHeader>;
+export default DrawerHeader;

package/dist/drawer/drawer-overlay.svelte

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

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

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

package/dist/drawer/drawer-root.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { generateFormId } from '@dryui/primitives';
+	import { setDrawerCtx } from './context.svelte.js';
+
+	interface Props {
+		open?: boolean;
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		children: Snippet;
+	}
+
+	let { open = $bindable(false), side = 'right', children }: Props = $props();
+
+	const headerId = generateFormId('drawer');
+
+	setDrawerCtx({
+		get open() {
+			return open;
+		},
+		get side() {
+			return side;
+		},
+		get headerId() {
+			return headerId;
+		},
+		show() {
+			open = true;
+		},
+		close() {
+			open = false;
+		}
+	});
+</script>
+
+{@render children()}

package/dist/drawer/drawer-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+	open?: boolean;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	children: Snippet;
+}
+declare const DrawerRoot: import('svelte').Component<Props, {}, 'open'>;
+type DrawerRoot = ReturnType<typeof DrawerRoot>;
+export default DrawerRoot;