@dryui/ui 0.3.0 → 0.4.1

package/dist/chromatic-aberration/chromatic-aberration.svelte.d.ts

@@ -1,10 +1,10 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type ChromaticAberrationProps as PrimitiveChromaticAberrationProps } from '@dryui/primitives/chromatic-aberration';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	offset?: PrimitiveChromaticAberrationProps['offset'];
-	angle?: PrimitiveChromaticAberrationProps['angle'];
-	children: PrimitiveChromaticAberrationProps['children'];
+    offset?: number;
+    angle?: number;
+    children: Snippet;
 }
-declare const ChromaticAberration: import('svelte').Component<Props, {}, ''>;
+declare const ChromaticAberration: import("svelte").Component<Props, {}, "">;
 type ChromaticAberration = ReturnType<typeof ChromaticAberration>;
 export default ChromaticAberration;

package/dist/chromatic-shift/chromatic-shift.svelte.d.ts

@@ -1,13 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type ChromaticShiftProps as PrimitiveChromaticShiftProps } from '@dryui/primitives/chromatic-shift';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	offset?: PrimitiveChromaticShiftProps['offset'];
-	channels?: PrimitiveChromaticShiftProps['channels'];
-	trigger?: PrimitiveChromaticShiftProps['trigger'];
-	animated?: PrimitiveChromaticShiftProps['animated'];
-	children: Snippet;
+    offset?: number;
+    channels?: 'rgb' | 'rb';
+    trigger?: 'hover' | 'always' | 'none';
+    animated?: boolean;
+    children: Snippet;
 }
-declare const ChromaticShift: import('svelte').Component<Props, {}, ''>;
+declare const ChromaticShift: import("svelte").Component<Props, {}, "">;
 type ChromaticShift = ReturnType<typeof ChromaticShift>;
 export default ChromaticShift;

package/dist/clipboard/clipboard.svelte.d.ts

@@ -1,17 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-	value: string;
-	timeout?: number;
-	children: Snippet<
-		[
-			{
-				copied: boolean;
-				copy: () => void;
-			}
-		]
-	>;
+    value: string;
+    timeout?: number;
+    children: Snippet<[{
+        copied: boolean;
+        copy: () => void;
+    }]>;
 }
-declare const Clipboard: import('svelte').Component<Props, {}, ''>;
+declare const Clipboard: import("svelte").Component<Props, {}, "">;
 type Clipboard = ReturnType<typeof Clipboard>;
 export default Clipboard;

