@dryui/ui 0.0.1

package/dist/breadcrumb/breadcrumb-root.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<nav aria-label="Breadcrumb" data-breadcrumb class={className} {...rest}>
+	{@render children()}
+</nav>

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

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

package/dist/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+		children?: Snippet | undefined;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<li role="presentation" aria-hidden="true" data-breadcrumb-separator class={className} {...rest}>
+	{#if children}
+		{@render children()}
+	{:else}
+		/
+	{/if}
+</li>
+
+<style>
+	[data-breadcrumb-separator] {
+		color: var(--dry-breadcrumb-separator-color, var(--dry-color-icon-weak, var(--dry-color-icon)));
+		user-select: none;
+	}
+</style>

package/dist/breadcrumb/breadcrumb-separator.svelte.d.ts

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

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,19 @@
+export type {
+	BreadcrumbRootProps,
+	BreadcrumbListProps,
+	BreadcrumbItemProps,
+	BreadcrumbLinkProps,
+	BreadcrumbSeparatorProps
+} from '@dryui/primitives';
+import BreadcrumbRoot from './breadcrumb-root.svelte';
+import BreadcrumbList from './breadcrumb-list.svelte';
+import BreadcrumbItem from './breadcrumb-item.svelte';
+import BreadcrumbLink from './breadcrumb-link.svelte';
+import BreadcrumbSeparator from './breadcrumb-separator.svelte';
+export declare const Breadcrumb: {
+	Root: typeof BreadcrumbRoot;
+	List: typeof BreadcrumbList;
+	Item: typeof BreadcrumbItem;
+	Link: typeof BreadcrumbLink;
+	Separator: typeof BreadcrumbSeparator;
+};

package/dist/breadcrumb/index.js

@@ -0,0 +1,12 @@
+import BreadcrumbRoot from './breadcrumb-root.svelte';
+import BreadcrumbList from './breadcrumb-list.svelte';
+import BreadcrumbItem from './breadcrumb-item.svelte';
+import BreadcrumbLink from './breadcrumb-link.svelte';
+import BreadcrumbSeparator from './breadcrumb-separator.svelte';
+export const Breadcrumb = {
+    Root: BreadcrumbRoot,
+    List: BreadcrumbList,
+    Item: BreadcrumbItem,
+    Link: BreadcrumbLink,
+    Separator: BreadcrumbSeparator
+};

package/dist/button/button.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare';
+		size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+		color?: 'primary' | 'danger';
+		disabled?: boolean;
+		href?: string;
+		rel?: string;
+		target?: string;
+		download?: boolean | string;
+		type?: 'button' | 'submit' | 'reset';
+		children: Snippet;
+	}
+
+	type AnchorRest = Omit<
+		HTMLAnchorAttributes,
+		'href' | 'rel' | 'target' | 'download' | 'onclick' | 'children'
+	>;
+
+	let {
+		variant = 'solid',
+		size = 'md',
+		color = 'primary',
+		disabled = false,
+		href,
+		rel,
+		target,
+		download,
+		type = 'button',
+		onclick,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	function handleLinkClick(event: MouseEvent) {
+		if (disabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+
+		(onclick as ((event: MouseEvent) => void) | undefined)?.(event);
+	}
+</script>
+
+<span class="wrapper">
+	{#if href !== undefined}
+		<a
+			{...rest as AnchorRest}
+			href={disabled ? undefined : href}
+			{rel}
+			{target}
+			{download}
+			aria-disabled={disabled || undefined}
+			data-disabled={disabled || undefined}
+			tabindex={disabled ? -1 : undefined}
+			data-variant={variant}
+			data-size={size}
+			data-color={color}
+			class={className}
+			onclick={handleLinkClick}
+		>
+			{@render children()}
+		</a>
+	{:else}
+		<button
+			{type}
+			{disabled}
+			data-disabled={disabled || undefined}
+			data-variant={variant}
+			data-size={size}
+			data-color={color}
+			class={className}
+			{onclick}
+			{...rest}
+		>
+			{@render children()}
+		</button>
+	{/if}
+</span>
+
+<style>
+	.wrapper {
+		display: inline-grid;
+	}
+
+	a,
+	button {
+		/* Component tokens (Tier 3) */
+		--dry-btn-accent: var(--dry-color-fill-brand);
+		--dry-btn-accent-fg: var(--dry-color-text-brand);
+		--dry-btn-accent-stroke: var(--dry-color-stroke-brand);
+		--dry-btn-accent-weak: var(--dry-color-fill-brand-weak);
+		--dry-btn-accent-hover: var(--dry-color-fill-brand-hover);
+		--dry-btn-accent-active: var(--dry-color-fill-brand-active);
+		--dry-btn-on-accent: var(--dry-color-on-brand);
+		--dry-btn-bg: var(--dry-btn-accent);
+		--dry-btn-color: var(--dry-btn-on-accent);
+		--dry-btn-border: transparent;
+		--dry-btn-radius: var(--dry-radius-md);
+		--dry-btn-padding-x: var(--dry-space-4);
+		--dry-btn-padding-y: var(--dry-space-2_5);
+		--dry-btn-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-btn-soft-bg: color-mix(in srgb, var(--dry-btn-accent) 12%, transparent);
+		--dry-btn-soft-hover-bg: color-mix(in srgb, var(--dry-btn-accent) 20%, transparent);
+		--dry-btn-soft-active-bg: color-mix(in srgb, var(--dry-btn-accent) 28%, transparent);
+		--dry-btn-ghost-underline: color-mix(in srgb, var(--dry-btn-accent) 65%, transparent);
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		place-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-btn-padding-y) var(--dry-btn-padding-x);
+		font-size: var(--dry-btn-font-size);
+		font-family: var(--dry-font-sans);
+		font-weight: 500;
+		line-height: 1.25;
+		color: var(--dry-btn-color);
+		background: var(--dry-btn-bg);
+		border: 1px solid var(--dry-btn-border);
+		border-radius: var(--dry-btn-radius);
+		cursor: pointer;
+		letter-spacing: -0.01em;
+		text-decoration: none;
+		white-space: nowrap;
+		user-select: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
+
+		&:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: 2px;
+			box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+		}
+
+		&:active:not([data-disabled]) {
+			transform: translateY(1px);
+		}
+
+		&[data-disabled] {
+			--dry-btn-bg: var(--dry-color-fill-disabled);
+			--dry-btn-color: var(--dry-color-text-disabled);
+			--dry-btn-border: var(--dry-color-stroke-disabled);
+			cursor: not-allowed;
+			box-shadow: none;
+		}
+	}
+
+	/* ── Variants ──────────────────────────────────────────────────────────────── */
+
+	:is(a, button)[data-variant='solid'] {
+		--dry-btn-bg: var(--dry-btn-accent);
+		--dry-btn-color: var(--dry-btn-on-accent);
+		--dry-btn-border: transparent;
+		box-shadow: var(--dry-shadow-raised);
+
+		&:hover:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent-hover);
+		}
+
+		&:active:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent-active);
+		}
+	}
+
+	:is(a, button)[data-variant='outline'] {
+		--dry-btn-bg: transparent;
+		--dry-btn-color: var(--dry-btn-accent-fg);
+		--dry-btn-border: var(--dry-btn-accent-stroke);
+		box-shadow: var(--dry-shadow-raised);
+
+		&:hover:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-color-bg-alternate);
+			--dry-btn-border: var(--dry-color-stroke-strong);
+			--dry-btn-color: var(--dry-color-text-strong);
+			box-shadow: var(--dry-shadow-sm);
+		}
+
+		&:active:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-color-fill);
+			--dry-btn-border: var(--dry-color-stroke-strong);
+			--dry-btn-color: var(--dry-color-text-strong);
+		}
+	}
+
+	:is(a, button)[data-variant='ghost'] {
+		--dry-btn-bg: transparent;
+		--dry-btn-color: var(--dry-btn-accent-fg);
+		--dry-btn-border: transparent;
+
+		text-decoration: underline;
+		text-decoration-color: color-mix(in srgb, var(--dry-btn-accent-stroke) 70%, transparent);
+		text-underline-offset: 2px;
+
+		&:hover:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent-weak);
+			--dry-btn-color: var(--dry-btn-accent-fg);
+			text-decoration-color: color-mix(in srgb, var(--dry-btn-accent-stroke) 70%, transparent);
+		}
+
+		&:active:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent);
+			--dry-btn-color: var(--dry-btn-on-accent);
+			text-decoration-color: transparent;
+		}
+	}
+
+	:is(a, button)[data-variant='soft'] {
+		--dry-btn-bg: var(--dry-btn-accent-weak);
+		--dry-btn-color: var(--dry-btn-accent-fg);
+		--dry-btn-border: transparent;
+
+		&:hover:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent-hover);
+			--dry-btn-color: var(--dry-btn-on-accent);
+			box-shadow: var(--dry-shadow-sm);
+		}
+
+		&:active:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent);
+			--dry-btn-color: var(--dry-btn-on-accent);
+		}
+	}
+
+	:is(a, button)[data-variant='secondary'] {
+		--dry-btn-bg: transparent;
+		--dry-btn-color: var(--dry-btn-accent-fg);
+		--dry-btn-border: var(--dry-btn-accent-stroke);
+
+		&:hover:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent-weak);
+			--dry-btn-border: var(--dry-btn-accent-stroke);
+			--dry-btn-color: var(--dry-btn-accent-fg);
+			box-shadow: var(--dry-shadow-sm);
+		}
+
+		&:active:not([data-disabled]) {
+			--dry-btn-bg: var(--dry-btn-accent);
+			--dry-btn-border: var(--dry-btn-accent-stroke);
+			--dry-btn-color: var(--dry-btn-on-accent);
+		}
+	}
+
+	:is(a, button)[data-variant='bare'] {
+		--dry-btn-bg: transparent;
+		--dry-btn-color: inherit;
+		--dry-btn-border: transparent;
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+
+		&:hover:not([data-disabled]) {
+			opacity: 0.7;
+		}
+
+		&:active:not([data-disabled]) {
+			opacity: 0.5;
+		}
+	}
+
+	:is(a, button)[data-variant='link'] {
+		--dry-btn-bg: transparent;
+		--dry-btn-color: var(--dry-btn-accent-fg);
+		--dry-btn-border: transparent;
+		text-decoration: underline;
+		text-decoration-color: color-mix(in srgb, var(--dry-btn-accent-stroke) 70%, transparent);
+		text-underline-offset: 0.18em;
+		padding-inline: 0;
+
+		&:hover:not([data-disabled]) {
+			--dry-btn-color: var(--dry-btn-accent-hover);
+			text-decoration-color: color-mix(in srgb, var(--dry-btn-accent-stroke) 70%, transparent);
+		}
+
+		&:active:not([data-disabled]) {
+			--dry-btn-color: var(--dry-btn-accent-active);
+			text-decoration-color: color-mix(in srgb, var(--dry-btn-accent-stroke) 90%, transparent);
+		}
+	}
+
+	:is(a, button)[data-color='primary'] {
+		--dry-btn-accent: var(--dry-color-fill-brand);
+		--dry-btn-accent-fg: var(--dry-color-text-brand);
+		--dry-btn-accent-stroke: var(--dry-color-stroke-brand);
+		--dry-btn-accent-weak: var(--dry-color-fill-brand-weak);
+		--dry-btn-accent-hover: var(--dry-color-fill-brand-hover);
+		--dry-btn-accent-active: var(--dry-color-fill-brand-active);
+	}
+
+	:is(a, button)[data-color='danger'] {
+		--dry-btn-accent: var(--dry-color-fill-error);
+		--dry-btn-accent-fg: var(--dry-color-text-error);
+		--dry-btn-accent-stroke: var(--dry-color-stroke-error);
+		--dry-btn-accent-weak: var(--dry-color-fill-error-weak);
+		--dry-btn-accent-hover: var(--dry-color-fill-error-hover);
+		--dry-btn-accent-active: var(--dry-color-fill-error-hover);
+		--dry-btn-on-accent: var(--dry-color-on-error);
+	}
+
+	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
+
+	:is(a, button)[data-size='sm'] {
+		--dry-btn-padding-x: var(--dry-space-3);
+		--dry-btn-padding-y: var(--dry-space-1_5);
+		--dry-btn-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--dry-btn-radius: var(--dry-radius-md);
+		min-height: var(--dry-space-8);
+	}
+
+	:is(a, button)[data-size='md'] {
+		--dry-btn-padding-x: var(--dry-space-4);
+		--dry-btn-padding-y: var(--dry-space-2_5);
+		--dry-btn-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-btn-radius: var(--dry-radius-md);
+		min-height: var(--dry-space-12);
+	}
+
+	:is(a, button)[data-size='lg'] {
+		--dry-btn-padding-x: var(--dry-space-6);
+		--dry-btn-padding-y: var(--dry-space-3);
+		--dry-btn-font-size: var(--dry-type-heading-4-size, var(--dry-text-base-size));
+		--dry-btn-radius: var(--dry-radius-xl);
+		min-height: var(--dry-space-14);
+	}
+
+	/* ── Icon-only sizes (square aspect ratio) ────────────────────────────── */
+
+	:is(a, button)[data-size='icon'] {
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+		aspect-ratio: 1;
+		height: var(--dry-space-12);
+		--dry-btn-radius: var(--dry-radius-md);
+	}
+
+	:is(a, button)[data-size='icon-sm'] {
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+		aspect-ratio: 1;
+		height: var(--dry-space-12);
+		--dry-btn-radius: var(--dry-radius-sm);
+		--dry-btn-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+	}
+
+	:is(a, button)[data-size='icon-lg'] {
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+		aspect-ratio: 1;
+		height: var(--dry-space-12);
+		--dry-btn-radius: var(--dry-radius-lg);
+		--dry-btn-font-size: var(--dry-type-heading-4-size, var(--dry-text-base-size));
+	}
+</style>

