@dryui/ui 0.0.1

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

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setFileUploadCtx } from './context.svelte.js';
+
+	interface Props {
+		files?: File[];
+		accept?: string | undefined;
+		multiple?: boolean | undefined;
+		maxSize?: number | undefined;
+		maxFiles?: number | undefined;
+		disabled?: boolean | undefined;
+		onFilesChange?: ((files: File[]) => void) | undefined;
+		children: Snippet;
+	}
+
+	let {
+		files = $bindable([]),
+		accept = '',
+		multiple = false,
+		maxSize = 0,
+		maxFiles = 0,
+		disabled = false,
+		onFilesChange,
+		children
+	}: Props = $props();
+
+	let isDragging = $state(false);
+	let inputEl = $state<HTMLInputElement>();
+
+	function isFileAccepted(file: File): boolean {
+		if (!accept) return true;
+		const types = accept.split(',').map((t) => t.trim());
+		return types.some((type) => {
+			if (type.startsWith('.')) {
+				return file.name.toLowerCase().endsWith(type.toLowerCase());
+			}
+			if (type.endsWith('/*')) {
+				const baseType = type.slice(0, -2);
+				return file.type.startsWith(baseType);
+			}
+			return file.type === type;
+		});
+	}
+
+	function addFiles(incoming: FileList | File[]) {
+		if (disabled) return;
+		const arr = Array.from(incoming);
+		const valid = arr.filter((f) => {
+			if (!isFileAccepted(f)) return false;
+			if (maxSize > 0 && f.size > maxSize) return false;
+			return true;
+		});
+
+		if (multiple) {
+			const combined = [...files, ...valid];
+			const limited = maxFiles > 0 ? combined.slice(0, maxFiles) : combined;
+			files = limited;
+		} else {
+			files = valid.slice(0, 1);
+		}
+
+		onFilesChange?.(files);
+	}
+
+	function removeFile(index: number) {
+		if (disabled) return;
+		files = files.filter((_, i) => i !== index);
+		onFilesChange?.(files);
+	}
+
+	function clearFiles() {
+		if (disabled) return;
+		files = [];
+		if (inputEl) inputEl.value = '';
+		onFilesChange?.(files);
+	}
+
+	function openFileDialog() {
+		if (disabled) return;
+		inputEl?.click();
+	}
+
+	function setDragging(value: boolean) {
+		isDragging = value;
+	}
+
+	setFileUploadCtx({
+		get files() {
+			return files;
+		},
+		get isDragging() {
+			return isDragging;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get accept() {
+			return accept;
+		},
+		get multiple() {
+			return multiple;
+		},
+		get maxSize() {
+			return maxSize;
+		},
+		get maxFiles() {
+			return maxFiles;
+		},
+		setDragging,
+		openFileDialog,
+		addFiles,
+		removeFile,
+		clearFiles
+	});
+</script>
+
+<input
+	bind:this={inputEl}
+	type="file"
+	{accept}
+	{multiple}
+	{disabled}
+	aria-hidden="true"
+	tabindex="-1"
+	class="file-upload-hidden-input"
+	onchange={(e) => {
+		const target = e.currentTarget as HTMLInputElement;
+		if (target.files) {
+			addFiles(target.files);
+			target.value = '';
+		}
+	}}
+/>
+
+{@render children()}
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	.file-upload-hidden-input {
+		display: none;
+		position: absolute;
+		height: 0;
+		overflow: hidden;
+	}
+
+	[data-file-upload] {
+		container-type: inline-size;
+		display: grid;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+	files?: File[];
+	accept?: string;
+	multiple?: boolean;
+	maxSize?: number;
+	maxFiles?: number;
+	disabled?: boolean;
+	onFilesChange?: (files: File[]) => void;
+	class?: string;
+	children: Snippet;
+}
+declare const FileUploadRoot: import('svelte').Component<Props, {}, 'files'>;
+type FileUploadRoot = ReturnType<typeof FileUploadRoot>;
+export default FileUploadRoot;

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getFileUploadCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	let { children, onclick, class: className, size = 'md', ...rest }: Props = $props();
+
+	const ctx = getFileUploadCtx();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (!ctx.disabled) ctx.openFileDialog();
+		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
+	}
+</script>
+
+<button
+	type="button"
+	disabled={ctx.disabled}
+	data-disabled={ctx.disabled || undefined}
+	onclick={handleClick}
+	{...rest}
+	class={className}
+>
+	{@render children()}
+</button>
+
+<style>
+	[data-fu-trigger] {
+		display: inline-grid;
+		place-items: center;
+		min-height: var(--dry-space-12);
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-2_5) var(--dry-space-4);
+		font-size: var(--dry-type-small-size);
+		font-family: var(--dry-font-sans);
+		font-weight: 500;
+		line-height: 1.25;
+		color: var(--dry-color-on-brand);
+		background: var(--dry-color-fill-brand);
+		border: 1px solid transparent;
+		border-radius: var(--dry-radius-md);
+		cursor: pointer;
+		white-space: nowrap;
+		user-select: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-fu-trigger]:hover:not([data-disabled]) {
+		background: var(--dry-color-fill-brand-hover);
+	}
+
+	[data-fu-trigger]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 2px;
+	}
+
+	[data-fu-trigger]:active:not([data-disabled]) {
+		transform: translateY(1px);
+	}
+
+	[data-fu-trigger][data-disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	[data-fu-trigger][data-size='sm'] {
+		padding: var(--dry-space-1_5) var(--dry-space-3);
+		font-size: var(--dry-type-tiny-size);
+		border-radius: var(--dry-radius-sm);
+	}
+
+	[data-fu-trigger][data-size='lg'] {
+		padding: var(--dry-space-3) var(--dry-space-6);
+		font-size: var(--dry-type-heading-4-size);
+		border-radius: var(--dry-radius-lg);
+	}
+</style>

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

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

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

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type {
+	FileUploadDropzoneProps as PrimitiveFileUploadDropzoneProps,
+	FileUploadTriggerProps as PrimitiveFileUploadTriggerProps,
+	FileUploadListProps as PrimitiveFileUploadListProps,
+	FileUploadItemProps as PrimitiveFileUploadItemProps,
+	FileUploadItemDeleteProps as PrimitiveFileUploadItemDeleteProps
+} from '@dryui/primitives';
+export type { FileUploadRootProps } from '@dryui/primitives';
+export interface FileUploadDropzoneProps extends PrimitiveFileUploadDropzoneProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+export interface FileUploadTriggerProps extends PrimitiveFileUploadTriggerProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+export interface FileUploadListProps extends PrimitiveFileUploadListProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+export interface FileUploadItemProps extends Omit<PrimitiveFileUploadItemProps, 'children'> {
+	size?: 'sm' | 'md' | 'lg';
+	children?: Snippet;
+}
+export interface FileUploadItemDeleteProps extends PrimitiveFileUploadItemDeleteProps {}
+import FileUploadRoot from './file-upload-root.svelte';
+import FileUploadDropzone from './file-upload-dropzone.svelte';
+import FileUploadTrigger from './file-upload-trigger.svelte';
+import FileUploadList from './file-upload-list.svelte';
+import FileUploadItem from './file-upload-item.svelte';
+import FileUploadItemDelete from './file-upload-item-delete.svelte';
+export declare const FileUpload: {
+	Root: typeof FileUploadRoot;
+	Dropzone: typeof FileUploadDropzone;
+	Trigger: typeof FileUploadTrigger;
+	List: typeof FileUploadList;
+	Item: typeof FileUploadItem;
+	ItemDelete: typeof FileUploadItemDelete;
+};

package/dist/file-upload/index.js

@@ -0,0 +1,14 @@
+import FileUploadRoot from './file-upload-root.svelte';
+import FileUploadDropzone from './file-upload-dropzone.svelte';
+import FileUploadTrigger from './file-upload-trigger.svelte';
+import FileUploadList from './file-upload-list.svelte';
+import FileUploadItem from './file-upload-item.svelte';
+import FileUploadItemDelete from './file-upload-item-delete.svelte';
+export const FileUpload = {
+    Root: FileUploadRoot,
+    Dropzone: FileUploadDropzone,
+    Trigger: FileUploadTrigger,
+    List: FileUploadList,
+    Item: FileUploadItem,
+    ItemDelete: FileUploadItemDelete
+};

package/dist/flip-card/flip-card-back.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getContext } from 'svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+	const ctx = getContext<{ flipped: boolean }>('flip-card');
+</script>
+
+<div
+	data-part="back"
+	data-flip-card-back
+	aria-live="polite"
+	aria-hidden={!ctx.flipped}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-flip-card-back] {
+		z-index: 1;
+	}
+</style>

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

