@dryui/ui 0.0.1

package/dist/index.js

@@ -0,0 +1,152 @@
+export { Button } from './button/index.js';
+export { Input } from './input/index.js';
+export { Card } from './card/index.js';
+export { Dialog } from './dialog/index.js';
+export { AlertDialog } from './alert-dialog/index.js';
+export { Drawer } from './drawer/index.js';
+export { Popover } from './popover/index.js';
+export { Tooltip } from './tooltip/index.js';
+export { DropdownMenu } from './dropdown-menu/index.js';
+export { ContextMenu } from './context-menu/index.js';
+export { Accordion } from './accordion/index.js';
+export { Collapsible } from './collapsible/index.js';
+export { CommandPalette } from './command-palette/index.js';
+// Phase 3 — Core Forms
+export { Label } from './label/index.js';
+export { Field } from './field/index.js';
+export { Fieldset } from './fieldset/index.js';
+export { Textarea } from './textarea/index.js';
+export { PromptInput } from './prompt-input/index.js';
+export { NumberInput } from './number-input/index.js';
+export { Checkbox } from './checkbox/index.js';
+export { RadioGroup } from './radio-group/index.js';
+export { Select } from './select/index.js';
+export { MultiSelectCombobox } from './multi-select-combobox/index.js';
+export { SegmentedControl } from './segmented-control/index.js';
+export { Slider } from './slider/index.js';
+export { Toggle } from './toggle/index.js';
+export { ToggleGroup } from './toggle-group/index.js';
+export { InputGroup } from './input-group/index.js';
+export { OptionSwatchGroup } from './option-swatch-group/index.js';
+// Phase 4 — Layout Primitives
+export { Container } from './container/index.js';
+export { Separator } from './separator/index.js';
+export { Spacer } from './spacer/index.js';
+export { AspectRatio } from './aspect-ratio/index.js';
+export { Tabs } from './tabs/index.js';
+export { Breadcrumb } from './breadcrumb/index.js';
+export { Pagination } from './pagination/index.js';
+export { Stepper } from './stepper/index.js';
+export { Toolbar } from './toolbar/index.js';
+export { Menubar } from './menubar/index.js';
+export { NavigationMenu } from './navigation-menu/index.js';
+export { Sidebar } from './sidebar/index.js';
+export { TableOfContents } from './table-of-contents/index.js';
+export { Link } from './link/index.js';
+export { ScrollArea } from './scroll-area/index.js';
+export { Splitter } from './splitter/index.js';
+// Phase 5 — Data Display + Feedback
+export { Table } from './table/index.js';
+export { Avatar } from './avatar/index.js';
+export { Badge } from './badge/index.js';
+export { Chart } from './chart/index.js';
+export { ChatThread } from './chat-thread/index.js';
+export { TypingIndicator } from './typing-indicator/index.js';
+export { Icon } from './icon/index.js';
+export { Image } from './image/index.js';
+export { Kbd } from './kbd/index.js';
+export { LinkPreview } from './link-preview/index.js';
+export { List } from './list/index.js';
+export { Timeline } from './timeline/index.js';
+export { Typography } from './typography/index.js';
+export { Heading } from './heading/index.js';
+export { Text } from './text/index.js';
+export { DescriptionList } from './description-list/index.js';
+export { Alert } from './alert/index.js';
+export { Toast, toastStore, createToastStore } from './toast/index.js';
+export { Progress } from './progress/index.js';
+export { Skeleton } from './skeleton/index.js';
+export { Spinner } from './spinner/index.js';
+// Phase 6 — Advanced Forms
+export { Combobox } from './combobox/index.js';
+export { DateField } from './date-field/index.js';
+export { DatePicker } from './date-picker/index.js';
+export { Calendar } from './calendar/index.js';
+export { DateRangePicker } from './date-range-picker/index.js';
+export { Listbox } from './listbox/index.js';
+export { PinInput } from './pin-input/index.js';
+export { RangeCalendar } from './range-calendar/index.js';
+export { Rating } from './rating/index.js';
+export { TimeInput } from './time-input/index.js';
+export { TagsInput } from './tags-input/index.js';
+export { FileUpload } from './file-upload/index.js';
+export { FileSelect } from './file-select/index.js';
+export { ColorPicker } from './color-picker/index.js';
+// Phase 9 — Advanced Components (Tier 3)
+export { Portal } from './portal/index.js';
+export { VisuallyHidden } from './visually-hidden/index.js';
+export { FocusTrap } from './focus-trap/index.js';
+export { Clipboard } from './clipboard/index.js';
+export { Hotkey, createHotkey } from './hotkey/index.js';
+export { ScrollToTop } from './scroll-to-top/index.js';
+export { Reveal } from './reveal/index.js';
+export { Spotlight } from './spotlight/index.js';
+export { Aurora } from './aurora/index.js';
+export { Noise } from './noise/index.js';
+export { FloatButton } from './float-button/index.js';
+export { Marquee } from './marquee/index.js';
+export { QRCode } from './qr-code/index.js';
+export { CodeBlock } from './code-block/index.js';
+export { MarkdownRenderer, parseMarkdownToAst } from './markdown-renderer/index.js';
+export { VirtualList } from './virtual-list/index.js';
+export { InfiniteScroll } from './infinite-scroll/index.js';
+export { DataGrid } from './data-grid/index.js';
+export { DragAndDrop } from './drag-and-drop/index.js';
+export { DropZone } from './drop-zone/index.js';
+export { Transfer } from './transfer/index.js';
+export { RichTextEditor } from './rich-text-editor/index.js';
+export { Tour } from './tour/index.js';
+// Audit — New Components
+export { Backdrop } from './backdrop/index.js';
+export { ButtonGroup } from './button-group/index.js';
+export { Chip } from './chip/index.js';
+export { ChipGroup } from './chip-group/index.js';
+export { Carousel } from './carousel/index.js';
+export { FormatBytes } from './format-bytes/index.js';
+export { FormatDate } from './format-date/index.js';
+export { FormatNumber } from './format-number/index.js';
+export { ImageComparison } from './image-comparison/index.js';
+export { HoverCard } from './hover-card/index.js';
+export { ProgressRing } from './progress-ring/index.js';
+export { RelativeTime } from './relative-time/index.js';
+export { Tree } from './tree/index.js';
+export { Gauge } from './gauge/index.js';
+export { Sparkline } from './sparkline/index.js';
+export { FlipCard } from './flip-card/index.js';
+export { VideoEmbed } from './video-embed/index.js';
+export { PhoneInput } from './phone-input/index.js';
+export { CountrySelect } from './country-select/index.js';
+export { DateTimeInput } from './date-time-input/index.js';
+export { NotificationCenter } from './notification-center/index.js';
+export { MegaMenu } from './mega-menu/index.js';
+export { Map } from './map/index.js';
+export { SystemMap } from './system-map/index.js';
+// Animation & Visual Effects
+export { ChromaticShift } from './chromatic-shift/index.js';
+export { ChromaticAberration } from './chromatic-aberration/index.js';
+export { Displacement } from './displacement/index.js';
+export { Glow } from './glow/index.js';
+export { Adjust } from './adjust/index.js';
+export { AlphaSlider } from './alpha-slider/index.js';
+export { Beam } from './beam/index.js';
+export { Glass } from './glass/index.js';
+export { GodRays } from './god-rays/index.js';
+export { GradientMesh } from './gradient-mesh/index.js';
+export { Halftone } from './halftone/index.js';
+export { MaskReveal } from './mask-reveal/index.js';
+export { ShaderCanvas, PRESETS as SHADER_PRESETS } from './shader-canvas/index.js';
+export { Svg } from './svg/index.js';
+export { Thumbnail } from './thumbnail/index.js';
+export { StarRating } from './star-rating/index.js';
+export { Tag } from './tag/index.js';
+export { useThemeOverride } from './themes/use-theme-override.svelte.js';

