@dryui/ui 0.2.2 → 0.4.0

package/dist/transfer/{transfer-actions.svelte → transfer-actions-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getTransferCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -37,42 +38,46 @@
 			canMoveToSource
 		})}
 	{:else}
-		<button
+		<Button
+			variant="outline"
+			size="icon-sm"
 			type="button"
 			disabled={!canMoveToTarget}
 			onclick={() => ctx.moveAllToTarget()}
 			aria-label="Move all to target"
-			data-transfer-move-all-target
 		>
 			&#8649;
-		</button>
-		<button
+		</Button>
+		<Button
+			variant="outline"
+			size="icon-sm"
 			type="button"
 			disabled={!canMoveToTarget}
 			onclick={() => ctx.moveToTarget()}
 			aria-label="Move selected to target"
-			data-transfer-move-target
 		>
 			&#8594;
-		</button>
-		<button
+		</Button>
+		<Button
+			variant="outline"
+			size="icon-sm"
 			type="button"
 			disabled={!canMoveToSource}
 			onclick={() => ctx.moveToSource()}
 			aria-label="Move selected to source"
-			data-transfer-move-source
 		>
 			&#8592;
-		</button>
-		<button
+		</Button>
+		<Button
+			variant="outline"
+			size="icon-sm"
 			type="button"
 			disabled={!canMoveToSource}
 			onclick={() => ctx.moveAllToSource()}
 			aria-label="Move all to source"
-			data-transfer-move-all-source
 		>
 			&#8647;
-		</button>
+		</Button>
 	{/if}
 </div>
 
@@ -83,39 +88,4 @@
 		gap: var(--dry-transfer-actions-gap, var(--dry-space-2));
 		padding: 0 var(--dry-space-1);
 	}
-
-	[data-part='actions'] button {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-8);
-		aspect-ratio: 1;
-		border: 1px solid var(--dry-transfer-border, var(--dry-color-stroke-weak));
-		border-radius: var(--dry-radius-md);
-		background: var(--dry-transfer-bg, var(--dry-color-bg-base));
-		color: var(--dry-color-text-strong);
-		font-size: var(--dry-type-small-size, var(--dry-text-base-size));
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-part='actions'] button:hover:not(:disabled) {
-		background: var(--dry-color-fill-brand-weak);
-		border-color: var(--dry-color-stroke-selected);
-		color: var(--dry-color-text-brand);
-	}
-
-	[data-part='actions'] button:focus-visible {
-		outline: 2px solid var(--dry-color-stroke-focus);
-		outline-offset: 2px;
-	}
-
-	[data-part='actions'] button:disabled {
-		background: var(--dry-color-fill-disabled);
-		border-color: var(--dry-color-stroke-disabled);
-		color: var(--dry-color-text-disabled);
-		cursor: not-allowed;
-	}
 </style>

package/dist/transfer/transfer-actions-button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: Snippet<[
+        {
+            moveToTarget: () => void;
+            moveToSource: () => void;
+            moveAllToTarget: () => void;
+            moveAllToSource: () => void;
+            canMoveToTarget: boolean;
+            canMoveToSource: boolean;
+        }
+    ]>;
+}
+declare const TransferActionsButton: import("svelte").Component<Props, {}, "">;
+type TransferActionsButton = ReturnType<typeof TransferActionsButton>;
+export default TransferActionsButton;

package/dist/transfer/transfer-item.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLLabelElement> {
-	key: string;
-	type: 'source' | 'target';
-	disabled?: boolean;
-	children: Snippet;
+    key: string;
+    type: 'source' | 'target';
+    disabled?: boolean;
+    children: Snippet;
 }
-declare const TransferItem: import('svelte').Component<Props, {}, ''>;
+declare const TransferItem: import("svelte").Component<Props, {}, "">;
 type TransferItem = ReturnType<typeof TransferItem>;
 export default TransferItem;

package/dist/transfer/transfer-list-input.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type TransferItem } from './context.svelte.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    type: 'source' | 'target';
+    title?: string;
+    filterable?: boolean;
+    content?: Snippet<[{
+        items: TransferItem[];
+    }]>;
+}
+declare const TransferListInput: import("svelte").Component<Props, {}, "">;
+type TransferListInput = ReturnType<typeof TransferListInput>;
+export default TransferListInput;

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

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type TransferItem } from '@dryui/primitives';
+import { type TransferItem } from './context.svelte.js';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	sourceItems: TransferItem[];
-	targetItems?: TransferItem[];
-	onChange?: (source: TransferItem[], target: TransferItem[]) => void;
-	children: Snippet;
+    sourceItems: TransferItem[];
+    targetItems?: TransferItem[];
+    onChange?: (source: TransferItem[], target: TransferItem[]) => void;
+    children: Snippet;
 }
