@dryui/ui 0.3.0 → 0.4.0

package/dist/toast/toast-close.svelte.d.ts

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

package/dist/toggle/toggle.svelte

@@ -1,269 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ClassValue } from 'svelte/elements';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getFormControlCtx } from '@dryui/primitives';
-
-	interface Props extends HTMLButtonAttributes {
-		pressed?: boolean;
-		size?: 'sm' | 'md' | 'lg';
-		disabled?: boolean;
-		children?: Snippet;
-		icon?: Snippet;
-		class?: ClassValue;
-	}
-
-	type ToggleClickEvent = Parameters<NonNullable<HTMLButtonAttributes['onclick']>>[0];
-
-	let {
-		pressed = $bindable(false),
-		size = 'md',
-		disabled,
-		class: className,
-		children,
-		icon,
-		onclick,
-		...rest
-	}: Props = $props();
-
-	const ctx = getFormControlCtx();
-	const isDisabled = $derived(disabled || ctx?.disabled || false);
-
-	function handleClick(event: ToggleClickEvent) {
-		onclick?.(event);
-
-		if (event.defaultPrevented || isDisabled) {
-			return;
-		}
-
-		pressed = !pressed;
-	}
-</script>
-
-<span class={['root', className]} data-size={size}>
-	<button
-		type="button"
-		role="switch"
-		aria-checked={pressed}
-		id={ctx?.id}
-		disabled={isDisabled}
-		aria-describedby={ctx?.describedBy}
-		aria-invalid={ctx?.hasError || undefined}
-		aria-errormessage={ctx?.errorMessageId}
-		data-state={pressed ? 'on' : 'off'}
-		data-disabled={isDisabled || undefined}
-		onclick={handleClick}
-		{...rest}
-	>
-		<span class="thumb">
-			<svg viewBox="0 0 32 32" aria-hidden="true">
-				<circle
-					cx="16"
-					cy="16"
-					r="15"
-					fill="var(--dry-toggle-thumb-bg)"
-					stroke="var(--_thumb-stroke)"
-					stroke-width="2"
-				/>
-			</svg>
-			{#if icon}
-				<span class="thumb-icon">
-					{@render icon()}
-				</span>
-			{/if}
-		</span>
-	</button>
-	{#if children}
-		<span class="label" data-disabled={(isDisabled && !pressed) || undefined}>
-			{@render children()}
-		</span>
-	{/if}
-</span>
-
-<style>
-	/* ── Root ──────────────────────────────────────────────────────────────────── */
-
-	.root {
-		display: inline-grid;
-		grid-template-columns: var(--_track-w) max-content;
-		align-items: center;
-		gap: var(--_gap);
-		padding-inline-end: var(--_gap);
-	}
-
-	/* ── Track (the <button> element) ─────────────────────────────────────────── */
-
-	button {
-		position: relative;
-		display: grid;
-		align-items: center;
-		height: var(--_track-h);
-		border: none;
-		border-radius: var(--_track-w);
-		padding: 0;
-		background: var(--dry-toggle-track-bg, var(--dry-control-bg, var(--dry-color-fill-weak)));
-		box-shadow:
-			inset 0 0 0 1px
-				var(--dry-toggle-track-stroke, var(--dry-control-border, var(--dry-color-stroke-strong))),
-			var(--dry-shadow-sunken);
-		cursor: pointer;
-		overflow: hidden;
-		appearance: none;
-		-webkit-appearance: none;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	button::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	button:hover:not([data-disabled])::before {
-		background: var(--dry-toggle-hover-bg, var(--dry-color-fill-hover));
-	}
-
-	button:active:not([data-disabled])::before {
-		background: var(--dry-toggle-press-bg, var(--dry-color-fill-active));
-	}
-
-	button:focus-visible {
-		outline: 2px solid var(--dry-toggle-focus-ring, var(--dry-color-stroke-focus));
-		outline-offset: 2px;
-	}
-
-	button[data-state='on']:focus-visible::before {
-		background: var(--dry-toggle-press-bg, var(--dry-color-fill-active));
-	}
-
-	/* ── Selected (on) ────────────────────────────────────────────────────────── */
-
-	button[data-state='on'] {
-		background: var(--dry-toggle-selected-bg, var(--dry-color-fill-selected));
-		box-shadow: none;
-	}
-
-	/* ── Disabled ─────────────────────────────────────────────────────────────── */
-
-	button[data-disabled] {
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	/* Disabled + unselected: swap border to stroke-disabled, keep sunken shadow */
-	button[data-disabled]:not([data-state='on']) {
-		box-shadow:
-			inset 0 0 0 1px var(--dry-toggle-disabled-stroke, var(--dry-color-stroke-disabled)),
-			var(--dry-shadow-sunken);
-	}
-
-	/* Disabled + selected: muted fill instead of brand */
-	button[data-disabled][data-state='on'] {
-		background: var(--dry-toggle-disabled-fill, var(--dry-color-fill-disabled));
-		box-shadow: none;
-	}
-
-	/* ── Thumb ─────────────────────────────────────────────────────────────────── */
-
-	.thumb {
-		--_thumb-stroke: var(--dry-toggle-track-stroke, var(--dry-color-stroke-strong));
-
-		position: absolute;
-		left: var(--_thumb-offset, 0px);
-		top: var(--_thumb-offset, 0px);
-		height: var(--_thumb-size);
-		aspect-ratio: 1;
-		border-radius: 50%;
-		box-shadow: var(--dry-shadow-raised);
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
-		pointer-events: none;
-		z-index: 1;
-	}
-
-	button[data-state='on'] .thumb {
-		--_thumb-stroke: var(--dry-toggle-selected-stroke, var(--dry-color-stroke-selected));
-		transform: translateX(var(--_thumb-travel));
-	}
-
-	button[data-disabled] .thumb {
-		--_thumb-stroke: var(--dry-toggle-disabled-stroke, var(--dry-color-stroke-disabled));
-	}
-
-	.thumb > svg {
-		display: block;
-		height: 100%;
-	}
-
-	/* ── Thumb Icon ───────────────────────────────────────────────────────────── */
-
-	.thumb-icon {
-		position: absolute;
-		inset: 0;
-		display: grid;
-		place-items: center;
-		pointer-events: none;
-		color: var(--dry-color-icon);
-		transition: color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	button[data-state='on'] .thumb-icon {
-		color: var(--dry-color-text-brand);
-	}
-
-	button[data-disabled] .thumb-icon {
-		color: var(--dry-color-text-disabled);
-	}
-
-	/* ── Label ─────────────────────────────────────────────────────────────────── */
-
-	.label {
-		font-family: var(--dry-font-sans);
-		font-weight: 400;
-		font-size: var(--_label-size);
-		line-height: var(--_label-leading);
-		color: var(--dry-toggle-label-color, var(--dry-color-text-strong));
-		white-space: nowrap;
-	}
-
-	.label[data-disabled] {
-		color: var(--dry-toggle-label-disabled-color, var(--dry-color-text-disabled));
-	}
-
-	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
-
-	.root[data-size='sm'] {
-		--_track-w: 48px;
-		--_track-h: 24px;
-		--_thumb-size: 24px;
-		--_thumb-travel: 24px;
-		--_gap: var(--dry-space-2);
-		--_label-size: var(--dry-type-tiny-size);
-		--_label-leading: var(--dry-type-tiny-leading);
-	}
-
-	.root[data-size='md'] {
-		--_track-w: 64px;
-		--_track-h: 32px;
-		--_thumb-size: 32px;
-		--_thumb-travel: 32px;
-		--_gap: var(--dry-space-3);
-		--_label-size: var(--dry-type-small-size);
-		--_label-leading: var(--dry-type-small-leading);
-	}
-
-	.root[data-size='lg'] {
-		--_track-w: 76px;
-		--_track-h: 38px;
-		--_thumb-size: 36px;
-		--_thumb-offset: 1px;
-		--_thumb-travel: calc(76px - 36px - 2px);
-		--_gap: var(--dry-space-4);
-		--_label-size: var(--dry-type-small-size);
-		--_label-leading: var(--dry-type-small-leading);
-	}
-</style>

package/dist/toggle/toggle.svelte.d.ts

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

package/dist/toggle-group/toggle-group-item.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getToggleGroupCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		value: string;
-		disabled?: boolean;
-		children: Snippet;
-	}
-
-	let { value, disabled = false, class: className, children, ...rest }: Props = $props();
-
-	const ctx = getToggleGroupCtx();
-
-	let isDisabled = $derived(disabled || ctx.disabled);
-	let isSelected = $derived(ctx.isSelected(value));
-</script>
-
-<button
-	type="button"
-	aria-pressed={isSelected}
-	disabled={isDisabled}
-	data-part="item"
-	data-state={isSelected ? 'on' : 'off'}
-	data-orientation={ctx.orientation}
-	data-disabled={isDisabled || undefined}
-	class={className}
-	onclick={() => {
-		if (!isDisabled) {
-			ctx.toggle(value);
-		}
-	}}
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-part='item'] {
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		place-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-tg-padding-y, var(--dry-space-2)) var(--dry-tg-padding-x, var(--dry-space-3));
-		font-size: var(--dry-tg-font-size, var(--dry-type-small-size, var(--dry-text-sm-size)));
-		font-family: var(--dry-font-sans);
-		font-weight: 500;
-		line-height: 1.25;
-		color: var(--dry-color-text-strong);
-		background: transparent;
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: 0;
-		cursor: pointer;
-		user-select: none;
-		position: relative;
-		min-height: var(--dry-tg-min-height, var(--dry-space-10));
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([data-disabled]):not([data-state='on']) {
-			background: var(--dry-color-fill-hover);
-		}
-
-		&:active:not([data-disabled]):not([data-state='on']) {
-			background: var(--dry-color-fill-active);
-		}
-
-		&[data-state='on'] {
-			background: var(--dry-tg-item-selected-bg, var(--dry-color-fill-selected));
-			color: var(--dry-tg-item-selected-color, var(--dry-color-on-brand));
-			border-color: var(--dry-tg-item-selected-border, var(--dry-color-stroke-selected));
-			box-shadow: inset 0 0 0 1px
-				var(--dry-tg-item-selected-border, var(--dry-color-stroke-selected));
-			font-weight: 600;
-			z-index: 1;
-		}
-
-		&[data-state='on']:hover:not([data-disabled]) {
-			background: var(--dry-tg-item-selected-bg, var(--dry-color-fill-selected));
-		}
-
-		&[data-state='on']:active:not([data-disabled]) {
-			background: var(--dry-tg-item-selected-bg, var(--dry-color-fill-selected));
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-stroke-focus);
-			outline-offset: -2px;
-			z-index: 2;
-		}
-
-		&[data-disabled] {
-			background: var(--dry-color-fill-disabled);
-			border-color: var(--dry-color-stroke-disabled);
-			color: var(--dry-color-text-disabled);
-			opacity: 1;
-			cursor: not-allowed;
-			pointer-events: none;
-		}
-	}
-
-	[data-orientation='horizontal']:first-child {
-		border-top-left-radius: var(--dry-tg-radius, var(--dry-radius-md));
-		border-bottom-left-radius: var(--dry-tg-radius, var(--dry-radius-md));
-	}
-
-	[data-orientation='horizontal']:last-child {
-		border-top-right-radius: var(--dry-tg-radius, var(--dry-radius-md));
-		border-bottom-right-radius: var(--dry-tg-radius, var(--dry-radius-md));
-	}
-
-	[data-orientation='horizontal']:not(:first-child) {
-		border-inline-start: 0;
-	}
-
-	[data-orientation='vertical']:first-child {
-		border-top-left-radius: var(--dry-tg-radius, var(--dry-radius-md));
-		border-top-right-radius: var(--dry-tg-radius, var(--dry-radius-md));
-	}
-
-	[data-orientation='vertical']:last-child {
-		border-bottom-left-radius: var(--dry-tg-radius, var(--dry-radius-md));
-		border-bottom-right-radius: var(--dry-tg-radius, var(--dry-radius-md));
-	}
-
-	[data-orientation='vertical']:not(:first-child) {
-		border-block-start: 0;
-	}
-</style>

package/dist/toggle-group/toggle-group-item.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	value: string;
-	disabled?: boolean;
-	children: Snippet;
-}
-declare const ToggleGroupItem: import('svelte').Component<Props, {}, ''>;
-type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
-export default ToggleGroupItem;

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

@@ -1,17 +0,0 @@
-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 TourTooltip: import('svelte').Component<Props, {}, ''>;
-type TourTooltip = ReturnType<typeof TourTooltip>;
-export default TourTooltip;

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

@@ -1,19 +0,0 @@
-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 TransferActions: import('svelte').Component<Props, {}, ''>;
-type TransferActions = ReturnType<typeof TransferActions>;
-export default TransferActions;

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

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

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

@@ -1,15 +0,0 @@
-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 VideoEmbed: import('svelte').Component<Props, {}, ''>;
-type VideoEmbed = ReturnType<typeof VideoEmbed>;
-export default VideoEmbed;