@dryui/ui 0.2.2 → 0.4.0

package/dist/thumbnail/visually-hidden.svelte

@@ -1,106 +0,0 @@
-<script lang="ts">
-	import { Svg } from '@dryui/primitives';
-	import { applySizeVars } from './apply-size.js';
-
-	interface Props {
-		size?: 'sm' | 'md' | 'lg' | number;
-		class?: string;
-	}
-
-	let { size = 'md', class: className }: Props = $props();
-</script>
-
-<span
-	data-thumbnail
-	data-size={typeof size === 'string' ? size : undefined}
-	class={className}
-	use:applySizeVars={size}
->
-	<Svg viewBox="0 0 120 80" aria-label="visually-hidden thumbnail" width="100%" height="100%">
-		<!-- Background surface -->
-		<rect x="0" y="0" width="120" height="80" fill="var(--dry-color-bg-raised)" />
-		<!-- Dashed outline rect (the hidden element) -->
-		<rect
-			x="18"
-			y="20"
-			width="84"
-			height="40"
-			rx="5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.07"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			stroke-dasharray="5,3"
-		/>
-		<!-- Content lines inside (faint, suggesting hidden text) -->
-		<rect
-			x="28"
-			y="32"
-			width="50"
-			height="3.5"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.25"
-		/>
-		<rect
-			x="28"
-			y="40"
-			width="36"
-			height="3.5"
-			rx="1.5"
-			fill="var(--dry-color-text-weak)"
-			opacity="0.2"
-		/>
-		<!-- Eye with slash (crossed-out eye icon) -->
-		<!-- Eye outline -->
-		<path
-			d="M52,40 Q60,30 68,40 Q60,50 52,40 Z"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			opacity="0.6"
-		/>
-		<!-- Pupil -->
-		<circle
-			cx="60"
-			cy="40"
-			r="3"
-			fill="none"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="1.5"
-			opacity="0.6"
-		/>
-		<!-- Slash line across the eye -->
-		<line
-			x1="50"
-			y1="50"
-			x2="70"
-			y2="30"
-			stroke="var(--dry-color-text-weak)"
-			stroke-width="2"
-			stroke-linecap="round"
-			opacity="0.7"
-		/>
-	</Svg>
-</span>
-
-<style>
-	[data-thumbnail] {
-		display: inline-grid;
-		width: var(--thumbnail-w, 80px);
-		height: var(--thumbnail-h, 53px);
-	}
-
-	[data-thumbnail][data-size='sm'] {
-		--thumbnail-w: 32px;
-		--thumbnail-h: 21px;
-	}
-	[data-thumbnail][data-size='md'] {
-		--thumbnail-w: 80px;
-		--thumbnail-h: 53px;
-	}
-	[data-thumbnail][data-size='lg'] {
-		--thumbnail-w: 160px;
-		--thumbnail-h: 107px;
-	}
-</style>

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

@@ -1,7 +0,0 @@
-interface Props {
-	size?: 'sm' | 'md' | 'lg' | number;
-	class?: string;
-}
-declare const VisuallyHidden: import('svelte').Component<Props, {}, ''>;
-type VisuallyHidden = ReturnType<typeof VisuallyHidden>;
-export default VisuallyHidden;

package/dist/thumbnail/wave-divider.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-	size?: 'sm' | 'md' | 'lg' | number;
-	class?: string;
-}
-declare const WaveDivider: import('svelte').Component<Props, {}, ''>;
-type WaveDivider = ReturnType<typeof WaveDivider>;
-export default WaveDivider;

package/dist/toast/toast-action.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLButtonElement> {
-		children: Snippet;
-		onclick?: () => void;
-	}
-
-	let { class: className, children, onclick, ...rest }: Props = $props();
-</script>
-
-<button type="button" data-part="action" class={className} {onclick} {...rest}>
-	{@render children()}
-</button>
-
-<style>
-	[data-part='action'] {
-		all: unset;
-		justify-self: start;
-		cursor: pointer;
-		font-size: var(--dry-type-small-size);
-		font-weight: 600;
-		color: var(--dry-toast-accent, var(--dry-color-fill-brand, #3b82f6));
-		padding: var(--dry-space-1) var(--dry-space-2);
-		border-radius: var(--dry-radius-sm, 0.25rem);
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
-		white-space: nowrap;
-
-		&:hover {
-			background: var(--dry-toast-action-hover-bg, var(--dry-color-fill));
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 2px;
-		}
-	}
-</style>

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

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLButtonElement> {
-	children: Snippet;
-	onclick?: () => void;
-}
-declare const ToastAction: import('svelte').Component<Props, {}, ''>;
-type ToastAction = ReturnType<typeof ToastAction>;
-export default ToastAction;

package/dist/toast/toast-close.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { toastStore } from '@dryui/primitives';
-	import { getToastCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getToastCtx();
-</script>
-
-<button
-	type="button"
-	aria-label="Close notification"
-	data-part="close"
-	class={className}
-	onclick={() => toastStore.remove(ctx.id)}
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-part='close'] {
-		position: absolute;
-		top: var(--dry-space-4);
-		right: var(--dry-space-4);
-		z-index: 1;
-		cursor: pointer;
-		background: none;
-		border: none;
-		box-sizing: border-box;
-		padding: var(--dry-space-2);
-		color: var(--dry-color-text-weak);
-		border-radius: var(--dry-radius-sm);
-		min-height: var(--dry-space-12);
-		aspect-ratio: 1;
-		display: inline-grid;
-		place-items: center;
-		transition:
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover {
-			background: var(--dry-toast-close-hover-bg, var(--dry-color-fill));
-			color: var(--dry-color-text-strong);
-		}
-
-		&:active {
-			transform: translateY(1px);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 2px;
-		}
-	}
-</style>

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;