@getmicdrop/svelte-components 5.1.3 → 5.2.1

package/dist/recipes/fields/RadioGroup.svelte

@@ -1,62 +1,59 @@
-<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
-   * />
-   */
+<script lang="ts">
   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';
+  interface RadioOption {
+    value: string;
+    label: string;
+  }
+
+  interface Props {
+    /** Currently selected value */
+    value?: string;
+    /** Radio options array */
+    options?: RadioOption[];
+    /** Name attribute for the radio group */
+    name?: string;
+    /** Whether all radios are disabled */
+    disabled?: boolean;
+    /** Color variant for radios */
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    /** Group label text */
+    label?: string;
+    /** Hint text shown below label */
+    hint?: string;
+    /** Error message to display */
+    error?: string;
+    /** Show required indicator */
+    required?: boolean;
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Additional class for the fieldset */
+    class?: string;
+    /** Change handler */
+    onchange?: (detail: { value: string }) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    options = [],
+    name = '',
+    disabled = false,
+    color = 'blue',
+    label = '',
+    hint = '',
+    error = '',
+    required = false,
+    direction = 'vertical',
+    class: className = '',
+    onchange
+  }: Props = $props();
+
+  let layoutClass = $derived(
+    direction === 'horizontal'
+      ? 'flex flex-wrap gap-4'
+      : 'flex flex-col gap-2'
+  );
 </script>
 
 <fieldset class={className}>
@@ -78,7 +75,7 @@
         {disabled}
         {color}
         bind:group={value}
-        on:change
+        {onchange}
       >
         {option.label}
       </Radio>

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

@@ -1,51 +1,36 @@
-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;
+interface RadioOption {
+    value: string;
+    label: string;
+}
+interface Props {
+    /** Currently selected value */
+    value?: string;
+    /** Radio options array */
+    options?: RadioOption[];
+    /** Name attribute for the radio group */
+    name?: string;
+    /** Whether all radios are disabled */
+    disabled?: boolean;
+    /** Color variant for radios */
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    /** Group label text */
+    label?: string;
+    /** Hint text shown below label */
+    hint?: string;
+    /** Error message to display */
+    error?: string;
+    /** Show required indicator */
+    required?: boolean;
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Additional class for the fieldset */
+    class?: string;
+    /** Change handler */
+    onchange?: (detail: {
+        value: string;
+    }) => void;
 }
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
 //# sourceMappingURL=RadioGroup.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/RadioGroup.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClE,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAChD;AAqDH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/recipes/fields/SelectField.svelte

@@ -1,42 +1,55 @@
-<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
-   * />
-   */
+<script lang="ts">
   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';
+  interface SelectItem {
+    value: string;
+    name: string;
+  }
 
-  // Additional props
-  /** Hint text shown below input (hidden when error is shown) */
-  export let hint = '';
+  interface Props {
+    /** Current value */
+    value?: string;
+    /** Select items array */
+    items?: SelectItem[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Whether required */
+    required?: boolean;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Input name */
+    name?: string;
+    /** Input id */
+    id?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Hint text shown below input */
+    hint?: string;
+    /** Additional class for the wrapper div */
+    class?: string;
+    /** Change handler */
+    onchange?: (e: Event) => void;
+  }
 
-  /** Additional class for the wrapper div */
-  let className = '';
-  export { className as class };
+  let {
+    value = $bindable(''),
+    items = [],
+    placeholder = 'Select an option',
+    label = '',
+    required = false,
+    disabled = false,
+    error = '',
+    name = '',
+    id = '',
+    size = 'md',
+    hint = '',
+    class: className = '',
+    onchange
+  }: Props = $props();
 </script>
 
 <div class={className}>
@@ -50,7 +63,7 @@
     {required}
     {error}
     {size}
-    on:change
+    {onchange}
     bind:value
   />
 

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

@@ -1,53 +1,36 @@
-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;
+interface SelectItem {
+    value: string;
+    name: string;
+}
+interface Props {
+    /** Current value */
+    value?: string;
+    /** Select items array */
+    items?: SelectItem[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Whether required */
+    required?: boolean;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Input name */
+    name?: string;
+    /** Input id */
+    id?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Hint text shown below input */
+    hint?: string;
+    /** Additional class for the wrapper div */
+    class?: string;
+    /** Change handler */
+    onchange?: (e: Event) => void;
 }
+declare const SelectField: import("svelte").Component<Props, {}, "value">;
+type SelectField = ReturnType<typeof SelectField>;
+export default SelectField;
 //# sourceMappingURL=SelectField.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"SelectField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/SelectField.svelte.ts"],"names":[],"mappings":"AAME,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAiCH,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/recipes/fields/TextareaField.svelte

@@ -1,43 +1,74 @@
-<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
-   * />
-   */
+<script lang="ts">
   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;
+  interface Props {
+    /** Current value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Number of rows */
+    rows?: number;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Whether required */
+    required?: boolean;
+    /** Whether readonly */
+    readonly?: boolean;
+    /** Input id */
+    id?: string;
+    /** Input name */
+    name?: string;
+    /** Label text */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Max character length */
+    maxlength?: number | null;
+    /** Min character length */
+    minlength?: number | null;
+    /** Hint text shown below input */
+    hint?: string;
+    /** Additional class for the wrapper div */
+    class?: string;
+    /** Input handler */
+    oninput?: (e: Event) => void;
+    /** Change handler */
+    onchange?: (e: Event) => void;
+    /** Blur handler */
+    onblur?: (e: FocusEvent) => void;
+    /** Focus handler */
+    onfocus?: (e: FocusEvent) => void;
+    /** Keydown handler */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Keyup handler */
+    onkeyup?: (e: KeyboardEvent) => void;
+    /** Keypress handler */
+    onkeypress?: (e: KeyboardEvent) => void;
+  }
 
-  // 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 };
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    rows = 4,
+    disabled = false,
+    required = false,
+    readonly = false,
+    id = '',
+    name = '',
+    label = '',
+    error = '',
+    maxlength = null,
+    minlength = null,
+    hint = '',
+    class: className = '',
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onkeydown,
+    onkeyup,
+    onkeypress
+  }: Props = $props();
 </script>
 
 <div class={className}>
@@ -53,13 +84,13 @@
     {error}
     {maxlength}
     {minlength}
-    on:input
-    on:change
-    on:blur
-    on:focus
-    on:keydown
-    on:keyup
-    on:keypress
+    {oninput}
+    {onchange}
+    {onblur}
+    {onfocus}
+    {onkeydown}
+    {onkeyup}
+    {onkeypress}
     bind:value
   />