@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/forms/form/form-element-field.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FormPathLeaves } from 'sveltekit-superforms';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { FormFieldState, FsSuperForm } from './form-types.js';
+/** One element of an array field (`tags[0]`), drawn as `FormField` is. */
+export type FormElementFieldProps<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, 'children'> & {
+    form: FsSuperForm<T>;
+    name: U;
+    children?: Snippet<[FormFieldState<T[U]>]>;
+};
+declare function $$render<T extends Record<string, unknown>, U extends FormPathLeaves<T>>(): {
+    props: FormElementFieldProps<T, U>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPathLeaves<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FormElementField: $$IsomorphicComponent;
+type FormElementField<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = InstanceType<typeof FormElementField<T, U>>;
+export default FormElementField;

package/dist/components/forms/form/form-field-errors.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`FormMessage`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: formsnap's FieldErrors for React's FormMessage: one line per
+    error, where React showed the first. Children, when given, render the
+    errors themselves. Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type * as FormPrimitive from 'formsnap'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /** The field's validation errors, linked to the control, nothing while it is valid. */
+  export type FormFieldErrorsProps = WithoutChild<FormPrimitive.FieldErrorsProps> & {
+    errorClasses?: string | null
+  }
+</script>
+
+<script lang="ts">
+  import * as FormPrimitiveRuntime from 'formsnap'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    errorClasses,
+    class: className,
+    children: content,
+    ...rest
+  }: FormFieldErrorsProps = $props()
+</script>
+
+<FormPrimitiveRuntime.FieldErrors
+  bind:ref
+  data-slot="form-field-errors"
+  class={cn('text-destructive text-sm font-medium', className)}
+  {...rest}
+>
+  {#snippet children({ errors, errorProps })}
+    {#if content}
+      {@render content({ errors, errorProps })}
+    {:else}
+      {#each errors as error (error)}
+        <div {...errorProps} class={cn(errorClasses)}>{error}</div>
+      {/each}
+    {/if}
+  {/snippet}
+</FormPrimitiveRuntime.FieldErrors>

package/dist/components/forms/form/form-field-errors.svelte.d.ts

@@ -0,0 +1,9 @@
+import type * as FormPrimitive from 'formsnap';
+import type { WithoutChild } from '../../../utils/types.js';
+/** The field's validation errors, linked to the control, nothing while it is valid. */
+export type FormFieldErrorsProps = WithoutChild<FormPrimitive.FieldErrorsProps> & {
+    errorClasses?: string | null;
+};
+declare const FormFieldErrors: import("svelte").Component<FormFieldErrorsProps, {}, "ref">;
+type FormFieldErrors = ReturnType<typeof FormFieldErrors>;
+export default FormFieldErrors;

package/dist/components/forms/form/form-field.svelte

@@ -0,0 +1,56 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`FormItem`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: formsnap's Field for react-hook-form's FormField and FormItem in one:
+    it registers `name` on the superforms `form` and draws React's FormItem
+    `div`, handing its children the field's value, errors and constraints.
+    Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { FormPath } from 'sveltekit-superforms'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { FormFieldState, FsSuperForm } from './form-types.js'
+
+  /**
+   * One field of a superforms form: label, control, description and errors,
+   * wired to `name`, so the control is labelled, described and marked invalid
+   * from the form's validation. Reach for `Field` directly for a form with no
+   * superforms behind it; reach for this where one already is.
+   *
+   * SvelteKit only: superforms imports `$app/*`, which exists nowhere else.
+   */
+  export type FormFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = Omit<
+    WithElementRef<HTMLAttributes<HTMLDivElement>>,
+    'children'
+  > & {
+    form: FsSuperForm<T>
+    name: U
+    children?: Snippet<[FormFieldState<T[U]>]>
+  }
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+  import * as FormPrimitive from 'formsnap'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    form,
+    name,
+    class: className,
+    children: content,
+    ...rest
+  }: FormFieldProps<T, U> = $props()
+</script>
+
+<FormPrimitive.Field {form} {name}>
+  {#snippet children({ constraints, errors, tainted, value })}
+    <div bind:this={ref} data-slot="form-item" class={cn('space-y-2', className)} {...rest}>
+      {@render content?.({ constraints, errors, tainted, value: value as T[U] })}
+    </div>
+  {/snippet}
+</FormPrimitive.Field>

package/dist/components/forms/form/form-field.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FormPath } from 'sveltekit-superforms';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { FormFieldState, FsSuperForm } from './form-types.js';
+/**
+ * One field of a superforms form: label, control, description and errors,
+ * wired to `name`, so the control is labelled, described and marked invalid
+ * from the form's validation. Reach for `Field` directly for a form with no
+ * superforms behind it; reach for this where one already is.
+ *
+ * SvelteKit only: superforms imports `$app/*`, which exists nowhere else.
+ */
+export type FormFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, 'children'> & {
+    form: FsSuperForm<T>;
+    name: U;
+    children?: Snippet<[FormFieldState<T[U]>]>;
+};
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
+    props: FormFieldProps<T, U>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FormField: $$IsomorphicComponent;
+type FormField<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormField<T, U>>;
+export default FormField;

package/dist/components/forms/form/form-fieldset.svelte

@@ -0,0 +1,41 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`FormFieldset`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: formsnap's Fieldset, for a group of controls under one
+    name (a radio group, a set of checkboxes). Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type * as FormPrimitive from 'formsnap'
+  import type { FormPath } from 'sveltekit-superforms'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /** A group of controls under one name, captioned by `FormLegend`. */
+  export type FormFieldsetProps<
+    T extends Record<string, unknown>,
+    U extends FormPath<T>,
+  > = WithoutChild<FormPrimitive.FieldsetProps<T, U>>
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+  import * as FormPrimitiveRuntime from 'formsnap'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    form,
+    name,
+    class: className,
+    ...rest
+  }: FormFieldsetProps<T, U> = $props()
+</script>
+
+<FormPrimitiveRuntime.Fieldset
+  bind:ref
+  {form}
+  {name}
+  data-slot="form-fieldset"
+  class={cn('space-y-2', className)}
+  {...rest}
+/>

package/dist/components/forms/form/form-fieldset.svelte.d.ts

@@ -0,0 +1,29 @@
+import type * as FormPrimitive from 'formsnap';
+import type { FormPath } from 'sveltekit-superforms';
+import type { WithoutChild } from '../../../utils/types.js';
+/** A group of controls under one name, captioned by `FormLegend`. */
+export type FormFieldsetProps<T extends Record<string, unknown>, U extends FormPath<T>> = WithoutChild<FormPrimitive.FieldsetProps<T, U>>;
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
+    props: FormFieldsetProps<T, U>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FormFieldset: $$IsomorphicComponent;
+type FormFieldset<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormFieldset<T, U>>;
+export default FormFieldset;

package/dist/components/forms/form/form-label.svelte

@@ -0,0 +1,47 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`FormLabel`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: formsnap's Label, drawn as FieldLabel: React's `required`
+    asterisk, with FieldLabel's sr-only "(required)" beside it. It turns red
+    on formsnap's `data-fs-error`, where React read react-hook-form's error.
+    Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type * as FormPrimitive from 'formsnap'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /** The field's label, pointed at its control and red while the field is invalid. */
+  export type FormLabelProps = WithoutChild<FormPrimitive.LabelProps> & {
+    /** Adds the asterisk that marks a mandatory field. */
+    required?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import * as FormPrimitiveRuntime from 'formsnap'
+
+  import { cn } from '../../../utils/cn.js'
+  import FieldLabel from '../field/field-label.svelte'
+
+  let {
+    ref = $bindable(null),
+    required = false,
+    class: className,
+    children,
+    ...rest
+  }: FormLabelProps = $props()
+</script>
+
+<FormPrimitiveRuntime.Label bind:ref {...rest}>
+  {#snippet child({ props })}
+    <FieldLabel
+      {...props}
+      {required}
+      data-slot="form-label"
+      class={cn('data-[fs-error]:text-destructive', className)}
+    >
+      {@render children?.()}
+    </FieldLabel>
+  {/snippet}
+</FormPrimitiveRuntime.Label>

package/dist/components/forms/form/form-label.svelte.d.ts

@@ -0,0 +1,10 @@
+import type * as FormPrimitive from 'formsnap';
+import type { WithoutChild } from '../../../utils/types.js';
+/** The field's label, pointed at its control and red while the field is invalid. */
+export type FormLabelProps = WithoutChild<FormPrimitive.LabelProps> & {
+    /** Adds the asterisk that marks a mandatory field. */
+    required?: boolean;
+};
+declare const FormLabel: import("svelte").Component<FormLabelProps, {}, "ref">;
+type FormLabel = ReturnType<typeof FormLabel>;
+export default FormLabel;

package/dist/components/forms/form/form-legend.svelte

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`FormLegend`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: formsnap's Legend, which React's form had none of; classes from shadcn-svelte. Ships from the `mise/form` entry, SvelteKit only (round 6 plan, R6-5).
+-->
+<script lang="ts" module>
+  import type * as FormPrimitive from 'formsnap'
+
+  import type { WithoutChild } from '../../../utils/types.js'
+
+  /** text-destructive:The caption of a `FormFieldset`, red while the group is invalid. */
+  export type FormLegendProps = WithoutChild<FormPrimitive.LegendProps>
+</script>
+
+<script lang="ts">
+  import * as FormPrimitiveRuntime from 'formsnap'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: FormLegendProps = $props()
+</script>
+
+<FormPrimitiveRuntime.Legend
+  bind:ref
+  data-slot="form-legend"
+  class={cn('text-sm leading-none font-medium data-[fs-error]', className)}
+  {...rest}
+/>

package/dist/components/forms/form/form-legend.svelte.d.ts

@@ -0,0 +1,7 @@
+import type * as FormPrimitive from 'formsnap';
+import type { WithoutChild } from '../../../utils/types.js';
+/** text-destructive:The caption of a `FormFieldset`, red while the group is invalid. */
+export type FormLegendProps = WithoutChild<FormPrimitive.LegendProps>;
+declare const FormLegend: import("svelte").Component<Omit<FormPrimitive.LegendProps, "child">, {}, "ref">;
+type FormLegend = ReturnType<typeof FormLegend>;
+export default FormLegend;

package/dist/components/forms/form/form-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Origin: the React package 2.23.0 `form.tsx` (`useFormField`'s state)
+ * Diverged: the field state formsnap hands a FormField's children, named so
+ *   the parts can share it.
+ */
+import type { FsSuperForm } from 'formsnap';
+export type { FsSuperForm };
+export type FormFieldState<V> = {
+    value: V;
+    errors: string[];
+    tainted: boolean;
+    constraints: Record<string, unknown>;
+};

package/dist/components/forms/form/form-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/form/form.svelte

@@ -0,0 +1,38 @@
+<!--
+  Origin: the React package 2.23.0 `form.tsx` (`Form`), itself shadcn/ui new-york `form`
+  Svelte: shadcn-svelte `form`
+  Diverged: React's Form was react-hook-form's FormProvider, the context its
+    fields read. superforms needs no provider (each FormField takes the `form`),
+    so Form is the `<form>` element with superforms' `enhance` applied and
+    `method="POST"`, the one piece every superforms form repeats. shadcn-svelte
+    has no such part. Ships from the `mise/form` entry, SvelteKit only (round 6
+    plan, R6-5).
+-->
+<script lang="ts" module>
+  import type { HTMLFormAttributes } from 'svelte/elements'
+  import type { SuperForm } from 'sveltekit-superforms'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * The `<form>` around a superforms form: `method="POST"` and superforms'
+   * `enhance`, so submitting validates on the client and posts to the page's
+   * action, or stays in the browser in SPA mode.
+   *
+   * SvelteKit only: superforms imports `$app/*`, which exists nowhere else.
+   * Reach for `Field` directly for a form with no superforms behind it.
+   */
+  export type FormProps<T extends Record<string, unknown>> = WithElementRef<HTMLFormAttributes> & {
+    form: SuperForm<T>
+  }
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+  let { ref = $bindable(null), form, method = 'POST', children, ...rest }: FormProps<T> = $props()
+
+  const enhance = $derived(form.enhance)
+</script>
+
+<form bind:this={ref} {method} data-slot="form" use:enhance {...rest}>
+  {@render children?.()}
+</form>

package/dist/components/forms/form/form.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+import type { SuperForm } from 'sveltekit-superforms';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The `<form>` around a superforms form: `method="POST"` and superforms'
+ * `enhance`, so submitting validates on the client and posts to the page's
+ * action, or stays in the browser in SPA mode.
+ *
+ * SvelteKit only: superforms imports `$app/*`, which exists nowhere else.
+ * Reach for `Field` directly for a form with no superforms behind it.
+ */
+export type FormProps<T extends Record<string, unknown>> = WithElementRef<HTMLFormAttributes> & {
+    form: SuperForm<T>;
+};
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: FormProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Form: $$IsomorphicComponent;
+type Form<T extends Record<string, unknown>> = InstanceType<typeof Form<T>>;
+export default Form;

package/dist/components/forms/form/index.d.ts

@@ -0,0 +1,11 @@
+export { Control as FormControl, type ControlProps as FormControlProps } from 'formsnap';
+export { default as Form, type FormProps } from './form.svelte';
+export { default as FormButton, type FormButtonProps } from './form-button.svelte';
+export { default as FormDescription, type FormDescriptionProps } from './form-description.svelte';
+export { default as FormElementField, type FormElementFieldProps, } from './form-element-field.svelte';
+export { default as FormField, type FormFieldProps } from './form-field.svelte';
+export { default as FormFieldErrors, type FormFieldErrorsProps } from './form-field-errors.svelte';
+export { default as FormFieldset, type FormFieldsetProps } from './form-fieldset.svelte';
+export { default as FormLabel, type FormLabelProps } from './form-label.svelte';
+export { default as FormLegend, type FormLegendProps } from './form-legend.svelte';
+export type { FormFieldState } from './form-types.js';

package/dist/components/forms/form/index.js

@@ -0,0 +1,10 @@
+export { Control as FormControl } from 'formsnap';
+export { default as Form } from './form.svelte';
+export { default as FormButton } from './form-button.svelte';
+export { default as FormDescription } from './form-description.svelte';
+export { default as FormElementField, } from './form-element-field.svelte';
+export { default as FormField } from './form-field.svelte';
+export { default as FormFieldErrors } from './form-field-errors.svelte';
+export { default as FormFieldset } from './form-fieldset.svelte';
+export { default as FormLabel } from './form-label.svelte';
+export { default as FormLegend } from './form-legend.svelte';

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

@@ -0,0 +1 @@
+export { default as Input, type InputProps } from './input.svelte';

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

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

package/dist/components/forms/input/input.svelte

@@ -0,0 +1,58 @@
+<!--
+  Origin: the React package 2.23.0 `input.tsx`, itself shadcn/ui new-york `input`
+  Svelte: shadcn-svelte `input`
+  Diverged: `bind:value` and, for type="file", `bind:files`, as shadcn-svelte
+    has them. Classes unchanged.
+-->
+<script lang="ts" module>
+  import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  type InputType = Exclude<HTMLInputTypeAttribute, 'file'>
+
+  export type InputProps = WithElementRef<
+    Omit<HTMLInputAttributes, 'type'> &
+      ({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+  >
+
+  const INPUT_CLASS = [
+    'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-input/50 h-9 w-full min-w-0 rounded-2xl border border-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  ]
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    files = $bindable(),
+    type,
+    class: className,
+    ...rest
+  }: InputProps = $props()
+</script>
+
+{#if type === 'file'}
+  <input
+    bind:this={ref}
+    bind:files
+    bind:value
+    type="file"
+    data-slot="input"
+    class={cn(INPUT_CLASS, className)}
+    {...rest}
+  >
+{:else}
+  <input
+    bind:this={ref}
+    bind:value
+    {type}
+    data-slot="input"
+    class={cn(INPUT_CLASS, className)}
+    {...rest}
+  >
+{/if}

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

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

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

@@ -0,0 +1,7 @@
+export { default as InputGroup, type InputGroupProps } from './input-group.svelte';
+export { default as InputGroupAddon, type InputGroupAddonProps } from './input-group-addon.svelte';
+export { default as InputGroupButton, type InputGroupButtonProps, } from './input-group-button.svelte';
+export { default as InputGroupInput, type InputGroupInputProps } from './input-group-input.svelte';
+export { default as InputGroupText, type InputGroupTextProps } from './input-group-text.svelte';
+export { default as InputGroupTextarea, type InputGroupTextareaProps, } from './input-group-textarea.svelte';
+export { type InputGroupAddonAlign, type InputGroupButtonSize, inputGroupAddonVariants, inputGroupButtonVariants, } from './input-group-variants.js';

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

@@ -0,0 +1,7 @@
+export { default as InputGroup } from './input-group.svelte';
+export { default as InputGroupAddon } from './input-group-addon.svelte';
+export { default as InputGroupButton, } from './input-group-button.svelte';
+export { default as InputGroupInput } from './input-group-input.svelte';
+export { default as InputGroupText } from './input-group-text.svelte';
+export { default as InputGroupTextarea, } from './input-group-textarea.svelte';
+export { inputGroupAddonVariants, inputGroupButtonVariants, } from './input-group-variants.js';

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

@@ -0,0 +1,51 @@
+<!--
+  Origin: the React package 2.23.0 `input-group.tsx` (`InputGroupAddon`), itself shadcn/ui new-york `input-group`
+  Svelte: shadcn-svelte `input-group`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { InputGroupAddonAlign } from './input-group-variants.js'
+
+  /** A click on the addon focuses the group's input or textarea, unless it landed on a button. */
+  export type InputGroupAddonProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { inputGroupAddonVariants } from './input-group-variants.js'
+
+  let {
+    ref = $bindable(null),
+    align = 'inline-start',
+    class: className,
+    children,
+    onclick,
+    ...rest
+  }: InputGroupAddonProps = $props()
+
+  function focusControl(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+    onclick?.(event)
+    if ((event.target as HTMLElement).closest('button')) return
+
+    event.currentTarget.parentElement?.querySelector<HTMLElement>('input, textarea')?.focus()
+  }
+</script>
+
+<!-- biome-ignore lint/a11y/useKeyWithClickEvents: forwards focus to the group's control, which is itself keyboard-operable -->
+<!-- biome-ignore lint/a11y/useSemanticElements: a styling wrapper carrying a grouping role, as upstream -->
+<div
+  bind:this={ref}
+  role="group"
+  data-slot="input-group-addon"
+  data-align={align}
+  class={cn(inputGroupAddonVariants({ align }), className)}
+  onclick={focusControl}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { InputGroupAddonAlign } from './input-group-variants.js';
+/** A click on the addon focuses the group's input or textarea, unless it landed on a button. */
+export type InputGroupAddonProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<InputGroupAddonProps, {}, "ref">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;