@signal9/era-ui 1.1.2

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

@@ -0,0 +1,18 @@
+export { default as Root } from './date-range-picker-root.svelte';
+export { default as Label } from './date-range-picker-label.svelte';
+export { default as Input } from './date-range-picker-input.svelte';
+export { default as Segment } from './date-range-picker-segment.svelte';
+export { default as Trigger } from './date-range-picker-trigger.svelte';
+export { default as Content } from './date-range-picker-content.svelte';
+export { default as Calendar } from './date-range-picker-calendar.svelte';
+export { default as Header } from './date-range-picker-header.svelte';
+export { default as Heading } from './date-range-picker-heading.svelte';
+export { default as PrevButton } from './date-range-picker-prev-button.svelte';
+export { default as NextButton } from './date-range-picker-next-button.svelte';
+export { default as Grid } from './date-range-picker-grid.svelte';
+export { default as GridHead } from './date-range-picker-grid-head.svelte';
+export { default as GridBody } from './date-range-picker-grid-body.svelte';
+export { default as GridRow } from './date-range-picker-grid-row.svelte';
+export { default as HeadCell } from './date-range-picker-head-cell.svelte';
+export { default as Cell } from './date-range-picker-cell.svelte';
+export { default as Day } from './date-range-picker-day.svelte';