package/dist/button/button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+	variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare';
+	size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+	color?: 'primary' | 'danger';
+	disabled?: boolean;
+	href?: string;
+	rel?: string;
+	target?: string;
+	download?: boolean | string;
+	type?: 'button' | 'submit' | 'reset';
+	children: Snippet;
+}
+declare const Button: import('svelte').Component<Props, {}, ''>;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/button/index.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps as PrimitiveButtonProps } from '@dryui/primitives';
+export interface ButtonProps extends PrimitiveButtonProps {
+	variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare';
+	size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+	color?: 'primary' | 'danger';
+}
+export { default as Button } from './button.svelte';

package/dist/button/index.js

@@ -0,0 +1 @@
+export { default as Button } from './button.svelte';

package/dist/button-group/button-group.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		orientation?: 'horizontal' | 'vertical';
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	let {
+		orientation = 'horizontal',
+		size = 'md',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	role="group"
+	data-button-group
+	data-orientation={orientation}
+	data-size={size}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	[data-button-group] {
+		--dry-button-group-radius: var(--dry-radius-md);
+		--dry-button-group-hover-z-index: 1;
+
+		display: inline-grid;
+		gap: var(--dry-button-group-gap, 0px);
+	}
+
+	[data-button-group][data-orientation='horizontal'] {
+		grid-auto-flow: column;
+
+		& > :where(button, a, span),
+		& > :where(span) > :where(button, a) {
+			border-radius: 0;
+		}
+
+		& > :where(button, a):first-child,
+		& > :where(span):first-child > :where(button, a) {
+			border-top-left-radius: var(--dry-button-group-radius);
+			border-bottom-left-radius: var(--dry-button-group-radius);
+		}
+
+		& > :where(button, a):last-child,
+		& > :where(span):last-child > :where(button, a) {
+			border-top-right-radius: var(--dry-button-group-radius);
+			border-bottom-right-radius: var(--dry-button-group-radius);
+		}
+
+		& > :where(button, a):not(:first-child),
+		& > :where(span):not(:first-child) > :where(button, a) {
+			border-inline-start: 0;
+		}
+
+		& > :where(button, a):hover,
+		& > :where(button, a):focus-visible,
+		& > :where(span):has(:hover) > :where(button, a),
+		& > :where(span):has(:focus-visible) > :where(button, a) {
+			z-index: var(--dry-button-group-hover-z-index);
+			position: relative;
+		}
+	}
+
+	[data-button-group][data-orientation='vertical'] {
+		& > :where(button, a, span),
+		& > :where(span) > :where(button, a) {
+			border-radius: 0;
+		}
+
+		& > :where(button, a):first-child,
+		& > :where(span):first-child > :where(button, a) {
+			border-top-left-radius: var(--dry-button-group-radius);
+			border-top-right-radius: var(--dry-button-group-radius);
+		}
+
+		& > :where(button, a):last-child,
+		& > :where(span):last-child > :where(button, a) {
+			border-bottom-left-radius: var(--dry-button-group-radius);
+			border-bottom-right-radius: var(--dry-button-group-radius);
+		}
+
+		& > :where(button, a):not(:first-child),
+		& > :where(span):not(:first-child) > :where(button, a) {
+			border-block-start: 0;
+		}
+
+		& > :where(button, a):hover,
+		& > :where(button, a):focus-visible,
+		& > :where(span):has(:hover) > :where(button, a),
+		& > :where(span):has(:focus-visible) > :where(button, a) {
+			z-index: var(--dry-button-group-hover-z-index);
+			position: relative;
+		}
+	}
+
+	[data-button-group][data-size='sm'] {
+		--dry-button-group-radius: var(--dry-radius-sm);
+	}
+
+	[data-button-group][data-size='md'] {
+		--dry-button-group-radius: var(--dry-radius-md);
+	}
+
+	[data-button-group][data-size='lg'] {
+		--dry-button-group-radius: var(--dry-radius-lg);
+	}
+</style>

package/dist/button-group/button-group.svelte.d.ts

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

package/dist/button-group/index.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonGroupProps as PrimitiveButtonGroupProps } from '@dryui/primitives';
+export interface ButtonGroupProps extends PrimitiveButtonGroupProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+export { default as ButtonGroup } from './button-group.svelte';

package/dist/button-group/index.js

@@ -0,0 +1 @@
+export { default as ButtonGroup } from './button-group.svelte';