compote-ui 0.3.0 → 0.5.0

package/dist/components/button/button.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { button, type ButtonVariant, type ButtonSize } from './button.variants';
+
+	type Props = Omit<HTMLButtonAttributes, 'class'> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		class?: string;
+	};
+
+	let { variant, size, class: className, children, ...rest }: Props = $props();
+</script>
+
+<button class={button({ variant, size, class: className })} {...rest}>
+	{@render children?.()}
+</button>

package/dist/components/button/{Button.svelte.d.ts → button.svelte.d.ts}

@@ -1,7 +1,8 @@
 import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type ButtonVariant, type ButtonSize } from './button.variants';
 type Props = Omit<HTMLButtonAttributes, 'class'> & {
-    variant?: 'solid' | 'outline' | 'ghost';
-    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     class?: string;
 };
 declare const Button: import("svelte").Component<Props, {}, "">;

package/dist/components/button/button.variants.d.ts

@@ -0,0 +1,46 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+    variant: {
+        default: string;
+        outline: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+export type ButtonVariant = VariantProps<typeof button>['variant'];
+export type ButtonSize = VariantProps<typeof button>['size'];

package/dist/components/button/button.variants.js

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+export const button = tv({
+    base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    variants: {
+        variant: {
+            default: 'bg-primary text-white hover:bg-primary/90 active:bg-primary/80',
+            outline: 'border text-ink hover:bg-surface-2',
+            ghost: 'text-ink hover:bg-surface-2'
+        },
+        size: {
+            sm: 'h-8 gap-1.5 px-2',
+            default: 'h-9 gap-2 px-3',
+            lg: 'h-10 gap-2.5 px-4',
+            icon: 'size-9',
+            'icon-sm': 'size-8',
+            'icon-lg': 'size-10'
+        }
+    },
+    defaultVariants: { variant: 'default', size: 'default' }
+});

package/dist/components/carousel/carousel.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import PhArrowLeft from '../../icons/PhArrowLeft.svelte';
+	import PhArrowRight from '../../icons/PhArrowRight.svelte';
+	import PhCheck from '../../icons/PhCheck.svelte';
+	import PhImage from '../../icons/PhImage.svelte';
+	import PhStar from '../../icons/PhStar.svelte';
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+
+	interface ImageItem {
+		id?: string | number;
+		src: string;
+		alt?: string;
+		is_primary?: boolean;
+		position?: number;
+	}
+
+	interface Props extends Omit<CarouselRootProps, 'slideCount'> {
+		images: ImageItem[];
+		indicator?: boolean;
+		selectable?: boolean;
+		selectedIds?: (string | number)[];
+		onSetStar?: (id: string | number) => void;
+	}
+
+	let {
+		images,
+		indicator = false,
+		selectable = false,
+		selectedIds = $bindable([]),
+		onSetStar,
+		...rootProps
+	}: Props = $props();
+
+	function toggleSelect(id: string | number) {
+		if (selectedIds.includes(id)) {
+			selectedIds = selectedIds.filter((i) => i !== id);
+		} else {
+			selectedIds = [...selectedIds, id];
+		}
+	}
+</script>
+
+{#if images.length === 0}
+	<div
+		class="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed py-12 text-center text-ink-dim"
+	>
+		<PhImage class="size-10 opacity-40" />
+		<p class="text-sm">No images yet.</p>
+	</div>
+{:else}
+	<Carousel.Root slideCount={images.length} {...rootProps}>
+		<Carousel.Control class="flex items-center gap-2">
+			<Carousel.PrevTrigger
+				class="inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50"
+			>
+				<PhArrowLeft class="size-4" />
+			</Carousel.PrevTrigger>
+			<Carousel.ItemGroup class="flex flex-1 overflow-hidden rounded-lg">
+				{#each images as image, index (image.id ?? index)}
+					{@const key = image.id ?? index}
+					{@const isSelected = selectable && selectedIds.includes(key)}
+					<Carousel.Item {index} class="min-w-0 flex-[0_0_100%]">
+						<div class="group/slide relative">
+							<img
+								src={image.src}
+								alt={image.alt ?? ''}
+								class="aspect-square w-full rounded-lg bg-surface-2 object-contain"
+							/>
+							{#if onSetStar && image.id != null}
+								<button
+									class="absolute top-2 left-2 z-10 transition-opacity {image.is_primary
+										? 'opacity-100'
+										: 'opacity-0 group-hover/slide:opacity-100'}"
+									title={image.is_primary ? 'Primary image' : 'Set as primary'}
+									onclick={() => onSetStar(image.id!)}
+								>
+									<PhStar
+										class="size-5 drop-shadow {image.is_primary
+											? 'fill-yellow-400 text-yellow-400'
+											: 'text-white/70 hover:text-yellow-300'}"
+									/>
+								</button>
+							{/if}
+							{#if selectable}
+								<button
+									class="absolute top-2 right-2 z-10 flex size-6 items-center justify-center rounded-full border-2 transition-all {isSelected
+										? 'border-primary bg-primary text-white opacity-100'
+										: 'border-white/80 bg-black/40 opacity-0 group-hover/slide:opacity-100'}"
+									onclick={() => toggleSelect(key)}
+								>
+									{#if isSelected}
+										<PhCheck class="size-3.5" />
+									{/if}
+								</button>
+							{/if}
+						</div>
+					</Carousel.Item>
+				{/each}
+			</Carousel.ItemGroup>
+			<Carousel.NextTrigger
+				class="inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50"
+			>
+				<PhArrowRight class="size-4" />
+			</Carousel.NextTrigger>
+		</Carousel.Control>
+		{#if indicator}
+			<Carousel.IndicatorGroup class="mt-2 flex justify-center gap-2">
+				{#each images as image, index (index)}
+					<Carousel.Indicator
+						{index}
+						class="h-15 w-15 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent opacity-60 transition-all data-current:border-primary data-current:opacity-100"
+					>
+						<img src={image.src} alt={image.alt ?? ''} class="h-full w-full object-cover" />
+					</Carousel.Indicator>
+				{/each}
+			</Carousel.IndicatorGroup>
+		{/if}
+	</Carousel.Root>
+{/if}

package/dist/components/carousel/carousel.svelte.d.ts

@@ -0,0 +1,19 @@
+import { Carousel } from '@ark-ui/svelte/carousel';
+import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+interface ImageItem {
+    id?: string | number;
+    src: string;
+    alt?: string;
+    is_primary?: boolean;
+    position?: number;
+}
+interface Props extends Omit<CarouselRootProps, 'slideCount'> {
+    images: ImageItem[];
+    indicator?: boolean;
+    selectable?: boolean;
+    selectedIds?: (string | number)[];
+    onSetStar?: (id: string | number) => void;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "selectedIds">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/checkbox/{Checkbox-group.svelte → checkbox-group.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends string | number">
 	import { Checkbox } from '@ark-ui/svelte/checkbox';
 	import type { CheckboxGroupProps } from './checkbox-group.types';
-	import CheckboxItem from './Checkbox.svelte';
+	import CheckboxItem from './checkbox.svelte';
 
 	let {
 		items,

package/dist/components/checkbox/{Checkbox.svelte → checkbox.svelte}

@@ -2,6 +2,7 @@
 	import { Checkbox } from '@ark-ui/svelte/checkbox';
 	import type { CheckboxProps as Props } from './checkbox.types.js';
 	import PhCheck from '../../icons/PhCheck.svelte';
+	import PhMinus from '../../icons/PhMinus.svelte';
 
 	let { checked = $bindable(), label, children, ...rest }: Props = $props();
 </script>
@@ -14,10 +15,13 @@
 	<Checkbox.Control
 		class="{children
 			? 'mt-0.5'
-			: ''} flex size-5 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary"
+			: ''} data-focus-visible:outline-ring flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
 	>
 		<Checkbox.Indicator>
-			<PhCheck class="size-3.5 text-primary-foreground" />
+			<PhCheck class="size-3.5 text-white" />
+		</Checkbox.Indicator>
+		<Checkbox.Indicator indeterminate>
+			<PhMinus class="size-3.5 text-white" />
 		</Checkbox.Indicator>
 	</Checkbox.Control>
 	{#if label}

package/dist/components/combobox/{Combobox.svelte → combobox.svelte}

@@ -16,8 +16,9 @@
 		placeholder,
 		layout = 'vertical',
 		name,
-		readonly,
+		readOnly,
 		multiple,
+		loading = false,
 		...restProps
 	}: ComboboxProps<T> = $props();
 
@@ -91,21 +92,22 @@
 	onInputValueChange={handleInputChange}
 	openOnClick
 	{multiple}
-	readOnly={readonly}
+	{readOnly}
 	{...restProps}
 	class={cn(layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5')}
 >
 	{#if label}
-		<Combobox.Label>
+		<Combobox.Label class="text-sm">
 			{label}
-			<Field.RequiredIndicator />
+			<Field.RequiredIndicator class="text-danger" />
 		</Combobox.Label>
 	{/if}
 
 	<Combobox.Control
 		class={cn(
 			'rounded-ark flex min-h-9 items-center gap-1 border px-3 shadow-sm',
-			'focus-within:ring-1 focus-within:ring-(--ark-ring)',
+			'focus-within:ring-1 focus-within:ring-primary',
+			'data-invalid:border-danger data-invalid:focus-within:ring-danger',
 			multiple && 'flex-wrap py-1'
 		)}
 	>
@@ -114,21 +116,8 @@
 				{#each value as v (v)}
 					{@const item = items.find((i) => i.value === v)}
 					{#if item}
-						<span
-							class="inline-flex items-center gap-1 rounded bg-(--ark-hover-bg) px-2 py-0.5 text-xs"
-						>
+						<span class="inline-flex items-center gap-1 rounded bg-surface-2 px-2 py-0.5 text-xs">
 							{item.label}
-							{#if !readonly}
-								<button
-									type="button"
-									onclick={() => {
-										value = (value as (number | string)[]).filter((x) => x !== v);
-									}}
-									class="hover:text-(--ark-error)"
-								>
-									<PhX class="size-3" />
-								</button>
-							{/if}
 						</span>
 					{/if}
 				{/each}
@@ -138,7 +127,7 @@
 			placeholder={placeholder ?? 'Search...'}
 			class="flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed disabled:opacity-50"
 		/>
-		{#if value != null && !readonly && !multiple}
+		{#if !readOnly}
 			<Combobox.ClearTrigger class="text-ink-dim transition-colors hover:text-ink">
 				<PhX class="size-4" />
 			</Combobox.ClearTrigger>
@@ -153,11 +142,19 @@
 			<Combobox.Content
 				class="data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-1 p-1  shadow-md"
 			>
-				<Combobox.Empty class="py-2 text-center text-sm text-ink-dim">
-					No results found
-				</Combobox.Empty>
+				{#if loading}
+					<div class="flex items-center justify-center py-4">
+						<span
+							class="size-5 animate-spin rounded-full border-2 border-surface-3 border-t-ink-dim"
+						></span>
+					</div>
+				{:else}
+					<Combobox.Empty class="py-2 text-center text-sm text-ink-dim">
+						No results found
+					</Combobox.Empty>
+				{/if}
 
-				{#each collection.items as item (item.value)}
+				{#each loading ? [] : collection.items as item (item.value)}
 					<Combobox.Item
 						{item}
 						class="relative flex cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:bg-surface-2"

package/dist/components/combobox/types.d.ts

@@ -9,8 +9,8 @@ export interface ComboboxProps<T extends ComboboxItem> extends Omit<ComboboxRoot
     items: T[];
     label?: string;
     placeholder?: string;
-    readonly?: boolean;
     name?: string;
     multiple?: boolean;
     layout?: 'vertical' | 'horizontal';
+    loading?: boolean;
 }

package/dist/components/dialog/alert-dialog.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import PhX from '../../icons/PhX.svelte';
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import { Portal } from '@ark-ui/svelte/portal';
+
+	type Variant = 'default' | 'destructive';
+
+	type Props = {
+		open: boolean;
+		title: string;
+		description?: string | string[];
+		confirmLabel?: string;
+		cancelLabel?: string;
+		onConfirm?: () => void;
+		variant?: Variant;
+	};
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		confirmLabel = 'Confirm',
+		cancelLabel = 'Cancel',
+		onConfirm,
+		variant = 'default'
+	}: Props = $props();
+
+	const confirmClass = $derived(
+		variant === 'destructive'
+			? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-white shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary'
+			: 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary'
+	);
+</script>
+
+<Dialog.Root role="alertdialog" bind:open>
+	<Portal>
+		<Dialog.Backdrop
+			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
+		/>
+		<Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center">
+			<Dialog.Content
+				class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl"
+			>
+				<Dialog.Title class="text-lg leading-none font-semibold tracking-tight">
+					{title}
+				</Dialog.Title>
+				{#if description}
+					<Dialog.Description class="mt-2 text-sm text-ink-dim">
+						{#each Array.isArray(description) ? description : [description] as line, i (i)}
+							<span class="block">{line}</span>
+						{/each}
+					</Dialog.Description>
+				{/if}
+				<div class="mt-6 flex justify-end gap-3">
+					<Dialog.CloseTrigger
+						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none"
+					>
+						{cancelLabel}
+					</Dialog.CloseTrigger>
+					<button type="button" class={confirmClass} onclick={onConfirm}>
+						{confirmLabel}
+					</button>
+				</div>
+				<Dialog.CloseTrigger
+					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+				>
+					<PhX class="h-4 w-4" />
+					<span class="sr-only">Close</span>
+				</Dialog.CloseTrigger>
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>

package/dist/components/dialog/alert-dialog.svelte.d.ts

@@ -0,0 +1,13 @@
+type Variant = 'default' | 'destructive';
+type Props = {
+    open: boolean;
+    title: string;
+    description?: string | string[];
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    variant?: Variant;
+};
+declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/components/dialog/dialog.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { cn } from 'tailwind-variants';
+	import PhX from '../../icons/PhX.svelte';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		description?: string;
+		children: Snippet;
+		footer?: Snippet;
+		onClose?: () => void;
+		contentClass?: string;
+	}
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		children,
+		footer,
+		onClose,
+		contentClass
+	}: Props = $props();
+</script>
+
+<Dialog.Root bind:open lazyMount unmountOnExit>
+	<Portal>
+		<Dialog.Backdrop
+			class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/50"
+		/>
+		<Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center p-4">
+			<Dialog.Content
+				class={cn(
+					'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl',
+					contentClass
+				)}
+			>
+				<Dialog.Title class="text-lg font-semibold">{title}</Dialog.Title>
+				{#if description}
+					<Dialog.Description class="mt-1 text-sm text-ink-dim">
+						{description}
+					</Dialog.Description>
+				{/if}
+
+				<div class="mt-4">
+					{@render children()}
+				</div>
+
+				{#if footer}
+					<div class="mt-4 flex justify-end gap-3">
+						{@render footer()}
+					</div>
+				{/if}
+
+				<Dialog.CloseTrigger
+					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
+					onclick={onClose}
+				>
+					<PhX class="size-4" />
+					<span class="sr-only">Close</span>
+				</Dialog.CloseTrigger>
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>

package/dist/components/dialog/dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { Dialog } from '@ark-ui/svelte/dialog';
+interface Props {
+    open: boolean;
+    title: string;
+    description?: string;
+    children: Snippet;
+    footer?: Snippet;
+    onClose?: () => void;
+    contentClass?: string;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/field/field-error-text.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { FieldErrorTextProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldErrorTextProps = $props();
+</script>
+
+<Field.ErrorText {...rest} class={cn('text-xs font-medium text-danger', className)}>
+	{@render children?.()}
+</Field.ErrorText>

package/dist/components/field/field-error-text.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldErrorTextProps } from './types';
+declare const FieldErrorText: import("svelte").Component<FieldErrorTextProps, {}, "">;
+type FieldErrorText = ReturnType<typeof FieldErrorText>;
+export default FieldErrorText;

package/dist/components/field/field-helper-text.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { FieldHelperTextProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldHelperTextProps = $props();
+</script>
+
+<Field.HelperText {...rest} class={cn('text-xs text-ink-dim', className)}>
+	{@render children?.()}
+</Field.HelperText>

package/dist/components/field/field-helper-text.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldHelperTextProps } from './types';
+declare const FieldHelperText: import("svelte").Component<FieldHelperTextProps, {}, "">;
+type FieldHelperText = ReturnType<typeof FieldHelperText>;
+export default FieldHelperText;

package/dist/components/field/field-input.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { FieldInputProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let {
+		class: className,
+		value = $bindable(),
+		startIcon,
+		endIcon,
+		...rest
+	}: FieldInputProps = $props();
+</script>
+
+<div class="relative w-full">
+	{#if startIcon}
+		<div
+			class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-ink-dim"
+		>
+			{@render startIcon()}
+		</div>
+	{/if}
+	<Field.Input
+		{...rest}
+		bind:value
+		class={cn(
+			'flex h-9 w-full rounded-md border bg-surface-1 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
+			startIcon && 'pl-9',
+			endIcon && 'pr-9',
+			className
+		)}
+	/>
+	{#if endIcon}
+		<div class="absolute inset-y-0 right-0 flex items-center pr-2.5">
+			{@render endIcon()}
+		</div>
+	{/if}
+</div>

package/dist/components/field/field-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldInputProps } from './types';
+declare const FieldInput: import("svelte").Component<FieldInputProps, {}, "value">;
+type FieldInput = ReturnType<typeof FieldInput>;
+export default FieldInput;

package/dist/components/field/field-label.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { FieldLabelProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: FieldLabelProps = $props();
+</script>
+
+<Field.Label
+	{...rest}
+	class={cn(
+		'text-sm leading-none font-medium data-disabled:cursor-not-allowed data-disabled:opacity-70',
+		className
+	)}
+>
+	{@render children?.()}
+	<Field.RequiredIndicator class="ml-1 text-danger" />
+</Field.Label>

package/dist/components/field/field-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldLabelProps } from './types';
+declare const FieldLabel: import("svelte").Component<FieldLabelProps, {}, "">;
+type FieldLabel = ReturnType<typeof FieldLabel>;
+export default FieldLabel;