package/dist/ui/dialog/dialog-close.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		variant,
+		icon,
+		loading,
+		loadingLabel,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<Dialog.CloseProps> &
+		Omit<ButtonVariants, 'active'> & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<Dialog.Close {...restProps}>
+	{#snippet child({ props })}
+		<Button
+			bind:ref
+			{...props}
+			{tone}
+			{size}
+			{variant}
+			{icon}
+			{loading}
+			{loadingLabel}
+			class={className}
+		>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</Dialog.Close>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<Dialog.CloseProps> & Omit<ButtonVariants, 'active'> & {
+    children?: Snippet;
+};
+declare const DialogClose: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DialogClose = ReturnType<typeof DialogClose>;
+export default DialogClose;

package/dist/ui/dialog/dialog-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Dialog.ContentProps> = $props();
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<Dialog.Content
+		bind:ref
+		class={cn(
+			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-(--era-gap) rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</Dialog.Content>
+</Dialog.Portal>

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

@@ -0,0 +1,5 @@
+import { Dialog } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const DialogContent: import("svelte").Component<PartProps<Dialog.ContentProps>, {}, "ref">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/ui/dialog/dialog-description.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Dialog.DescriptionProps = $props();
+</script>
+
+<Dialog.Description
+	bind:ref
+	class={cn('text-body leading-normal text-muted', className)}
+	{...restProps}
+/>

package/dist/ui/dialog/dialog-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog } from 'bits-ui';
+declare const DialogDescription: import("svelte").Component<Dialog.DescriptionProps, {}, "ref">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Dialog.OverlayProps = $props();
+</script>
+
+<Dialog.Overlay
+	bind:ref
+	class={cn('fixed inset-0 z-50 bg-(--era-overlay-bg)', className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Dialog } from 'bits-ui';
+declare const DialogOverlay: import("svelte").Component<Dialog.OverlayProps, {}, "ref">;
+type DialogOverlay = ReturnType<typeof DialogOverlay>;
+export default DialogOverlay;

package/dist/ui/dialog/dialog-title.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Dialog.TitleProps = $props();
+</script>
+
+<Dialog.Title bind:ref class={cn('text-body font-medium text-bright', className)} {...restProps} />

package/dist/ui/dialog/dialog-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog } from 'bits-ui';
+declare const DialogTitle: import("svelte").Component<Dialog.TitleProps, {}, "ref">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		variant,
+		icon,
+		active,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<Dialog.TriggerProps> &
+		ButtonVariants & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<Dialog.Trigger {...restProps}>
+	{#snippet child({ props })}
+		<Button bind:ref {...props} {tone} {size} {variant} {icon} {active} class={className}>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</Dialog.Trigger>

package/dist/ui/dialog/dialog-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<Dialog.TriggerProps> & ButtonVariants & {
+    children?: Snippet;
+};
+declare const DialogTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DialogTrigger = ReturnType<typeof DialogTrigger>;
+export default DialogTrigger;

package/dist/ui/dialog/index.d.ts

@@ -0,0 +1,9 @@
+import { Dialog } from 'bits-ui';
+export declare const Root: typeof Dialog.Root;
+export declare const Portal: typeof Dialog.Portal;
+export { default as Trigger } from './dialog-trigger.svelte';
+export { default as Content } from './dialog-content.svelte';
+export { default as Overlay } from './dialog-overlay.svelte';
+export { default as Title } from './dialog-title.svelte';
+export { default as Description } from './dialog-description.svelte';
+export { default as Close } from './dialog-close.svelte';

package/dist/ui/dialog/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from 'bits-ui';
+export const Root = Dialog.Root;
+export const Portal = Dialog.Portal;
+export { default as Trigger } from './dialog-trigger.svelte';
+export { default as Content } from './dialog-content.svelte';
+export { default as Overlay } from './dialog-overlay.svelte';
+export { default as Title } from './dialog-title.svelte';
+export { default as Description } from './dialog-description.svelte';
+export { default as Close } from './dialog-close.svelte';

package/dist/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: DropdownMenu.CheckboxItemProps = $props();
+</script>
+
+<DropdownMenu.CheckboxItem
+	bind:ref
+	bind:checked
+	class={cn(
+		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		className
+	)}
+	{...restProps}
+/>

package/dist/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu } from 'bits-ui';
+declare const DropdownMenuCheckboxItem: import("svelte").Component<DropdownMenu.CheckboxItemProps, {}, "ref" | "checked">;
+type DropdownMenuCheckboxItem = ReturnType<typeof DropdownMenuCheckboxItem>;
+export default DropdownMenuCheckboxItem;

package/dist/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		sideOffset = 0,
+		...restProps
+	}: PartProps<DropdownMenu.ContentProps> = $props();
+</script>
+
+<DropdownMenu.Portal>
+	<DropdownMenu.Content
+		bind:ref
+		align="start"
+		class={cn(
+			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+			className
+		)}
+		{sideOffset}
+		{...restProps}
+	>
+		{@render children?.()}
+	</DropdownMenu.Content>
+</DropdownMenu.Portal>

package/dist/ui/dropdown-menu/dropdown-menu-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const DropdownMenuContent: import("svelte").Component<PartProps<DropdownMenu.ContentProps>, {}, "ref">;
+type DropdownMenuContent = ReturnType<typeof DropdownMenuContent>;
+export default DropdownMenuContent;

package/dist/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenu.GroupHeadingProps = $props();
+</script>
+
+<DropdownMenu.GroupHeading
+	bind:ref
+	class={cn('flex h-(--era-h-md) items-center px-(--era-inset-md) text-body text-muted', className)}
+	{...restProps}
+/>

package/dist/ui/dropdown-menu/dropdown-menu-group-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu } from 'bits-ui';
+declare const DropdownMenuGroupHeading: import("svelte").Component<DropdownMenu.GroupHeadingProps, {}, "ref">;
+type DropdownMenuGroupHeading = ReturnType<typeof DropdownMenuGroupHeading>;
+export default DropdownMenuGroupHeading;

package/dist/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<DropdownMenu.ItemProps> = $props();
+</script>
+
+<DropdownMenu.Item
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</DropdownMenu.Item>

package/dist/ui/dropdown-menu/dropdown-menu-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const DropdownMenuItem: import("svelte").Component<PartProps<DropdownMenu.ItemProps>, {}, "ref">;
+type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;
+export default DropdownMenuItem;

package/dist/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenu.RadioItemProps = $props();
+</script>
+
+<DropdownMenu.RadioItem
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		className
+	)}
+	{...restProps}
+/>

