@dryui/ui 0.3.0 → 0.4.1

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

@@ -1,13 +1,14 @@
+import './tour-root.css';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type TourStep } from '@dryui/primitives/tour';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	steps: TourStep[];
-	active?: boolean;
-	onComplete?: () => void;
-	onSkip?: () => void;
-	children: Snippet;
+    steps: TourStep[];
+    active?: boolean;
+    onComplete?: () => void;
+    onSkip?: () => void;
+    children: Snippet;
 }
-declare const TourRoot: import('svelte').Component<Props, {}, 'active'>;
+declare const TourRoot: import("svelte").Component<Props, {}, "active">;
 type TourRoot = ReturnType<typeof TourRoot>;
 export default TourRoot;

package/dist/tour/{tour-tooltip.svelte → tour-tooltip-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 { Tour as TourPrimitive, type TourStep } from '@dryui/primitives/tour';
 
 	interface TooltipSnippetParams {
@@ -29,13 +30,16 @@
 			<div data-part="tooltipFooter">
 				<span data-part="tooltipCounter">{ctx.currentStep + 1} of {ctx.totalSteps}</span>
 				<div data-part="tooltipActions">
-					<button type="button" data-part="skipButton" onclick={() => ctx.skip()}>Skip</button>
+					<Button variant="ghost" size="sm" data-part="skipButton" onclick={() => ctx.skip()}
+						>Skip</Button
+					>
 					{#if ctx.currentStep > 0}
-						<button type="button" data-part="prevButton" onclick={() => ctx.prev()}>Previous</button
+						<Button variant="outline" size="sm" data-part="prevButton" onclick={() => ctx.prev()}
+							>Previous</Button
 						>
 					{/if}
-					<button type="button" data-part="nextButton" onclick={() => ctx.next()}
-						>{ctx.currentStep === ctx.totalSteps - 1 ? 'Finish' : 'Next'}</button
+					<Button variant="solid" size="sm" data-part="nextButton" onclick={() => ctx.next()}
+						>{ctx.currentStep === ctx.totalSteps - 1 ? 'Finish' : 'Next'}</Button
 					>
 				</div>
 			</div>

package/dist/tour/tour-tooltip-button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type TourStep } from '@dryui/primitives/tour';
+interface TooltipSnippetParams {
+    step: TourStep;
+    currentStep: number;
+    totalSteps: number;
+    next: () => void;
+    prev: () => void;
+    skip: () => void;
+}
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: Snippet<[TooltipSnippetParams]>;
+}
+declare const TourTooltipButton: import("svelte").Component<Props, {}, "">;
+type TourTooltipButton = ReturnType<typeof TourTooltipButton>;
+export default TourTooltipButton;

package/dist/transfer/index.d.ts

@@ -8,9 +8,9 @@ export interface TransferListProps extends PrimitiveTransferListProps {
     }]>;
 }
 import TransferRoot from './transfer-root.svelte';
-import TransferList from './transfer-list.svelte';
+import TransferList from './transfer-list-input.svelte';
 import TransferItem from './transfer-item.svelte';
-import TransferActions from './transfer-actions.svelte';
+import TransferActions from './transfer-actions-button.svelte';
 export declare const Transfer: {
     Root: typeof TransferRoot;
     List: typeof TransferList;

package/dist/transfer/index.js

@@ -1,7 +1,7 @@
 import TransferRoot from './transfer-root.svelte';
-import TransferList from './transfer-list.svelte';
+import TransferList from './transfer-list-input.svelte';
 import TransferItem from './transfer-item.svelte';
-import TransferActions from './transfer-actions.svelte';
+import TransferActions from './transfer-actions-button.svelte';
 export const Transfer = {
     Root: TransferRoot,
     List: TransferList,

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;