package/dist/flip-card/flip-card-front.svelte

@@ -0,0 +1,20 @@
+<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-part="front" data-flip-card-front class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-flip-card-front] {
+		z-index: 2;
+	}
+</style>

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

package/dist/flip-card/flip-card-root.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setContext } from 'svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		trigger?: 'hover' | 'click';
+		direction?: 'horizontal' | 'vertical';
+		flipped?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		trigger = 'hover',
+		direction = 'horizontal',
+		flipped = $bindable(false),
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	function toggle() {
+		flipped = !flipped;
+	}
+
+	setContext('flip-card', {
+		get flipped() {
+			return flipped;
+		},
+		get direction() {
+			return direction;
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	data-flip-card
+	data-flipped={flipped ? '' : undefined}
+	data-trigger={trigger}
+	data-direction={direction}
+	role={trigger === 'click' ? 'button' : 'group'}
+	aria-roledescription="flip card"
+	tabindex={trigger === 'click' ? 0 : undefined}
+	onmouseenter={trigger === 'hover' ? () => (flipped = true) : undefined}
+	onmouseleave={trigger === 'hover' ? () => (flipped = false) : undefined}
+	onclick={trigger === 'click' ? toggle : undefined}
+	onkeydown={trigger === 'click'
+		? (e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					toggle();
+				}
+			}
+		: undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	[data-flip-card] {
+		--dry-flip-card-duration: 0.6s;
+		--dry-flip-card-perspective: 1000px;
+
+		perspective: var(--dry-flip-card-perspective);
+		position: relative;
+	}
+
+	[data-flip-card] > :where([data-part='front']),
+	[data-flip-card] > :where([data-part='back']) {
+		backface-visibility: hidden;
+		transition: transform var(--dry-flip-card-duration) ease;
+		position: absolute;
+		inset: 0;
+	}
+
+	[data-flip-card] > :where([data-part='front']) {
+		transform: rotateY(0deg);
+	}
+
+	[data-flip-card] > :where([data-part='back']) {
+		transform: rotateY(180deg);
+	}
+
+	[data-flip-card][data-direction='horizontal'][data-flipped] > :where([data-part='front']) {
+		transform: rotateY(180deg);
+	}
+
+	[data-flip-card][data-direction='horizontal'][data-flipped] > :where([data-part='back']) {
+		transform: rotateY(360deg);
+	}
+
+	[data-flip-card][data-direction='vertical'] > :where([data-part='front']) {
+		transform: rotateX(0deg);
+	}
+
+	[data-flip-card][data-direction='vertical'] > :where([data-part='back']) {
+		transform: rotateX(180deg);
+	}
+
+	[data-flip-card][data-direction='vertical'][data-flipped] > :where([data-part='front']) {
+		transform: rotateX(180deg);
+	}
+
+	[data-flip-card][data-direction='vertical'][data-flipped] > :where([data-part='back']) {
+		transform: rotateX(360deg);
+	}
+</style>

package/dist/flip-card/flip-card-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	trigger?: 'hover' | 'click';
+	direction?: 'horizontal' | 'vertical';
+	flipped?: boolean;
+	children: Snippet;
+}
+declare const FlipCardRoot: import('svelte').Component<Props, {}, ''>;
+type FlipCardRoot = ReturnType<typeof FlipCardRoot>;
+export default FlipCardRoot;

package/dist/flip-card/index.d.ts

@@ -0,0 +1,9 @@
+export type { FlipCardRootProps, FlipCardFrontProps, FlipCardBackProps } from '@dryui/primitives';
+import FlipCardRoot from './flip-card-root.svelte';
+import FlipCardFront from './flip-card-front.svelte';
+import FlipCardBack from './flip-card-back.svelte';
+export declare const FlipCard: {
+	Root: typeof FlipCardRoot;
+	Front: typeof FlipCardFront;
+	Back: typeof FlipCardBack;
+};

package/dist/flip-card/index.js

@@ -0,0 +1,8 @@
+import FlipCardRoot from './flip-card-root.svelte';
+import FlipCardFront from './flip-card-front.svelte';
+import FlipCardBack from './flip-card-back.svelte';
+export const FlipCard = {
+    Root: FlipCardRoot,
+    Front: FlipCardFront,
+    Back: FlipCardBack
+};

package/dist/float-button/context.svelte.d.ts

@@ -0,0 +1,6 @@
+interface FloatButtonContext {
+    readonly open: boolean;
+    toggle: () => void;
+}
+export declare const setFloatButtonCtx: (ctx: FloatButtonContext) => FloatButtonContext, getFloatButtonCtx: () => FloatButtonContext;
+export {};

package/dist/float-button/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setFloatButtonCtx, getFloatButtonCtx] = createContext('float-button');

package/dist/float-button/float-button-action.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getFloatButtonCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, class: className, ...rest }: Props = $props();
+
+	const ctx = getFloatButtonCtx();
+</script>
+
+<button
+	type="button"
+	data-state={ctx.open ? 'open' : 'closed'}
+	tabindex={ctx.open ? 0 : -1}
+	{...rest}
+	class={className}
+>
+	{@render children()}
+</button>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	[data-float-button-action-wrapper] {
+		display: contents;
+	}
+
+	[data-float-button-action-wrapper] :where(button) {
+		--dry-fab-action-bg: var(--dry-color-bg-overlay);
+		--dry-fab-action-color: var(--dry-color-text-strong);
+		--dry-fab-action-border: var(--dry-color-stroke-weak);
+		--dry-fab-action-shadow: var(--dry-shadow-md);
+		--dry-fab-action-size: 44px;
+
+		display: grid;
+		place-items: center;
+		height: var(--dry-fab-action-size);
+		aspect-ratio: 1;
+		padding: 0;
+		background: var(--dry-fab-action-bg);
+		color: var(--dry-fab-action-color);
+		border: 1px solid var(--dry-fab-action-border);
+		border-radius: 50%;
+		box-shadow: var(--dry-fab-action-shadow);
+		cursor: pointer;
+		opacity: 0;
+		transform: scale(0.6) translateY(var(--dry-motion-distance-xs));
+		pointer-events: none;
+		transition:
+			opacity var(--dry-duration-normal) var(--dry-ease-default),
+			transform var(--dry-duration-normal) var(--dry-ease-default);
+
+		&[data-state='open'] {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+			pointer-events: auto;
+		}
+
+		&[data-state='open']:nth-last-child(2) {
+			transition-delay: 0ms;
+		}
+		&[data-state='open']:nth-last-child(3) {
+			transition-delay: 30ms;
+		}
+		&[data-state='open']:nth-last-child(4) {
+			transition-delay: 60ms;
+		}
+		&[data-state='open']:nth-last-child(5) {
+			transition-delay: 90ms;
+		}
+		&[data-state='open']:nth-last-child(6) {
+			transition-delay: 120ms;
+		}
+
+		&:hover {
+			--dry-fab-action-bg: color-mix(
+				in srgb,
+				var(--dry-color-fill-brand) 8%,
+				var(--dry-color-bg-overlay)
+			);
+			--dry-fab-action-color: var(--dry-color-fill-brand);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: 2px;
+		}
+
+		&[data-state='open']:active {
+			transform: scale(0.9) translateY(0);
+		}
+	}
+</style>

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