@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/recipes/fields/CheckboxField.svelte.d.ts

@@ -0,0 +1,55 @@
+export default CheckboxField;
+type CheckboxField = SvelteComponent<{
+    class?: string | undefined;
+    color?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    required?: boolean | undefined;
+    description?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CheckboxField: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    color?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    required?: boolean | undefined;
+    description?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=CheckboxField.svelte.d.ts.map

package/dist/recipes/fields/CheckboxField.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/CheckboxField.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoGA;;;;;;;;;;;;;;;;;;mBAAyN;6CAT5K,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/fields/FormField.svelte

@@ -0,0 +1,53 @@
+<script>
+  /**
+   * FormField - A composition of Label + input slot + ValidationError
+   *
+   * Use this to wrap any input primitive with consistent label, hint, and error display.
+   * For Input component, you can use its built-in label/error props instead.
+   *
+   * @example
+   * <FormField label="Email" error={$errors.email} required>
+   *   <Select bind:value={email} options={options} />
+   * </FormField>
+   */
+  import Label from '../../primitives/Label/Label.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+
+  /** Field label text */
+  export let label = '';
+
+  /** Error message to display */
+  export let error = '';
+
+  /** Hint text shown below input (hidden when error is shown) */
+  export let hint = '';
+
+  /** Show required indicator (*) after label */
+  export let required = false;
+
+  /** ID to pass to the input via slot props */
+  export let id = crypto.randomUUID();
+
+  /** Additional class for the wrapper div */
+  let className = '';
+  export { className as class };
+
+  // Determine label color based on error state
+  $: labelColor = error ? 'red' : 'gray';
+</script>
+
+<div class="space-y-1 {className}">
+  {#if label}
+    <Label for={id} color={labelColor}>
+      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+    </Label>
+  {/if}
+
+  <slot {id} {error} {required} />
+
+  {#if hint && !error}
+    <p class="text-sm text-gray-500 dark:text-gray-400">{hint}</p>
+  {/if}
+
+  <ValidationError {error} />
+</div>

package/dist/recipes/fields/FormField.svelte.d.ts

@@ -0,0 +1,66 @@
+export default FormField;
+type FormField = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    error?: string | undefined;
+    label?: string | undefined;
+    id?: `${string}-${string}-${string}-${string}-${string}` | undefined;
+    required?: boolean | undefined;
+    hint?: string | undefined;
+}, {
+    default: {
+        id: `${string}-${string}-${string}-${string}-${string}`;
+        error: string;
+        required: boolean;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        id: `${string}-${string}-${string}-${string}-${string}`;
+        error: string;
+        required: boolean;
+    };
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const FormField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    error?: string | undefined;
+    label?: string | undefined;
+    id?: `${string}-${string}-${string}-${string}-${string}` | undefined;
+    required?: boolean | undefined;
+    hint?: string | undefined;
+}, {
+    default: {
+        id: `${string}-${string}-${string}-${string}-${string}`;
+        error: string;
+        required: boolean;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        id: `${string}-${string}-${string}-${string}-${string}`;
+        error: string;
+        required: boolean;
+    };
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=FormField.svelte.d.ts.map

package/dist/recipes/fields/FormField.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/FormField.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmFA;;;;;;;;;;;;;;;;;;;;;eAA6K;sCATvI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/fields/RadioGroup.svelte

@@ -0,0 +1,89 @@
+<script>
+  /**
+   * RadioGroup - Group of radio buttons with shared validation
+   *
+   * Wraps multiple Radio primitives in a fieldset with label and error support.
+   *
+   * @example
+   * <RadioGroup
+   *   label="Preferred contact method"
+   *   options={[
+   *     { value: 'email', label: 'Email' },
+   *     { value: 'phone', label: 'Phone' },
+   *     { value: 'sms', label: 'SMS' }
+   *   ]}
+   *   bind:value={contactMethod}
+   *   error={$errors.contactMethod}
+   *   required
+   * />
+   */
+  import Radio from '../../primitives/Radio/Radio.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+
+  /** Currently selected value */
+  export let value = '';
+
+  /** Radio options array */
+  export let options = [];
+
+  /** Name attribute for the radio group */
+  export let name = '';
+
+  /** Whether all radios are disabled */
+  export let disabled = false;
+
+  /** Color variant for radios */
+  export let color = 'blue';
+
+  /** Group label text */
+  export let label = '';
+
+  /** Hint text shown below label */
+  export let hint = '';
+
+  /** Error message to display */
+  export let error = '';
+
+  /** Show required indicator */
+  export let required = false;
+
+  /** Layout direction */
+  export let direction = 'vertical';
+
+  /** Additional class for the fieldset */
+  let className = '';
+  export { className as class };
+
+  $: layoutClass = direction === 'horizontal'
+    ? 'flex flex-wrap gap-4'
+    : 'flex flex-col gap-2';
+</script>
+
+<fieldset class={className}>
+  {#if label}
+    <legend class="text-sm font-medium text-gray-900 dark:text-white mb-2 {error ? 'text-red-500' : ''}">
+      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+    </legend>
+  {/if}
+
+  {#if hint && !error}
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">{hint}</p>
+  {/if}
+
+  <div class={layoutClass}>
+    {#each options as option}
+      <Radio
+        {name}
+        value={option.value}
+        {disabled}
+        {color}
+        bind:group={value}
+        on:change
+      >
+        {option.label}
+      </Radio>
+    {/each}
+  </div>
+
+  <ValidationError {error} />
+</fieldset>

package/dist/recipes/fields/RadioGroup.svelte.d.ts

@@ -0,0 +1,51 @@
+export default RadioGroup;
+type RadioGroup = SvelteComponent<{
+    class?: string | undefined;
+    color?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    required?: boolean | undefined;
+    hint?: string | undefined;
+    options?: any[] | undefined;
+    direction?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const RadioGroup: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    color?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    required?: boolean | undefined;
+    hint?: string | undefined;
+    options?: any[] | undefined;
+    direction?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/recipes/fields/RadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/RadioGroup.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgHA;;;;;;;;;;;;;;;;mBAA2N;6CAT9K,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/fields/SelectField.svelte

@@ -0,0 +1,60 @@
+<script>
+  /**
+   * SelectField - Select with hint text support
+   *
+   * Adds hint text capability to the Select primitive while maintaining
+   * its full API. Use this when you need hint text; otherwise use Select directly.
+   *
+   * @example
+   * <SelectField
+   *   label="Country"
+   *   items={countries}
+   *   bind:value={country}
+   *   error={$errors.country}
+   *   hint="Where your business is registered"
+   *   required
+   * />
+   */
+  import Select from '../../primitives/Input/Select.svelte';
+
+  // Select props (all pass-through)
+  export let value = '';
+  export let items = [];
+  export let placeholder = 'Select an option';
+  export let label = '';
+  export let required = false;
+  export let disabled = false;
+  export let error = '';
+  export let name = '';
+  export let id = '';
+  /** @type {'sm' | 'md' | 'lg'} */
+  export let size = 'md';
+
+  // Additional props
+  /** Hint text shown below input (hidden when error is shown) */
+  export let hint = '';
+
+  /** Additional class for the wrapper div */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class={className}>
+  <Select
+    {id}
+    {name}
+    {items}
+    {placeholder}
+    {label}
+    {disabled}
+    {required}
+    {error}
+    {size}
+    on:change
+    bind:value
+  />
+
+  {#if hint && !error}
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{hint}</p>
+  {/if}
+</div>

package/dist/recipes/fields/SelectField.svelte.d.ts

@@ -0,0 +1,53 @@
+export default SelectField;
+type SelectField = SvelteComponent<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    placeholder?: string | undefined;
+    items?: any[] | undefined;
+    hint?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SelectField: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    placeholder?: string | undefined;
+    items?: any[] | undefined;
+    hint?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=SelectField.svelte.d.ts.map

package/dist/recipes/fields/SelectField.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/SelectField.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqEA;;;;;;;;;;;;;;;;;mBAAgO;6CATnL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/fields/TextareaField.svelte

@@ -0,0 +1,69 @@
+<script>
+  /**
+   * TextareaField - Textarea with hint text support
+   *
+   * Adds hint text capability to the Textarea primitive while maintaining
+   * its full API. Use this when you need hint text; otherwise use Textarea directly.
+   *
+   * @example
+   * <TextareaField
+   *   label="Description"
+   *   bind:value={description}
+   *   error={$errors.description}
+   *   hint="Max 500 characters"
+   *   rows={6}
+   *   required
+   * />
+   */
+  import Textarea from '../../primitives/Input/Textarea.svelte';
+
+  // Textarea props (all pass-through)
+  export let value = '';
+  export let placeholder = '';
+  export let rows = 4;
+  export let disabled = false;
+  export let required = false;
+  export let readonly = false;
+  export let id = '';
+  export let name = '';
+  export let label = '';
+  export let error = '';
+  export let maxlength = null;
+  export let minlength = null;
+
+  // Additional props
+  /** Hint text shown below input (hidden when error is shown) */
+  export let hint = '';
+
+  /** Additional class for the wrapper div */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class={className}>
+  <Textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {required}
+    {readonly}
+    {label}
+    {error}
+    {maxlength}
+    {minlength}
+    on:input
+    on:change
+    on:blur
+    on:focus
+    on:keydown
+    on:keyup
+    on:keypress
+    bind:value
+  />
+
+  {#if hint && !error}
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{hint}</p>
+  {/if}
+</div>

package/dist/recipes/fields/TextareaField.svelte.d.ts

@@ -0,0 +1,69 @@
+export default TextareaField;
+type TextareaField = SvelteComponent<{
+    class?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    readonly?: boolean | undefined;
+    rows?: number | undefined;
+    hint?: string | undefined;
+}, {
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TextareaField: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    required?: boolean | undefined;
+    maxlength?: null | undefined;
+    minlength?: null | undefined;
+    placeholder?: string | undefined;
+    readonly?: boolean | undefined;
+    rows?: number | undefined;
+    hint?: string | undefined;
+}, {
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=TextareaField.svelte.d.ts.map

package/dist/recipes/fields/TextareaField.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/TextareaField.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA;;;;;;;;;;;;;;;;;;;;;;;;;mBAA6P;6CAThN,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/fields/ToggleField.svelte

@@ -0,0 +1,63 @@
+<script>
+  /**
+   * ToggleField - Toggle with label, description, and error support
+   *
+   * Wraps the Toggle primitive with form field features.
+   *
+   * @example
+   * <ToggleField
+   *   label="Email notifications"
+   *   description="Receive email updates about your account"
+   *   bind:checked={emailNotifications}
+   * />
+   */
+  import Toggle from '../../primitives/Toggle.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+
+  /** Whether the toggle is checked */
+  export let checked = false;
+
+  /** Whether the toggle is disabled */
+  export let disabled = false;
+
+  /** Size variant */
+  export let size = 'md';
+
+  /** Label text displayed next to the toggle */
+  export let label = '';
+
+  /** Description text shown below the label */
+  export let description = '';
+
+  /** Error message to display */
+  export let error = '';
+
+  /** Additional class for the wrapper div */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class={className}>
+  <div class="flex items-start justify-between gap-4">
+    {#if label || description}
+      <div class="flex flex-col">
+        {#if label}
+          <span class="text-sm font-medium text-gray-900 dark:text-white {error ? 'text-red-500' : ''}">
+            {label}
+          </span>
+        {/if}
+        {#if description}
+          <span class="text-sm text-gray-500 dark:text-gray-400">{description}</span>
+        {/if}
+      </div>
+    {/if}
+    <Toggle
+      {disabled}
+      {size}
+      bind:checked
+      on:change
+    />
+  </div>
+
+  <ValidationError {error} />
+</div>