package/dist/code-block/{code-block.svelte → code-block-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { highlight } from './highlighter/index.js';
 	import type { Token } from './highlighter/types.js';
 
@@ -118,41 +119,45 @@
 	{/if}
 
 	{#if showCopyButton}
-		<button
-			type="button"
-			data-code-block-copy
-			onclick={handleCopy}
-			aria-label={copied ? 'Copied' : 'Copy code'}
-		>
-			{#if copied}
-				<svg
-					width="16"
-					height="16"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<polyline points="20 6 9 17 4 12"></polyline>
-				</svg>
-			{:else}
-				<svg
-					width="16"
-					height="16"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-					<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-				</svg>
-			{/if}
-		</button>
+		<span class="copy-btn-slot">
+			<Button
+				variant="trigger"
+				size="icon-sm"
+				type="button"
+				data-code-block-copy
+				onclick={handleCopy}
+				aria-label={copied ? 'Copied' : 'Copy code'}
+			>
+				{#if copied}
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<polyline points="20 6 9 17 4 12"></polyline>
+					</svg>
+				{:else}
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+					</svg>
+				{/if}
+			</Button>
+		</span>
 	{/if}
 </div>
 
@@ -195,34 +200,16 @@
 		user-select: none;
 	}
 
-	[data-code-block-copy] {
-		--dry-code-copy-hover-bg: color-mix(in srgb, var(--dry-color-bg-overlay) 10%, transparent);
-
+	.copy-btn-slot {
 		position: absolute;
 		top: var(--dry-space-2);
 		right: var(--dry-space-2);
+		z-index: 1;
 		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-12);
-		aspect-ratio: 1;
-		padding: 0;
 		color: var(--dry-code-copy-color);
-		background: transparent;
-		border: none;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			color var(--dry-duration-fast, 100ms),
-			background var(--dry-duration-fast, 100ms);
-		z-index: 1;
-
-		&:hover {
-			color: var(--dry-code-copy-hover-color);
-			background: var(--dry-code-copy-hover-bg);
-		}
 	}
 
-	[data-code-block]:has([data-code-block-header]) [data-code-block-copy] {
+	[data-code-block]:has([data-code-block-header]) .copy-btn-slot {
 		top: calc(
 			var(--dry-space-2) + var(--dry-type-tiny-size, var(--dry-text-xs-size)) + var(--dry-space-2) *
 				2 + 1px
@@ -238,18 +225,18 @@
 		grid-column: 1 / -1;
 	}
 
-	[data-code-block][data-single-line] [data-code-block-copy] {
+	[data-code-block][data-single-line] .copy-btn-slot {
 		position: static;
 		align-self: center;
 		margin-right: var(--dry-space-2);
 	}
 
-	[data-code-block][data-single-line]:has([data-code-block-copy]) [data-code-block-pre] {
+	[data-code-block][data-single-line]:has(.copy-btn-slot) [data-code-block-pre] {
 		-webkit-mask-image: linear-gradient(to right, black calc(100% - 0.75rem), transparent);
 		mask-image: linear-gradient(to right, black calc(100% - 0.75rem), transparent);
 	}
 
-	[data-code-block]:not([data-single-line]):has([data-code-block-copy]) [data-code-block-pre] {
+	[data-code-block]:not([data-single-line]):has(.copy-btn-slot) [data-code-block-pre] {
 		padding-right: calc(var(--dry-code-padding) + var(--dry-space-12));
 	}
 

package/dist/code-block/code-block-button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    showCopyButton?: boolean;
+    linkResolver?: (text: string, type: string) => string | undefined;
+    children?: Snippet;
+}
+declare const CodeBlockButton: import("svelte").Component<Props, {}, "">;
+type CodeBlockButton = ReturnType<typeof CodeBlockButton>;
+export default CodeBlockButton;

package/dist/code-block/index.d.ts

@@ -4,6 +4,6 @@ export interface CodeBlockProps extends Omit<PrimitiveCodeBlockProps, 'shell'> {
     showCopyButton?: boolean;
     linkResolver?: (text: string, type: string) => string | undefined;
 }
-export { default as CodeBlock } from './code-block.svelte';
+export { default as CodeBlock } from './code-block-button.svelte';
 export type { Token, Highlighter } from './highlighter/types.js';
 export { highlight, registerHighlighter } from './highlighter/index.js';

package/dist/code-block/index.js

@@ -1,2 +1,2 @@
-export { default as CodeBlock } from './code-block.svelte';
+export { default as CodeBlock } from './code-block-button.svelte';
 export { highlight, registerHighlighter } from './highlighter/index.js';

package/dist/collapsible/collapsible-button-trigger.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getCollapsibleCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getCollapsibleCtx();
+</script>
+
+<Button
+	variant="outline"
+	type="button"
+	aria-expanded={ctx.open}
+	aria-controls={ctx.contentId}
+	data-state={ctx.open ? 'open' : 'closed'}
+	disabled={ctx.disabled}
+	{...rest}
+	onclick={() => ctx.toggle()}
+>
+	{@render children()}
+	<svg
+		data-indicator
+		class:open={ctx.open}
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
+	>
+</Button>
+
+<style>
+	svg[data-indicator] {
+		height: 1rem;
+		aspect-ratio: 1;
+		opacity: 0.5;
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	svg[data-indicator].open {
+		transform: rotate(180deg);
+	}
+</style>

package/dist/collapsible/collapsible-button-trigger.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 CollapsibleButtonTrigger: import("svelte").Component<Props, {}, "">;
+type CollapsibleButtonTrigger = ReturnType<typeof CollapsibleButtonTrigger>;
+export default CollapsibleButtonTrigger;

package/dist/collapsible/collapsible-content.svelte.d.ts

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

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

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	open?: boolean;
-	disabled?: boolean;
-	children: Snippet;
+    open?: boolean;
+    disabled?: boolean;
+    children: Snippet;
 }
-declare const CollapsibleRoot: import('svelte').Component<Props, {}, 'open'>;
+declare const CollapsibleRoot: import("svelte").Component<Props, {}, "open">;
 type CollapsibleRoot = ReturnType<typeof CollapsibleRoot>;
 export default CollapsibleRoot;

package/dist/collapsible/index.d.ts

@@ -12,7 +12,7 @@ export interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement>
     children: Snippet;
 }
 import CollapsibleRoot from './collapsible-root.svelte';
-import CollapsibleTrigger from './collapsible-trigger.svelte';
+import CollapsibleTrigger from './collapsible-button-trigger.svelte';
 import CollapsibleContent from './collapsible-content.svelte';
 export declare const Collapsible: {
     Root: typeof CollapsibleRoot;

package/dist/collapsible/index.js

@@ -1,5 +1,5 @@
 import CollapsibleRoot from './collapsible-root.svelte';
-import CollapsibleTrigger from './collapsible-trigger.svelte';
+import CollapsibleTrigger from './collapsible-button-trigger.svelte';
 import CollapsibleContent from './collapsible-content.svelte';
 export const Collapsible = {
     Root: CollapsibleRoot,

package/dist/color-picker/color-picker-area.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	width?: number;
-	height?: number;
+    width?: number;
+    height?: number;
 }
-declare const ColorPickerArea: import('svelte').Component<Props, {}, ''>;
+declare const ColorPickerArea: import("svelte").Component<Props, {}, "">;
 type ColorPickerArea = ReturnType<typeof ColorPickerArea>;
 export default ColorPickerArea;

package/dist/color-picker/{color-picker-eyedropper.svelte → color-picker-button-eyedropper.svelte}

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getColorPickerCtx } from './context.svelte.js';
 
 	interface Props extends HTMLButtonAttributes {
 		children?: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { children, ...rest }: Props = $props();
 
 	const ctx = getColorPickerCtx();
 
@@ -30,14 +31,13 @@
 </script>
 
 {#if isSupported}
-	<button
+	<Button
+		variant="outline"
+		size="icon-sm"
 		type="button"
-		onclick={handleClick}
-		disabled={ctx.disabled}
 		aria-label="Pick color from screen"
-		data-cp-eyedropper
-		data-disabled={ctx.disabled || undefined}
-		class={className}
+		disabled={ctx.disabled}
+		onclick={handleClick}
 		{...rest}
 	>
 		{#if children}
@@ -57,46 +57,5 @@
 				/></svg
 			>
 		{/if}
-	</button>
+	</Button>
 {/if}
-
-<style>
-	[data-cp-eyedropper] {
-		display: inline-grid;
-		grid-auto-flow: column;
-		place-items: center;
-		gap: var(--dry-space-1_5);
-		padding: var(--dry-space-2);
-		font-size: var(--dry-type-small-size);
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-strong);
-		background: var(--dry-color-bg-raised);
-		border: 1px solid var(--dry-color-stroke-strong);
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-cp-eyedropper] svg {
-		height: 1rem;
-		aspect-ratio: 1;
-	}
-
-	[data-cp-eyedropper]:hover:not([data-disabled]):not(:disabled) {
-		background: var(--dry-color-picker-surface-hover);
-		border-color: var(--dry-color-stroke-strong);
-	}
-
-	[data-cp-eyedropper]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -1px;
-	}
-
-	[data-cp-eyedropper][data-disabled],
-	[data-cp-eyedropper]:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-</style>

package/dist/color-picker/color-picker-button-eyedropper.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 ColorPickerButtonEyedropper: import("svelte").Component<Props, {}, "">;
+type ColorPickerButtonEyedropper = ReturnType<typeof ColorPickerButtonEyedropper>;
+export default ColorPickerButtonEyedropper;

package/dist/color-picker/color-picker-channel-input.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLInputAttributes, 'value' | 'type' | 'min' | 'max'> {
-	channel: 'h' | 's' | 'v';
+    channel: 'h' | 's' | 'v';
 }
-declare const ColorPickerChannelInput: import('svelte').Component<Props, {}, ''>;
+declare const ColorPickerChannelInput: import("svelte").Component<Props, {}, "">;
 type ColorPickerChannelInput = ReturnType<typeof ColorPickerChannelInput>;
 export default ColorPickerChannelInput;

package/dist/color-picker/color-picker-input-alpha-slider.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'value' | 'type' | 'min' | 'max' | 'step'>;
+declare const ColorPickerInputAlphaSlider: import("svelte").Component<Props, {}, "">;
+type ColorPickerInputAlphaSlider = ReturnType<typeof ColorPickerInputAlphaSlider>;
+export default ColorPickerInputAlphaSlider;

package/dist/color-picker/color-picker-input-hue-slider.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'value' | 'type' | 'min' | 'max' | 'step'>;
+declare const ColorPickerInputHueSlider: import("svelte").Component<Props, {}, "">;
+type ColorPickerInputHueSlider = ReturnType<typeof ColorPickerInputHueSlider>;
+export default ColorPickerInputHueSlider;

package/dist/color-picker/color-picker-input.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLInputAttributes, 'value' | 'type'> {
-	format?: 'hex' | 'rgb' | 'hsl';
+    format?: 'hex' | 'rgb' | 'hsl';
 }
-declare const ColorPickerInput: import('svelte').Component<Props, {}, ''>;
+declare const ColorPickerInput: import("svelte").Component<Props, {}, "">;
 type ColorPickerInput = ReturnType<typeof ColorPickerInput>;
 export default ColorPickerInput;

package/dist/color-picker/color-picker-root.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: string;
-	alpha?: number;
-	disabled?: boolean;
-	width?: number;
-	areaHeight?: number;
-	children: Snippet;
+    value?: string;
+    alpha?: number;
+    disabled?: boolean;
+    width?: number;
+    areaHeight?: number;
+    children: Snippet;
 }
-declare const ColorPickerRoot: import('svelte').Component<Props, {}, 'value' | 'alpha'>;
+declare const ColorPickerRoot: import("svelte").Component<Props, {}, "value" | "alpha">;
 type ColorPickerRoot = ReturnType<typeof ColorPickerRoot>;
 export default ColorPickerRoot;

package/dist/color-picker/color-picker-swatch.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	color?: string;
+    color?: string;
 }
-declare const ColorPickerSwatch: import('svelte').Component<Props, {}, ''>;
+declare const ColorPickerSwatch: import("svelte").Component<Props, {}, "">;
 type ColorPickerSwatch = ReturnType<typeof ColorPickerSwatch>;
 export default ColorPickerSwatch;

package/dist/color-picker/index.d.ts

@@ -6,11 +6,11 @@ export interface ColorPickerRootProps extends PrimitiveColorPickerRootProps {
 }
 import ColorPickerRoot from './color-picker-root.svelte';
 import ColorPickerArea from './color-picker-area.svelte';
-import ColorPickerHueSlider from './color-picker-hue-slider.svelte';
-import ColorPickerAlphaSlider from './color-picker-alpha-slider.svelte';
+import ColorPickerHueSlider from './color-picker-input-hue-slider.svelte';
+import ColorPickerAlphaSlider from './color-picker-input-alpha-slider.svelte';
 import ColorPickerInput from './color-picker-input.svelte';
 import ColorPickerSwatch from './color-picker-swatch.svelte';
-import ColorPickerEyeDropper from './color-picker-eyedropper.svelte';
+import ColorPickerEyeDropper from './color-picker-button-eyedropper.svelte';
 import ColorPickerChannelInput from './color-picker-channel-input.svelte';
 export declare const ColorPicker: {
     Root: typeof ColorPickerRoot;

package/dist/color-picker/index.js

@@ -1,10 +1,10 @@
 import ColorPickerRoot from './color-picker-root.svelte';
 import ColorPickerArea from './color-picker-area.svelte';
-import ColorPickerHueSlider from './color-picker-hue-slider.svelte';
-import ColorPickerAlphaSlider from './color-picker-alpha-slider.svelte';
+import ColorPickerHueSlider from './color-picker-input-hue-slider.svelte';
+import ColorPickerAlphaSlider from './color-picker-input-alpha-slider.svelte';
 import ColorPickerInput from './color-picker-input.svelte';
 import ColorPickerSwatch from './color-picker-swatch.svelte';
-import ColorPickerEyeDropper from './color-picker-eyedropper.svelte';
+import ColorPickerEyeDropper from './color-picker-button-eyedropper.svelte';
 import ColorPickerChannelInput from './color-picker-channel-input.svelte';
 export const ColorPicker = {
     Root: ColorPickerRoot,

package/dist/combobox/combobox-content.svelte.d.ts

@@ -1,24 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	placement?:
-		| 'top'
-		| 'top-start'
-		| 'top-end'
-		| 'bottom'
-		| 'bottom-start'
-		| 'bottom-end'
-		| 'left'
-		| 'left-start'
-		| 'left-end'
-		| 'right'
-		| 'right-start'
-		| 'right-end';
-	offset?: number;
-	loading?: boolean;
-	loadingContent?: Snippet;
-	children: Snippet;
+    placement?: Placement;
+    offset?: number;
+    loading?: boolean;
+    loadingContent?: Snippet;
+    children: Snippet;
 }
-declare const ComboboxContent: import('svelte').Component<Props, {}, ''>;
+declare const ComboboxContent: import("svelte").Component<Props, {}, "">;
 type ComboboxContent = ReturnType<typeof ComboboxContent>;
 export default ComboboxContent;

package/dist/combobox/combobox-empty.svelte.d.ts

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

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

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	label: string;
-	children: Snippet;
+    label: string;
+    children: Snippet;
 }
-declare const ComboboxGroup: import('svelte').Component<Props, {}, ''>;
+declare const ComboboxGroup: import("svelte").Component<Props, {}, "">;
 type ComboboxGroup = ReturnType<typeof ComboboxGroup>;
 export default ComboboxGroup;

package/dist/combobox/combobox-input-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    value?: string;
+    disabled?: boolean;
+    name?: string;
+    children: Snippet;
+}
+declare const ComboboxInputRoot: import("svelte").Component<Props, {}, "value" | "open">;
+type ComboboxInputRoot = ReturnType<typeof ComboboxInputRoot>;
+export default ComboboxInputRoot;

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

@@ -1,8 +1,8 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLInputAttributes, 'size'> {
-	placeholder?: string;
-	size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
 }
-declare const ComboboxInput: import('svelte').Component<Props, {}, ''>;
+declare const ComboboxInput: import("svelte").Component<Props, {}, "">;
 type ComboboxInput = ReturnType<typeof ComboboxInput>;
 export default ComboboxInput;