-declare const TransferRoot: import('svelte').Component<Props, {}, 'sourceItems' | 'targetItems'>;
+declare const TransferRoot: import("svelte").Component<Props, {}, "sourceItems" | "targetItems">;
 type TransferRoot = ReturnType<typeof TransferRoot>;
 export default TransferRoot;

package/dist/tree/tree-item-children.svelte.d.ts

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

package/dist/tree/tree-item-label.svelte.d.ts

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

package/dist/tree/tree-item.svelte.d.ts

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

package/dist/tree/tree-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { SvelteSet } from 'svelte/reactivity';
 	import { setTreeCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -17,8 +18,11 @@
 		...rest
 	}: Props = $props();
 
-	// svelte-ignore state_referenced_locally
-	let expandedItems = $state(new Set<string>(defaultExpanded));
+	function createExpandedItems() {
+		return new SvelteSet<string>(defaultExpanded);
+	}
+
+	let expandedItems = createExpandedItems();
 
 	setTreeCtx({
 		get expandedItems() {
@@ -28,18 +32,14 @@
 			return selectedItem;
 		},
 		toggleItem(id) {
-			const newSet = new Set(expandedItems);
-			if (newSet.has(id)) newSet.delete(id);
-			else newSet.add(id);
-			expandedItems = newSet;
+			if (expandedItems.has(id)) expandedItems.delete(id);
+			else expandedItems.add(id);
 		},
 		expandItem(id) {
-			expandedItems = new Set([...expandedItems, id]);
+			expandedItems.add(id);
 		},
 		collapseItem(id) {
-			const s = new Set(expandedItems);
-			s.delete(id);
-			expandedItems = s;
+			expandedItems.delete(id);
 		},
 		selectItem(id) {
 			selectedItem = id;
@@ -101,9 +101,7 @@
 				if (itemId) {
 					const hasChildren = currentItem.querySelector('[role="group"]');
 					if (hasChildren && !expandedItems.has(itemId)) {
-						const newSet = new Set(expandedItems);
-						newSet.add(itemId);
-						expandedItems = newSet;
+						expandedItems.add(itemId);
 					} else if (hasChildren && expandedItems.has(itemId)) {
 						const firstChild = currentItem.querySelector('[role="group"] > [role="treeitem"]');
 						if (firstChild) {
@@ -117,9 +115,7 @@
 			case 'ArrowLeft': {
 				e.preventDefault();
 				if (itemId && expandedItems.has(itemId)) {
-					const s = new Set(expandedItems);
-					s.delete(itemId);
-					expandedItems = s;
+					expandedItems.delete(itemId);
 				} else {
 					const parentGroup = currentItem.parentElement?.closest('[role="treeitem"]');
 					if (parentGroup) {
@@ -159,7 +155,10 @@
 	[data-part='root'] {
 		--dry-tree-indent: var(--dry-space-4);
 		--dry-tree-item-padding: var(--dry-space-1) var(--dry-space-2);
-		--dry-tree-item-radius: var(--dry-radius-md);
+		--dry-tree-item-radius: min(
+			var(--dry-control-radius, var(--dry-radius-md)),
+			var(--dry-space-4)
+		);
 		--dry-tree-item-hover-bg: var(--dry-color-fill);
 		--dry-tree-item-selected-bg: var(--dry-color-fill-brand-weak);
 		--dry-tree-item-selected-color: var(--dry-color-text-brand);

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

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	defaultExpanded?: string[];
-	selectedItem?: string | null;
-	children: Snippet;
+    defaultExpanded?: string[];
+    selectedItem?: string | null;
+    children: Snippet;
 }
-declare const TreeRoot: import('svelte').Component<Props, {}, 'selectedItem'>;
+declare const TreeRoot: import("svelte").Component<Props, {}, "selectedItem">;
 type TreeRoot = ReturnType<typeof TreeRoot>;
 export default TreeRoot;

package/dist/typing-indicator/typing-indicator.svelte.d.ts

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

package/dist/typography/blockquote.svelte.d.ts

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

package/dist/typography/code.svelte.d.ts

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

package/dist/typography/heading.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLHeadingElement> {
-	level?: 1 | 2 | 3 | 4 | 5 | 6;
-	children: Snippet;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    variant?: 'default' | 'display';
+    children: Snippet;
 }
-declare const Heading: import('svelte').Component<Props, {}, ''>;
+declare const Heading: import("svelte").Component<Props, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

package/dist/typography/text.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	as?: 'p' | 'span' | 'div';
-	color?: 'default' | 'muted' | 'secondary';
-	variant?: 'default' | 'muted' | 'secondary';
-	size?: 'sm' | 'md' | 'lg';
-	children: Snippet;
+    as?: 'p' | 'span' | 'div';
+    color?: 'default' | 'muted' | 'secondary';
+    variant?: 'default' | 'muted' | 'secondary';
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
 }
-declare const Text: import('svelte').Component<Props, {}, ''>;
+declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/video-embed/index.d.ts

@@ -1,2 +1,2 @@
 export type { VideoEmbedProps } from '@dryui/primitives';
-export { default as VideoEmbed } from './video-embed.svelte';
+export { default as VideoEmbed } from './video-embed-button.svelte';

package/dist/video-embed/index.js

@@ -1 +1 @@
-export { default as VideoEmbed } from './video-embed.svelte';
+export { default as VideoEmbed } from './video-embed-button.svelte';

package/dist/video-embed/{video-embed.svelte → video-embed-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		src: string;
@@ -95,24 +96,26 @@
 			></iframe>
 		{/if}
 	{:else}
-		<button
-			type="button"
-			onclick={activate}
-			aria-label="Play video{title ? `: ${title}` : ''}"
-			data-part="play-button"
-		>
-			{#if poster}
-				<img data-part="poster" src={poster} alt="" />
-			{/if}
-			{#if playButton}
-				{@render playButton()}
-			{:else}
-				<svg data-part="play-icon" viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
-					<circle cx="24" cy="24" r="24" fill="rgba(0,0,0,0.6)" />
-					<polygon points="18,14 36,24 18,34" fill="white" />
-				</svg>
-			{/if}
-		</button>
+		{#if poster}
+			<img data-part="poster" src={poster} alt="" />
+		{/if}
+		<span class="play-btn-slot">
+			<Button
+				variant="bare"
+				type="button"
+				onclick={activate}
+				aria-label="Play video{title ? `: ${title}` : ''}"
+			>
+				{#if playButton}
+					{@render playButton()}
+				{:else}
+					<svg data-part="play-icon" viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
+						<circle cx="24" cy="24" r="24" fill="rgba(0,0,0,0.6)" />
+						<polygon points="18,14 36,24 18,34" fill="white" />
+					</svg>
+				{/if}
+			</Button>
+		</span>
 	{/if}
 	{#if children}
 		{@render children()}
@@ -138,17 +141,6 @@
 		border: 0;
 	}
 
-	[data-video-embed] [data-part='play-button'] {
-		display: grid;
-		place-items: center;
-		height: 100%;
-		border: 0;
-		cursor: pointer;
-		position: relative;
-		background: none;
-		padding: 0;
-	}
-
 	[data-video-embed] [data-part='poster'] {
 		height: 100%;
 		object-fit: cover;
@@ -156,20 +148,22 @@
 		inset: 0;
 	}
 
-	[data-video-embed] [data-part='play-button']:hover [data-part='play-icon'] circle {
-		fill: rgb(15 23 42 / 0.8);
+	.play-btn-slot {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		z-index: 1;
 	}
 
 	[data-video-embed] [data-part='play-icon'] {
-		position: relative;
-		z-index: 1;
 		height: var(--dry-video-embed-play-size);
 		aspect-ratio: 1;
 		filter: drop-shadow(0 2px 8px rgb(15 23 42 / 0.3));
 		transition: transform var(--dry-duration-normal, 200ms) ease;
 	}
 
-	[data-video-embed] [data-part='play-button']:hover [data-part='play-icon'] {
+	.play-btn-slot:hover [data-part='play-icon'] {
 		transform: scale(1.1);
 	}
 </style>

package/dist/video-embed/video-embed-button.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    src: string;
+    poster?: string;
+    title?: string;
+    provider?: 'youtube' | 'vimeo' | 'native';
+    autoplay?: boolean;
+    aspectRatio?: string;
+    playButton?: Snippet;
+    children?: Snippet;
+}
+declare const VideoEmbedButton: import("svelte").Component<Props, {}, "">;
+type VideoEmbedButton = ReturnType<typeof VideoEmbedButton>;
+export default VideoEmbedButton;

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

@@ -1,47 +1,34 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 declare function $$render<T>(): {
-	props: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-		items: T[];
-		itemHeight: number | ((index: number) => number);
-		overscan?: number | undefined;
-		children: Snippet<
-			[
-				{
-					item: T;
-					index: number;
-					style: string;
-				}
-			]
-		>;
-	};
-	exports: {};
-	bindings: '';
-	slots: {};
-	events: {};
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        items: T[];
+        itemHeight: number | ((index: number) => number);
+        overscan?: number | undefined;
+        children: Snippet<[{
+            item: T;
+            index: number;
+            style: string;
+        }]>;
+    };
+    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(): {};
+    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']>;
+    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 VirtualList: $$IsomorphicComponent;
 type VirtualList<T> = InstanceType<typeof VirtualList<T>>;

package/dist/visually-hidden/visually-hidden.svelte.d.ts

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