@poodle64/ui 2026.8.7

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn(
+		'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const DropdownMenuShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type DropdownMenuShortcut = ReturnType<typeof DropdownMenuShortcut>;
+export default DropdownMenuShortcut;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn(
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+declare const DropdownMenuSubContent: import("svelte").Component<DropdownMenuPrimitive.SubContentProps, {}, "ref">;
+type DropdownMenuSubContent = ReturnType<typeof DropdownMenuSubContent>;
+export default DropdownMenuSubContent;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+type $$ComponentProps = DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+};
+declare const DropdownMenuSubTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuSubTrigger = ReturnType<typeof DropdownMenuSubTrigger>;
+export default DropdownMenuSubTrigger;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />

package/dist/components/ui/dropdown-menu/dropdown-menu-sub.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DropdownMenuSub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
+type DropdownMenuSub = ReturnType<typeof DropdownMenuSub>;
+export default DropdownMenuSub;

package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />

package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+declare const DropdownMenuTrigger: import("svelte").Component<DropdownMenuPrimitive.TriggerProps, {}, "ref">;
+type DropdownMenuTrigger = ReturnType<typeof DropdownMenuTrigger>;
+export default DropdownMenuTrigger;

package/dist/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />

package/dist/components/ui/dropdown-menu/dropdown-menu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DropdownMenu: import("svelte").Component<import("bits-ui").ContextMenuRootPropsWithoutHTML, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/ui/dropdown-menu/index.d.ts

@@ -0,0 +1,18 @@
+import Root from './dropdown-menu.svelte';
+import Sub from './dropdown-menu-sub.svelte';
+import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+import Portal from './dropdown-menu-portal.svelte';
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger };

package/dist/components/ui/dropdown-menu/index.js

@@ -0,0 +1,18 @@
+import Root from './dropdown-menu.svelte';
+import Sub from './dropdown-menu-sub.svelte';
+import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+import Portal from './dropdown-menu-portal.svelte';
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger };

package/dist/components/ui/empty-state/empty-state.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		icon?: Component<{ class?: string }>;
+		title: string;
+		description?: string;
+		action?: Snippet;
+	};
+
+	let {
+		icon: Icon,
+		title,
+		description,
+		action,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(
+		'bg-card border-border ds-edge flex flex-col items-center justify-center rounded-lg border p-8 text-center',
+		className
+	)}
+	{...restProps}
+>
+	{#if Icon}
+		<div class="bg-muted mb-4 rounded-full p-3">
+			<Icon class="text-muted-foreground size-6" />
+		</div>
+	{/if}
+	<h3 class="text-foreground mb-1 text-lg font-semibold">{title}</h3>
+	{#if description}
+		<p class="text-muted-foreground mb-4 max-w-sm text-sm">{description}</p>
+	{/if}
+	{#if action}
+		{@render action()}
+	{/if}
+</div>

package/dist/components/ui/empty-state/empty-state.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet, Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    icon?: Component<{
+        class?: string;
+    }>;
+    title: string;
+    description?: string;
+    action?: Snippet;
+};
+declare const EmptyState: Component<Props, {}, "ref">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/ui/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmptyState } from './empty-state.svelte';
+export { default } from './empty-state.svelte';

package/dist/components/ui/empty-state/index.js

@@ -0,0 +1,2 @@
+export { default as EmptyState } from './empty-state.svelte';
+export { default } from './empty-state.svelte';

package/dist/components/ui/error-state/error-state.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import AlertCircle from '@lucide/svelte/icons/circle-alert';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		message: string;
+		action?: Snippet;
+	};
+
+	let {
+		message,
+		action,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+<!--
+	This surface only ever mounts because an async load has already failed, so it
+	interrupts. role="alert" is an assertive live region on its own; aria-live is
+	written out beside it so the deliberate asymmetry with the sibling
+	LoadingState (role="status" + aria-live="polite", because loading is not
+	urgent) is legible at both call sites rather than resting on an implicit
+	mapping the reader has to know.
+
+	It is mounted already carrying its message. MDN counsels priming an empty
+	role="alert" first and injecting the text after, but the ADG matrix has the
+	populated-on-insert form passing NVDA and JAWS across Firefox, Chrome and
+	Edge, and priming would cost a frame of empty box. VoiceOver/Safari is
+	untested by that matrix — see harness/drive.md.
+-->
+<div
+	bind:this={ref}
+	class={cn(
+		'bg-card border-destructive/40 ds-edge flex flex-col items-center justify-center rounded-lg border p-8 text-center',
+		className
+	)}
+	role="alert"
+	aria-live="assertive"
+	{...restProps}
+>
+	<div class="bg-destructive/10 mb-4 rounded-full p-3">
+		<AlertCircle class="text-destructive size-6" aria-hidden="true" />
+	</div>
+	<p class="text-destructive mb-4 max-w-sm text-sm">{message}</p>
+	{#if action}
+		{@render action()}
+	{/if}
+</div>

package/dist/components/ui/error-state/error-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    message: string;
+    action?: Snippet;
+};
+declare const ErrorState: import("svelte").Component<Props, {}, "ref">;
+type ErrorState = ReturnType<typeof ErrorState>;
+export default ErrorState;

package/dist/components/ui/error-state/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ErrorState } from './error-state.svelte';
+export { default } from './error-state.svelte';