package/dist/infinite-scroll/index.d.ts

@@ -0,0 +1,2 @@
+export type { InfiniteScrollProps } from '@dryui/primitives';
+export { default as InfiniteScroll } from './infinite-scroll.svelte';

package/dist/infinite-scroll/index.js

@@ -0,0 +1 @@
+export { default as InfiniteScroll } from './infinite-scroll.svelte';

package/dist/infinite-scroll/infinite-scroll.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Spinner } from '../spinner/index.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		onLoadMore: () => void | Promise<void>;
+		hasMore?: boolean | undefined;
+		loading?: boolean | undefined;
+		rootMargin?: string | undefined;
+		children: Snippet;
+		loadingIndicator?: Snippet | undefined;
+		endMessage?: Snippet | undefined;
+	}
+
+	let {
+		onLoadMore,
+		hasMore = true,
+		loading = false,
+		rootMargin = '200px',
+		children: childSnippet,
+		loadingIndicator,
+		endMessage,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let sentinel: HTMLDivElement | undefined = $state(undefined);
+
+	$effect(() => {
+		if (!sentinel || !hasMore || loading) return;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting && hasMore && !loading) {
+					onLoadMore();
+				}
+			},
+			{ rootMargin }
+		);
+
+		observer.observe(sentinel);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+{#snippet defaultLoadingIndicator()}
+	<div data-is-indicator>
+		<Spinner size="sm" color="current" label="Loading more..." />
+	</div>
+{/snippet}
+
+{#snippet defaultEndMessage()}
+	<div data-is-end-message>No more items</div>
+{/snippet}
+
+<div class={className} data-infinite-scroll {...rest}>
+	{@render childSnippet()}
+	{#if hasMore}
+		<div bind:this={sentinel} aria-hidden="true" data-is-sentinel></div>
+		{#if loading}
+			{#if loadingIndicator}
+				{@render loadingIndicator()}
+			{:else}
+				{@render defaultLoadingIndicator()}
+			{/if}
+		{/if}
+	{:else if endMessage}
+		{@render endMessage()}
+	{:else}
+		{@render defaultEndMessage()}
+	{/if}
+</div>
+
+<style>
+	[data-infinite-scroll] {
+		/* Component tokens (Tier 3) */
+		--dry-infinite-scroll-indicator-padding: var(--dry-space-6);
+		--dry-infinite-scroll-indicator-color: var(--dry-color-text-weak, inherit);
+		--dry-infinite-scroll-end-padding: var(--dry-space-6);
+		--dry-infinite-scroll-end-color: var(--dry-color-text-weak, inherit);
+		--dry-infinite-scroll-end-font-size: var(
+			--dry-type-small-size,
+			var(--dry-text-sm-size),
+			0.875rem
+		);
+	}
+
+	[data-is-sentinel] {
+		height: 1px;
+	}
+
+	[data-is-indicator] {
+		display: grid;
+		place-items: center;
+		padding: var(--dry-infinite-scroll-indicator-padding);
+		color: var(--dry-infinite-scroll-indicator-color);
+	}
+
+	[data-is-end-message] {
+		display: grid;
+		place-items: center;
+		padding: var(--dry-infinite-scroll-end-padding);
+		color: var(--dry-infinite-scroll-end-color);
+		font-size: var(--dry-infinite-scroll-end-font-size);
+		font-family: var(--dry-font-sans, sans-serif);
+	}
+</style>

package/dist/infinite-scroll/infinite-scroll.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type InfiniteScrollProps as InfiniteScrollPrimitiveProps } from '@dryui/primitives/infinite-scroll';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	onLoadMore: InfiniteScrollPrimitiveProps['onLoadMore'];
+	hasMore?: InfiniteScrollPrimitiveProps['hasMore'];
+	loading?: InfiniteScrollPrimitiveProps['loading'];
+	rootMargin?: InfiniteScrollPrimitiveProps['rootMargin'];
+	children: InfiniteScrollPrimitiveProps['children'];
+	loadingIndicator?: InfiniteScrollPrimitiveProps['loadingIndicator'];
+	endMessage?: InfiniteScrollPrimitiveProps['endMessage'];
+}
+declare const InfiniteScroll: import('svelte').Component<Props, {}, ''>;
+type InfiniteScroll = ReturnType<typeof InfiniteScroll>;
+export default InfiniteScroll;

package/dist/input/index.d.ts

@@ -0,0 +1,6 @@
+import type { InputProps as PrimitiveInputProps } from '@dryui/primitives';
+export interface InputProps extends Omit<PrimitiveInputProps, 'size'> {
+	size?: 'sm' | 'md' | 'lg';
+	variant?: 'default' | 'ghost';
+}
+export { default as Input } from './input.svelte';

package/dist/input/index.js

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

package/dist/input/input.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getFormControlCtx } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size'> {
+		value?: string;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'ghost';
+		disabled?: boolean;
+	}
+
+	let {
+		value = $bindable(''),
+		size = 'md',
+		variant = 'default',
+		class: className,
+		disabled = false,
+		type,
+		...rest
+	}: Props = $props();
+
+	const ctx = getFormControlCtx();
+	const isDisabled = $derived(disabled || ctx?.disabled || false);
+</script>
+
+<span class="wrapper">
+	<input
+		{...type != null ? { type } : {}}
+		bind:value
+		id={ctx?.id}
+		disabled={isDisabled}
+		required={ctx?.required || undefined}
+		aria-describedby={ctx?.describedBy}
+		aria-invalid={ctx?.hasError || undefined}
+		aria-errormessage={ctx?.errorMessageId}
+		data-disabled={isDisabled || undefined}
+		data-size={size}
+		data-variant={variant !== 'default' ? variant : undefined}
+		class={className}
+		{...rest}
+	/>
+</span>
+
+<style>
+	.wrapper {
+		container-type: inline-size;
+		display: grid;
+	}
+
+	input {
+		padding: var(--dry-input-padding-y, var(--dry-space-2))
+			var(--dry-input-padding-x, var(--dry-space-3));
+		font-size: var(--dry-input-font-size, var(--dry-type-small-size));
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--dry-input-color, var(--dry-color-text-strong));
+		background: var(--dry-input-bg, var(--dry-control-bg, var(--dry-color-bg-raised)));
+		border: 1px solid
+			var(--dry-input-border, var(--dry-control-border, var(--dry-color-stroke-strong)));
+		border-radius: var(--dry-input-radius, var(--dry-control-radius, var(--dry-radius-md)));
+		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;
+
+		&::placeholder {
+			color: var(--dry-color-text-weak);
+		}
+
+		&:hover:not([data-disabled]) {
+			border-color: var(--dry-color-stroke-strong);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--dry-color-focus-ring);
+			outline-offset: -1px;
+			border-color: var(--dry-color-stroke-focus);
+			box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+		}
+
+		&[data-disabled] {
+			--dry-input-bg: var(--dry-color-bg-sunken);
+			--dry-input-border: var(--dry-color-stroke-disabled);
+			--dry-input-color: var(--dry-color-text-disabled);
+			cursor: not-allowed;
+		}
+
+		&[aria-invalid='true'],
+		&[data-invalid] {
+			--dry-input-bg: color-mix(
+				in srgb,
+				var(--dry-color-fill-error-weak) 70%,
+				var(--dry-color-bg-raised)
+			);
+			--dry-input-border: var(--dry-color-stroke-error);
+		}
+
+		&[aria-invalid='true']:hover:not([data-disabled]),
+		&[data-invalid]:hover:not([data-disabled]) {
+			border-color: var(--dry-color-stroke-error-strong);
+		}
+
+		&[aria-invalid='true']:focus-visible,
+		&[data-invalid]:focus-visible {
+			outline-color: var(--dry-color-fill-error);
+			border-color: var(--dry-color-stroke-error);
+		}
+	}
+
+	input[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);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	input[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);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	input[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);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	/* ── Ghost variant ─────────────────────────────────────────────────────── */
+
+	input[data-variant='ghost'] {
+		--dry-input-bg: transparent;
+		--dry-input-border: transparent;
+		background: transparent;
+		border-color: transparent;
+	}
+
+	input[data-variant='ghost']:hover:not(:disabled) {
+		border-color: transparent;
+	}
+
+	input[data-variant='ghost']:focus-visible {
+		border-color: transparent;
+		outline: none;
+		box-shadow: none;
+	}
+
+	/* ── File input styling ────────────────────────────────────────────────── */
+
+	input[type='file'] {
+		cursor: pointer;
+		padding-top: var(--dry-space-1_5);
+		padding-bottom: var(--dry-space-1_5);
+
+		&::file-selector-button {
+			font-family: var(--dry-font-sans);
+			font-size: var(--dry-type-tiny-size);
+			font-weight: 500;
+			color: var(--dry-color-text-strong);
+			background: var(--dry-color-fill-weak);
+			border: 1px solid var(--dry-color-stroke-weak);
+			border-radius: var(--dry-radius-full);
+			padding: var(--dry-space-1) var(--dry-space-3);
+			margin-right: var(--dry-space-3);
+			cursor: pointer;
+			transition: background var(--dry-duration-fast) var(--dry-ease-default);
+		}
+
+		&::file-selector-button:hover {
+			background: var(--dry-color-fill-hover);
+		}
+	}
+
+	/* Container query: collapse padding in very narrow containers */
+	@container (max-width: 200px) {
+		input {
+			--dry-input-padding-x: var(--dry-space-2);
+		}
+	}
+</style>

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

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