package/dist/ui/dropdown-menu/dropdown-menu-radio-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu } from 'bits-ui';
+declare const DropdownMenuRadioItem: import("svelte").Component<DropdownMenu.RadioItemProps, {}, "ref">;
+type DropdownMenuRadioItem = ReturnType<typeof DropdownMenuRadioItem>;
+export default DropdownMenuRadioItem;

package/dist/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenu.SeparatorProps = $props();
+</script>
+
+<DropdownMenu.Separator
+	bind:ref
+	class={cn('my-[calc(var(--era-gap)/2)] h-px bg-divider-faded', className)}
+	{...restProps}
+/>

package/dist/ui/dropdown-menu/dropdown-menu-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu } from 'bits-ui';
+declare const DropdownMenuSeparator: import("svelte").Component<DropdownMenu.SeparatorProps, {}, "ref">;
+type DropdownMenuSeparator = ReturnType<typeof DropdownMenuSeparator>;
+export default DropdownMenuSeparator;

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: PartProps<DropdownMenu.SubContentProps> = $props();
+</script>
+
+<DropdownMenu.Portal>
+	<DropdownMenu.SubContent
+		bind:ref
+		class={cn(
+			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			className
+		)}
+		{sideOffset}
+		{...restProps}
+	>
+		{@render children?.()}
+	</DropdownMenu.SubContent>
+</DropdownMenu.Portal>

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const DropdownMenuSubContent: import("svelte").Component<PartProps<DropdownMenu.SubContentProps>, {}, "ref">;
+type DropdownMenuSubContent = ReturnType<typeof DropdownMenuSubContent>;
+export default DropdownMenuSubContent;

package/dist/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<DropdownMenu.SubTriggerProps> = $props();
+</script>
+
+<DropdownMenu.SubTrigger
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) cursor-pointer items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) data-[state=open]:bg-hover',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRight class="size-(--era-h-xs) text-muted" />
+</DropdownMenu.SubTrigger>

package/dist/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const DropdownMenuSubTrigger: import("svelte").Component<PartProps<DropdownMenu.SubTriggerProps>, {}, "ref">;
+type DropdownMenuSubTrigger = ReturnType<typeof DropdownMenuSubTrigger>;
+export default DropdownMenuSubTrigger;

package/dist/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<DropdownMenu.TriggerProps> = $props();
+</script>
+
+<DropdownMenu.Trigger
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) w-full items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDown class="size-(--era-h-xs) text-muted" />
+</DropdownMenu.Trigger>

package/dist/ui/dropdown-menu/dropdown-menu-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const DropdownMenuTrigger: import("svelte").Component<PartProps<DropdownMenu.TriggerProps>, {}, "ref">;
+type DropdownMenuTrigger = ReturnType<typeof DropdownMenuTrigger>;
+export default DropdownMenuTrigger;

package/dist/ui/dropdown-menu/index.d.ts

@@ -0,0 +1,14 @@
+import { DropdownMenu } from 'bits-ui';
+export declare const Root: typeof DropdownMenu.Root;
+export declare const Group: typeof DropdownMenu.Group;
+export declare const RadioGroup: typeof DropdownMenu.RadioGroup;
+export declare const Sub: typeof DropdownMenu.Sub;
+export { default as Trigger } from './dropdown-menu-trigger.svelte';
+export { default as Content } from './dropdown-menu-content.svelte';
+export { default as Item } from './dropdown-menu-item.svelte';
+export { default as CheckboxItem } from './dropdown-menu-checkbox-item.svelte';
+export { default as RadioItem } from './dropdown-menu-radio-item.svelte';
+export { default as Separator } from './dropdown-menu-separator.svelte';
+export { default as SubTrigger } from './dropdown-menu-sub-trigger.svelte';
+export { default as SubContent } from './dropdown-menu-sub-content.svelte';
+export { default as GroupHeading } from './dropdown-menu-group-heading.svelte';

package/dist/ui/dropdown-menu/index.js