package/dist/components/ui/error-state/index.js

@@ -0,0 +1,2 @@
+export { default as ErrorState } from './error-state.svelte';
+export { default } from './error-state.svelte';

package/dist/components/ui/info-tip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InfoTip } from './info-tip.svelte';
+export { default } from './info-tip.svelte';

package/dist/components/ui/info-tip/index.js

@@ -0,0 +1,2 @@
+export { default as InfoTip } from './info-tip.svelte';
+export { default } from './info-tip.svelte';

package/dist/components/ui/info-tip/info-tip.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Tooltip from '../tooltip/index.js';
+	import Info from '@lucide/svelte/icons/info';
+
+	// One tooltip pattern for the whole app. Pass `text` for the hint; wrap an
+	// existing affordance by passing it as children (e.g. a status dot or a
+	// capability chip), or omit children to render a small info icon trigger.
+	let {
+		text,
+		side = 'top',
+		children,
+		class:
+			className = 'text-muted-foreground/60 hover:text-muted-foreground size-3.5 transition-colors'
+	}: {
+		text: string;
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<Tooltip.Provider delayDuration={150}>
+	<Tooltip.Root>
+		<Tooltip.Trigger class="inline-flex cursor-help items-center align-middle">
+			{#if children}
+				{@render children()}
+			{:else}
+				<Info class={className} aria-hidden="true" />
+			{/if}
+			<span class="sr-only">{text}</span>
+		</Tooltip.Trigger>
+		<Tooltip.Content {side} class="max-w-xs text-xs">
+			{text}
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/ui/info-tip/info-tip.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    text: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    children?: Snippet;
+    class?: string;
+};
+declare const InfoTip: import("svelte").Component<$$ComponentProps, {}, "">;
+type InfoTip = ReturnType<typeof InfoTip>;
+export default InfoTip;

package/dist/components/ui/input/index.d.ts

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

package/dist/components/ui/input/index.js

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

package/dist/components/ui/input/input.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'input',
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === 'file'}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
+    type: 'file';
+    files?: FileList;
+} | {
+    type?: InputType;
+    files?: undefined;
+})>;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

@@ -0,0 +1,7 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/components/ui/input-group/index.js

@@ -0,0 +1,9 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/components/ui/input-group/input-group-addon.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		variants: {
+			align: {
+				'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+				'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+				'block-start':
+					'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+				'block-end':
+					'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start'
+			}
+		},
+		defaultVariants: {
+			align: 'inline-start'
+		}
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = 'inline-start',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest('button')) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector('input')?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/input-group/input-group-addon.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", unknown, unknown, undefined>>;
+export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

package/dist/components/ui/input-group/input-group-button.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const inputGroupButtonVariants = tv({
+		base: 'gap-2 text-sm flex items-center shadow-none',
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: 'cn-input-group-button-size-sm',
+				'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+			}
+		},
+		defaultVariants: {
+			size: 'xs'
+		}
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '../button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = 'button',
+		variant = 'ghost',
+		size = 'xs',
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>

package/dist/components/ui/input-group/input-group-button.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", {
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", unknown, unknown, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+import type { ComponentProps } from 'svelte';
+import { Button } from '../button/index.js';
+type $$ComponentProps = Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+};
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;