@dryui/ui 0.0.1

package/dist/notification-center/notification-center-root.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { generateFormId } from '@dryui/primitives';
+	import { setNotificationCenterCtx, type NotificationItem } from './context.svelte.js';
+
+	interface Props {
+		items?: NotificationItem[];
+		open?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		items = $bindable<NotificationItem[]>([]),
+		open = $bindable(false),
+		children
+	}: Props = $props();
+
+	const triggerId = generateFormId('nc-trigger');
+	const panelId = generateFormId('nc-panel');
+
+	const unreadCount = $derived(items.filter((item) => !item.read).length);
+
+	setNotificationCenterCtx({
+		get items() {
+			return items;
+		},
+		get unreadCount() {
+			return unreadCount;
+		},
+		get open() {
+			return open;
+		},
+		get triggerId() {
+			return triggerId;
+		},
+		get panelId() {
+			return panelId;
+		},
+		triggerEl: null,
+		markAllRead() {
+			items = items.map((item) => ({ ...item, read: true }));
+		},
+		markRead(id: string) {
+			items = items.map((item) => (item.id === id ? { ...item, read: true } : item));
+		},
+		remove(id: string) {
+			items = items.filter((item) => item.id !== id);
+		},
+		toggle() {
+			open = !open;
+		},
+		show() {
+			open = true;
+		},
+		close() {
+			open = false;
+		}
+	});
+</script>
+
+<div data-notification-center-root>
+	{@render children()}
+</div>
+
+<!-- svelte-ignore css_unused_selector -->
+<style>
+	[data-notification-center-root] {
+		position: relative;
+		display: inline-grid;
+	}
+
+	[data-notification-center-panel] {
+		--dry-nc-panel-width: 24rem;
+		--dry-nc-item-padding: var(--dry-space-3, 0.75rem);
+		--dry-nc-unread-bg: var(--dry-color-fill-brand-weak);
+
+		/* Reset UA popover defaults */
+		inset: unset;
+		margin: 0;
+
+		display: grid;
+		grid-template-columns: var(--dry-nc-panel-width);
+		max-height: 28rem;
+		overflow-y: auto;
+		background: var(--dry-color-bg-raised, #ffffff);
+		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		border-radius: var(--dry-radius-lg, 0.5rem);
+		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+		padding: 0;
+
+		&:popover-open {
+			opacity: 1;
+			transform: scale(1);
+		}
+
+		@starting-style {
+			&:popover-open {
+				opacity: 0;
+				transform: scale(0.95);
+			}
+		}
+
+		transition:
+			opacity var(--dry-duration-fast, 150ms) var(--dry-ease-out, ease-out),
+			transform var(--dry-duration-fast, 150ms) var(--dry-ease-out, ease-out);
+	}
+
+	[data-notification-center-item] {
+		padding: var(--dry-nc-item-padding, 0.75rem);
+		border-bottom: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		transition: background var(--dry-duration-fast, 100ms) ease;
+	}
+
+	[data-notification-center-item]:last-child {
+		border-bottom: none;
+	}
+
+	[data-notification-center-item][data-state='unread'] {
+		background: var(--dry-nc-unread-bg, #eff6ff);
+	}
+
+	[data-notification-center-item][data-variant='warning'] {
+		border-left: 3px solid var(--dry-color-fill-warning);
+	}
+
+	[data-notification-center-item][data-variant='critical'] {
+		border-left: 3px solid var(--dry-color-fill-error);
+	}
+
+	[data-notification-center-item][data-variant='info'] {
+		border-left: 3px solid var(--dry-color-fill-brand);
+	}
+
+	[data-notification-center-group] [data-part='group-header'] {
+		padding: var(--dry-space-2, 0.5rem) var(--dry-nc-item-padding, 0.75rem);
+		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
+		font-weight: 600;
+		color: var(--dry-color-text-weak, #64748b);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		background: var(--dry-color-fill, #f8fafc);
+	}
+
+	[data-notification-center-trigger] {
+		position: relative;
+	}
+
+	[data-theme='dark'] [data-notification-center-panel] {
+		background: var(--dry-color-bg-raised, #1e1e2e);
+	}
+
+	[data-theme='dark'] [data-notification-center-item][data-state='unread'] {
+		background: rgba(59, 130, 246, 0.1);
+	}
+</style>

package/dist/notification-center/notification-center-root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { NotificationItem } from '@dryui/primitives';
+interface Props {
+	items?: NotificationItem[];
+	open?: boolean;
+	children: Snippet;
+}
+declare const NotificationCenterRoot: import('svelte').Component<Props, {}, 'open' | 'items'>;
+type NotificationCenterRoot = ReturnType<typeof NotificationCenterRoot>;
+export default NotificationCenterRoot;

package/dist/notification-center/notification-center-trigger.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getNotificationCenterCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		children: Snippet<[{ unreadCount: number }]>;
+	}
+
+	let { class: className, children, onclick, ...rest }: Props = $props();
+
+	const ctx = getNotificationCenterCtx();
+
+	let el = $state<HTMLButtonElement>();
+
+	$effect(() => {
+		if (el) {
+			ctx.triggerEl = el;
+		}
+	});
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		ctx.toggle();
+		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
+	}
+</script>
+
+<button
+	bind:this={el}
+	id={ctx.triggerId}
+	aria-expanded={ctx.open}
+	aria-haspopup="dialog"
+	data-notification-center-trigger
+	class={className}
+	onclick={handleClick}
+	{...rest}
+>
+	{@render children({ unreadCount: ctx.unreadCount })}
+</button>
+
+<style>
+	[data-notification-center-trigger] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-2) var(--dry-space-4);
+		border: 1px solid var(--dry-color-stroke-weak);
+		border-radius: var(--dry-radius-md);
+		background: var(--dry-color-bg-raised);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-shadow-sm);
+		font: inherit;
+	}
+
+	[data-notification-center-trigger]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 2px;
+	}
+</style>