@@ -0,0 +1,14 @@
+import { DropdownMenu } from 'bits-ui';
+export const Root = DropdownMenu.Root;
+export const Group = DropdownMenu.Group;
+export const RadioGroup = DropdownMenu.RadioGroup;
+export const Sub = DropdownMenu.Sub;
+export { default as Trigger } from './dropdown-menu-trigger.svelte';
+export { default as Content } from './dropdown-menu-content.svelte';
+export { default as Item } from './dropdown-menu-item.svelte';
+export { default as CheckboxItem } from './dropdown-menu-checkbox-item.svelte';
+export { default as RadioItem } from './dropdown-menu-radio-item.svelte';
+export { default as Separator } from './dropdown-menu-separator.svelte';
+export { default as SubTrigger } from './dropdown-menu-sub-trigger.svelte';
+export { default as SubContent } from './dropdown-menu-sub-content.svelte';
+export { default as GroupHeading } from './dropdown-menu-group-heading.svelte';

package/dist/ui/file-upload/file-upload.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Upload from '@lucide/svelte/icons/upload';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		files = $bindable<FileList | null>(null),
+		class: className,
+		onchange,
+		disabled,
+		multiple,
+		...restProps
+	}: Omit<HTMLInputAttributes, 'type' | 'files'> & {
+		ref?: HTMLInputElement | null;
+		files?: FileList | null;
+	} = $props();
+
+	let dragging = $state(false);
+	let depth = 0;
+
+	function label() {
+		if (files && files.length > 0) {
+			return files.length === 1 ? files[0].name : `${files.length} files`;
+		}
+		return dragging
+			? 'Drop to upload'
+			: multiple
+				? 'Choose files or drag here'
+				: 'Choose a file or drag here';
+	}
+
+	function onDragEnter(e: DragEvent) {
+		if (disabled) return;
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		depth++;
+		dragging = true;
+	}
+
+	function onDragLeave() {
+		if (disabled) return;
+		depth = Math.max(0, depth - 1);
+		if (depth === 0) dragging = false;
+	}
+
+	function onDragOver(e: DragEvent) {
+		if (disabled) return;
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+	}
+
+	function onDrop(e: DragEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		depth = 0;
+		dragging = false;
+		const dropped = e.dataTransfer?.files;
+		if (!dropped || !ref) return;
+		const next = !multiple && dropped.length > 1 ? new DataTransfer() : null;
+		if (next) next.items.add(dropped[0]);
+		ref.files = next ? next.files : dropped;
+		files = ref.files;
+		ref.dispatchEvent(new Event('change', { bubbles: true }));
+	}
+
+	function onInputChange(e: Event) {
+		files = (e.currentTarget as HTMLInputElement).files;
+		onchange?.(e as Event & { currentTarget: EventTarget & HTMLInputElement });
+	}
+</script>
+
+<label
+	data-dragging={dragging || undefined}
+	data-disabled={disabled || undefined}
+	class={cn(
+		'flex h-(--era-h-md) w-full items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) font-mono text-body leading-none text-fg shadow-(--era-shadow-well) transition-colors duration-(--era-duration) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-(--era-highlight) data-[dragging]:text-bright',
+		className
+	)}
+	ondragenter={onDragEnter}
+	ondragleave={onDragLeave}
+	ondragover={onDragOver}
+	ondrop={onDrop}
+>
+	<Upload class="size-(--era-h-xs) shrink-0" />
+	<span class="truncate {files && files.length > 0 ? 'text-bright' : 'text-muted'}">
+		{label()}
+	</span>
+	<input
+		bind:this={ref}
+		type="file"
+		class="sr-only"
+		{disabled}
+		{multiple}
+		onchange={onInputChange}
+		{...restProps}
+	/>
+</label>

package/dist/ui/file-upload/file-upload.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLInputAttributes, 'type' | 'files'> & {
+    ref?: HTMLInputElement | null;
+    files?: FileList | null;
+};
+declare const FileUpload: import("svelte").Component<$$ComponentProps, {}, "ref" | "files">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

package/dist/ui/file-upload/index.d.ts

@@ -0,0 +1 @@
+export { default as FileUpload } from './file-upload.svelte';

package/dist/ui/file-upload/index.js

@@ -0,0 +1 @@
+export { default as FileUpload } from './file-upload.svelte';