package/dist/input-group/context.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface AffixGroupContext {
+    readonly size: 'sm' | 'md' | 'lg';
+    readonly disabled: boolean;
+    readonly invalid: boolean;
+    readonly orientation: 'horizontal' | 'vertical';
+}
+export declare const setAffixGroupCtx: (ctx: AffixGroupContext) => AffixGroupContext, getAffixGroupCtx: () => AffixGroupContext;

package/dist/input-group/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setAffixGroupCtx, getAffixGroupCtx] = createContext('affix-group');

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

@@ -0,0 +1,32 @@
+export type {
+	AffixGroupRootProps as InputGroupRootProps,
+	AffixGroupPrefixProps as InputGroupPrefixProps,
+	AffixGroupSuffixProps as InputGroupSuffixProps,
+	AffixGroupSeparatorProps as InputGroupSeparatorProps,
+	AffixGroupActionProps as InputGroupActionProps
+} from '@dryui/primitives';
+import type { HTMLInputAttributes, HTMLSelectAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export interface InputGroupInputProps extends HTMLInputAttributes {
+	value?: string;
+}
+export interface InputGroupSelectProps extends HTMLSelectAttributes {
+	value?: string;
+	children?: Snippet;
+}
+import InputGroupRoot from './input-group-root.svelte';
+import InputGroupPrefix from './input-group-prefix.svelte';
+import InputGroupInput from './input-group-input.svelte';
+import InputGroupSuffix from './input-group-suffix.svelte';
+import InputGroupSeparator from './input-group-separator.svelte';
+import InputGroupAction from './input-group-action.svelte';
+import InputGroupSelect from './input-group-select.svelte';
+export declare const InputGroup: {
+	Root: typeof InputGroupRoot;
+	Prefix: typeof InputGroupPrefix;
+	Input: typeof InputGroupInput;
+	Suffix: typeof InputGroupSuffix;
+	Separator: typeof InputGroupSeparator;
+	Action: typeof InputGroupAction;
+	Select: typeof InputGroupSelect;
+};

package/dist/input-group/index.js

@@ -0,0 +1,16 @@
+import InputGroupRoot from './input-group-root.svelte';
+import InputGroupPrefix from './input-group-prefix.svelte';
+import InputGroupInput from './input-group-input.svelte';
+import InputGroupSuffix from './input-group-suffix.svelte';
+import InputGroupSeparator from './input-group-separator.svelte';
+import InputGroupAction from './input-group-action.svelte';
+import InputGroupSelect from './input-group-select.svelte';
+export const InputGroup = {
+    Root: InputGroupRoot,
+    Prefix: InputGroupPrefix,
+    Input: InputGroupInput,
+    Suffix: InputGroupSuffix,
+    Separator: InputGroupSeparator,
+    Action: InputGroupAction,
+    Select: InputGroupSelect
+};

package/dist/input-group/input-group-action.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getAffixGroupCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { disabled = false, children, type = 'button', class: className, ...rest }: Props = $props();
+
+	const ctx = getAffixGroupCtx();
+
+	let isDisabled = $derived(disabled || ctx.disabled);
+</script>
+
+<button
+	{type}
+	disabled={isDisabled}
+	data-part="action"
+	data-size={ctx.size}
+	data-disabled={isDisabled || undefined}
+	data-invalid={ctx.invalid || undefined}
+	{...rest}
+	data-input-group-action
+	class={className}
+>
+	{@render children?.()}
+</button>

package/dist/input-group/input-group-action.svelte.d.ts

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

package/dist/input-group/input-group-input.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getAffixGroupCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { children, class: className, ...rest }: Props = $props();
+
+	const ctx = getAffixGroupCtx();
+</script>
+
+<div
+	data-part="input"
+	data-size={ctx.size}
+	data-disabled={ctx.disabled || undefined}
+	data-invalid={ctx.invalid || undefined}
+	{...rest}
+	data-input-group-inputWrap
+	class={className}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,7 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+	value?: string;
+}
+declare const InputGroupInput: import('svelte').Component<Props, {}, 'value'>;
+type InputGroupInput = ReturnType<typeof InputGroupInput>;
+export default InputGroupInput;

package/dist/input-group/input-group-prefix.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getAffixGroupCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		children: Snippet;
+	}
+
+	let { children, class: className, ...rest }: Props = $props();
+
+	const ctx = getAffixGroupCtx();
+</script>
+
+<span
+	data-part="prefix"
+	data-size={ctx.size}
+	data-disabled={ctx.disabled || undefined}
+	data-invalid={ctx.invalid || undefined}
+	{...rest}
+	data-input-group-prefix
+	class={className}
+>
+	{@render children()}
+</span>

package/dist/input-group/input-group-prefix.svelte.d.ts

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