package/dist/notification-center/notification-center-trigger.svelte.d.ts

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

package/dist/number-input/index.d.ts

@@ -0,0 +1,5 @@
+import type { NumberInputProps as PrimitiveNumberInputProps } from '@dryui/primitives';
+export interface NumberInputProps extends Omit<PrimitiveNumberInputProps, 'size'> {
+	size?: 'sm' | 'md' | 'lg';
+}
+export { default as NumberInput } from './number-input.svelte';

package/dist/number-input/index.js

@@ -0,0 +1 @@
+export { default as NumberInput } from './number-input.svelte';

package/dist/number-input/number-input.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size'> {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		size?: 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+	}
+
+	let {
+		value = $bindable(0),
+		min,
+		max,
+		step = 1,
+		size = 'md',
+		disabled = false,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	function decrement() {
+		const next = value - step;
+		if (min !== undefined && next < min) return;
+		value = next;
+	}
+
+	function increment() {
+		const next = value + step;
+		if (max !== undefined && next > max) return;
+		value = next;
+	}
+</script>
+
+<span data-number-input-wrapper data-size={size} data-disabled={disabled || undefined}>
+	<div role="group" data-disabled={disabled || undefined}>
+		<button type="button" tabindex="-1" aria-label="Decrease value" {disabled} onclick={decrement}
+			>&minus;</button
+		>
+		<input
+			type="number"
+			bind:value
+			class={className ?? ''}
+			{min}
+			{max}
+			{step}
+			{disabled}
+			data-disabled={disabled || undefined}
+			{...rest}
+		/>
+		<button type="button" tabindex="-1" aria-label="Increase value" {disabled} onclick={increment}
+			>+</button
+		>
+	</div>
+</span>
+
+<style>
+	[data-number-input-wrapper] {
+		container-type: inline-size;
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: stretch;
+		--dry-number-input-max-width: 12rem;
+		--dry-number-input-btn-width: 2em;
+
+		--dry-input-bg: var(--dry-color-bg-raised);
+		--dry-input-border: var(--dry-color-stroke-strong);
+		--dry-input-color: var(--dry-color-text-strong);
+		--dry-input-radius: var(--dry-radius-md);
+		--dry-input-padding-x: var(--dry-space-3);
+		--dry-input-padding-y: var(--dry-space-2);
+		--dry-input-font-size: var(--dry-type-small-size);
+		--dry-number-input-focus-z-index: 1;
+	}
+
+	[data-number-input-wrapper] div {
+		display: inline-grid;
+		grid-template-columns: var(--dry-number-input-btn-width) minmax(3ch, max-content) var(--dry-number-input-btn-width);
+		align-items: stretch;
+	}
+
+	[data-number-input-wrapper] button {
+		display: inline-grid;
+		place-items: center;
+		padding: 0;
+		font-size: var(--dry-input-font-size);
+		font-family: var(--dry-font-sans);
+		color: var(--dry-input-color);
+		background: var(--dry-input-bg);
+		border: 1px solid var(--dry-input-border);
+		cursor: pointer;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			background var(--dry-duration-fast) var(--dry-ease-default);
+		box-sizing: border-box;
+		line-height: 1;
+		user-select: none;
+	}
+
+	[data-number-input-wrapper] button:hover:not(:disabled) {
+		border-color: var(--dry-color-stroke-strong);
+		background: var(--dry-color-bg-raised);
+	}
+
+	[data-number-input-wrapper] button:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-focus-ring);
+		z-index: var(--dry-number-input-focus-z-index);
+	}
+
+	[data-number-input-wrapper] button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	[data-number-input-wrapper] button:first-child {
+		border-radius: var(--dry-input-radius) 0 0 var(--dry-input-radius);
+		border-right: none;
+	}
+
+	[data-number-input-wrapper] button:last-child {
+		border-radius: 0 var(--dry-input-radius) var(--dry-input-radius) 0;
+		border-left: none;
+	}
+
+	[data-number-input-wrapper] input {
+		padding: var(--dry-input-padding-y) var(--dry-input-padding-x);
+		font-size: var(--dry-input-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--dry-input-color);
+		background: var(--dry-input-bg);
+		border: 1px solid var(--dry-input-border);
+		border-radius: 0;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		box-sizing: border-box;
+		appearance: none;
+		text-align: center;
+		-moz-appearance: textfield;
+	}
+
+	[data-number-input-wrapper] input::-webkit-outer-spin-button,
+	[data-number-input-wrapper] input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	[data-number-input-wrapper] input::placeholder {
+		color: var(--dry-color-text-weak);
+	}
+
+	[data-number-input-wrapper] input:hover:not([data-disabled]) {
+		border-color: var(--dry-color-stroke-strong);
+	}
+
+	[data-number-input-wrapper] input:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-focus-ring);
+		z-index: var(--dry-number-input-focus-z-index);
+	}
+
+	[data-number-input-wrapper] input[data-disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	[data-number-input-wrapper][data-disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Size variants */
+	[data-number-input-wrapper][data-size='sm'] {
+		--dry-input-padding-x: var(--dry-space-2);
+		--dry-input-padding-y: var(--dry-space-1);
+		--dry-input-font-size: var(--dry-type-tiny-size);
+		--dry-number-input-max-width: 8rem;
+		--dry-number-input-btn-width: 1.75em;
+	}
+
+	[data-number-input-wrapper][data-size='sm'] input {
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-number-input-wrapper][data-size='md'] {
+		--dry-input-padding-x: var(--dry-space-3);
+		--dry-input-padding-y: var(--dry-space-2);
+		--dry-input-font-size: var(--dry-type-small-size);
+		--dry-number-input-max-width: 10rem;
+		--dry-number-input-btn-width: 2em;
+	}
+
+	[data-number-input-wrapper][data-size='md'] input {
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-number-input-wrapper][data-size='lg'] {
+		--dry-input-padding-x: var(--dry-space-4);
+		--dry-input-padding-y: var(--dry-space-2_5);
+		--dry-input-font-size: var(--dry-type-heading-4-size);
+		--dry-number-input-max-width: 12rem;
+		--dry-number-input-btn-width: 2.5em;
+	}
+
+	[data-number-input-wrapper][data-size='lg'] input {
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	/* Container query */
+	@container (max-width: 200px) {
+		[data-number-input-wrapper] {
+			--dry-input-padding-x: var(--dry-space-2);
+		}
+	}
+</style>

package/dist/number-input/number-input.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'size'> {
+	value?: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	size?: 'sm' | 'md' | 'lg';
+	disabled?: boolean;
+}
+declare const NumberInput: import('svelte').Component<Props, {}, 'value'>;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/option-swatch-group/context.svelte.d.ts

@@ -0,0 +1,9 @@
+interface SelectableTileGroupContext {
+    readonly value: string;
+    readonly disabled: boolean;
+    readonly orientation: 'horizontal' | 'vertical';
+    select: (value: string) => void;
+    isSelected: (value: string) => boolean;
+}
+export declare const setSelectableTileGroupCtx: (ctx: SelectableTileGroupContext) => SelectableTileGroupContext, getSelectableTileGroupCtx: () => SelectableTileGroupContext;
+export {};

package/dist/option-swatch-group/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setSelectableTileGroupCtx, getSelectableTileGroupCtx] = createContext('selectable-tile-group');

package/dist/option-swatch-group/index.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type { SelectableTileGroupRootProps as OptionSwatchGroupRootProps } from '@dryui/primitives';
+export type { SelectableTileGroupItemProps as OptionSwatchGroupItemProps } from '@dryui/primitives';
+export type { SelectableTileGroupLabelProps as OptionSwatchGroupLabelProps } from '@dryui/primitives';
+export type { SelectableTileGroupMetaProps as OptionSwatchGroupMetaProps } from '@dryui/primitives';
+export interface OptionSwatchGroupSwatchProps extends HTMLAttributes<HTMLSpanElement> {
+	color?: string;
+	shape?: 'circle' | 'rounded';
+	children?: Snippet;
+}
+import OptionSwatchGroupRoot from './option-swatch-group-root.svelte';
+import OptionSwatchGroupItem from './option-swatch-group-item.svelte';
+import OptionSwatchGroupSwatch from './option-swatch-group-swatch.svelte';
+import OptionSwatchGroupLabel from './option-swatch-group-label.svelte';
+import OptionSwatchGroupMeta from './option-swatch-group-meta.svelte';
+export declare const OptionSwatchGroup: {
+	Root: typeof OptionSwatchGroupRoot;
+	Item: typeof OptionSwatchGroupItem;
+	Swatch: typeof OptionSwatchGroupSwatch;
+	Label: typeof OptionSwatchGroupLabel;
+	Meta: typeof OptionSwatchGroupMeta;
+};

package/dist/option-swatch-group/index.js

@@ -0,0 +1,12 @@
+import OptionSwatchGroupRoot from './option-swatch-group-root.svelte';
+import OptionSwatchGroupItem from './option-swatch-group-item.svelte';
+import OptionSwatchGroupSwatch from './option-swatch-group-swatch.svelte';
+import OptionSwatchGroupLabel from './option-swatch-group-label.svelte';
+import OptionSwatchGroupMeta from './option-swatch-group-meta.svelte';
+export const OptionSwatchGroup = {
+    Root: OptionSwatchGroupRoot,
+    Item: OptionSwatchGroupItem,
+    Swatch: OptionSwatchGroupSwatch,
+    Label: OptionSwatchGroupLabel,
+    Meta: OptionSwatchGroupMeta
+};

package/dist/option-swatch-group/option-swatch-group-item.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getSelectableTileGroupCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
+		value: string;
+		disabled?: boolean;
+		unavailable?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		value,
+		disabled = false,
+		unavailable = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const ctx = getSelectableTileGroupCtx();
+	const isDisabled = $derived(disabled || unavailable || ctx.disabled);
+	const isSelected = $derived(ctx.isSelected(value));
+
+	function moveFocus(current: HTMLButtonElement, direction: -1 | 1) {
+		const group = current.closest('[role="radiogroup"]');
+		if (!(group instanceof HTMLElement)) return;
+
+		const items = Array.from(
+			group.querySelectorAll<HTMLButtonElement>('[role="radio"]:not([disabled])')
+		);
+		const index = items.indexOf(current);
+		if (index === -1) return;
+
+		const target = items[(index + direction + items.length) % items.length];
+		target?.focus();
+		const nextValue = target?.dataset.value;
+		if (nextValue) ctx.select(nextValue);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (isDisabled || !(event.currentTarget instanceof HTMLButtonElement)) return;
+
+		const isHorizontal = ctx.orientation === 'horizontal';
+		if (
+			(isHorizontal && event.key === 'ArrowRight') ||
+			(!isHorizontal && event.key === 'ArrowDown')
+		) {
+			event.preventDefault();
+			moveFocus(event.currentTarget, 1);
+		}
+		if ((isHorizontal && event.key === 'ArrowLeft') || (!isHorizontal && event.key === 'ArrowUp')) {
+			event.preventDefault();
+			moveFocus(event.currentTarget, -1);
+		}
+		if (event.key === ' ' || event.key === 'Enter') {
+			event.preventDefault();
+			ctx.select(value);
+		}
+	}
+</script>
+
+<button
+	type="button"
+	role="radio"
+	aria-checked={isSelected}
+	disabled={isDisabled}
+	data-option-swatch-group-item
+	data-state={isSelected ? 'checked' : 'unchecked'}
+	data-disabled={isDisabled || undefined}
+	data-unavailable={unavailable || undefined}
+	data-value={value}
+	tabindex={isSelected ? 0 : -1}
+	class={className}
+	onclick={() => {
+		if (!isDisabled) ctx.select(value);
+	}}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</button>

package/dist/option-swatch-group/option-swatch-group-item.svelte.d.ts

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

package/dist/option-swatch-group/option-swatch-group-label.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		children?: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<span data-part="label" data-option-swatch-group-label class={className} {...rest}
+	>{@render children?.()}</span
+>

package/dist/option-swatch-group/option-swatch-group-label.svelte.d.ts

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

package/dist/option-swatch-group/option-swatch-group-meta.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		children?: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<span data-part="meta" data-option-swatch-group-meta class={className} {...rest}
+	>{@render children?.()}</span
+>

package/dist/option-swatch-group/option-swatch-group-meta.svelte.d.ts

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