@ims360/svelte-ivory 0.1.15 → 0.2.1

package/dist/components/inputs/Input.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface CommonProps {
+    id?: string;
+    class?: ClassValue;
+    style?: string;
+    label?: string;
+    disabled?: boolean;
+}
+export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
+    form: RemoteFormField<T>;
+}
+export declare const INPUT_UNSET_OUTLINE = "border-none outline-none ring-transparent focus:outline-none";
+interface Props<K extends RemoteFormFieldValue> extends CommonProps {
+    children: Snippet<[{
+        class: string;
+        id: string;
+        disabled?: boolean;
+    }]>;
+    fixTitle?: boolean;
+    form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
+}
+declare function $$render<T extends RemoteFormFieldValue>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RemoteFormFieldValue> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RemoteFormFieldValue>(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 RemoteFormFieldValue>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Input: $$IsomorphicComponent;
+type Input<T extends RemoteFormFieldValue> = InstanceType<typeof Input<T>>;
+export default Input;
+//# sourceMappingURL=Input.svelte.d.ts.map

package/dist/components/inputs/Input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/Input.svelte.ts"],"names":[],"mappings":"AAMI,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,UAAU,WAAW;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,WAAW;IAC3E,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,iEACkC,CAAC;AAEnE,UAAU,KAAK,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,WAAW;IAC/D,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CACtD;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS,oBAAoB;WAiEzB,KAAK,CAAC,CAAC,CAAC;;;;;EAA4E;AACjH,cAAM,iBAAiB,CAAC,CAAC,SAAS,oBAAoB;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,oBAAoB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACzZ,CAAC,CAAC,SAAS,oBAAoB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,KAAK,EAAE,qBAAmC,CAAC;AAC/B,KAAK,KAAK,CAAC,CAAC,SAAS,oBAAoB,IAAI,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7E,eAAe,KAAK,CAAC"}

package/dist/components/inputs/NumberInput.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import InputBase, { type InputProps } from './Input.svelte';
+
+    type Props = InputProps<number> & {
+        min?: number;
+        max?: number;
+        step?: number;
+    };
+
+    let { min = undefined, step = 1, max, ...props }: Props = $props();
+</script>
+
+<InputBase {...props}>
+    {#snippet children(inputProps)}
+        <input {...inputProps} {...props.form.as?.('number')} {min} {max} {step} />
+    {/snippet}
+</InputBase>

package/dist/components/inputs/NumberInput.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type InputProps } from './Input.svelte';
+type Props = InputProps<number> & {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+declare const NumberInput: import("svelte").Component<Props, {}, "">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;
+//# sourceMappingURL=NumberInput.svelte.d.ts.map

package/dist/components/inputs/NumberInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/NumberInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGxD,KAAK,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAgBN,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/inputs/PasswordCreateInput.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+    import { CircleAlert, CircleCheck } from '@lucide/svelte';
+    import { Popover } from '../layout';
+    import type { InputProps } from './Input.svelte';
+    import PasswordInput from './PasswordInput.svelte';
+
+    export interface PasswordRequirement {
+        re: RegExp;
+        label: string;
+    }
+
+    export interface PasswordCreateInputProps extends InputProps<string> {
+        requirements: PasswordRequirement[];
+    }
+</script>
+
+<script lang="ts">
+    let { class: clazz = '', requirements, ...props }: PasswordCreateInputProps = $props();
+
+    let popover = $state<Popover>();
+    let target = $state<HTMLElement>();
+
+    const value = $derived(props.form.value());
+</script>
+
+<div bind:this={target} class={['bg-inherit ', clazz]}>
+    <PasswordInput {...props} newPassword onfocusin={popover?.open} onfocusout={popover?.close} />
+</div>
+
+<Popover
+    bind:this={popover}
+    {target}
+    style="min-width: {target?.getBoundingClientRect().width}px;"
+    class="py-3"
+    placement="top"
+>
+    <div class="bg-surface-50-950 flex w-full flex-col gap-2 rounded p-4 shadow-lg">
+        {#each requirements as requirement (requirement.re)}
+            {@render pwRequirement(requirement.re.test(value), requirement.label)}
+        {/each}
+    </div>
+</Popover>
+
+{#snippet pwRequirement(matches: boolean, label: string)}
+    <div
+        class={[
+            'flex flex-row items-center gap-2',
+            matches ? 'text-success-700-300' : 'text-error-500'
+        ]}
+    >
+        {#if matches}
+            <CircleCheck />
+        {:else}
+            <CircleAlert />
+        {/if}
+        <p>
+            {label}
+        </p>
+    </div>
+{/snippet}

package/dist/components/inputs/PasswordCreateInput.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { InputProps } from './Input.svelte';
+export interface PasswordRequirement {
+    re: RegExp;
+    label: string;
+}
+export interface PasswordCreateInputProps extends InputProps<string> {
+    requirements: PasswordRequirement[];
+}
+declare const PasswordCreateInput: import("svelte").Component<PasswordCreateInputProps, {}, "">;
+type PasswordCreateInput = ReturnType<typeof PasswordCreateInput>;
+export default PasswordCreateInput;
+//# sourceMappingURL=PasswordCreateInput.svelte.d.ts.map

package/dist/components/inputs/PasswordCreateInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordCreateInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/PasswordCreateInput.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,mBAAmB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,wBAAyB,SAAQ,UAAU,CAAC,MAAM,CAAC;IAChE,YAAY,EAAE,mBAAmB,EAAE,CAAC;CACvC;AA2CL,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/inputs/PasswordInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { InputProps } from './Input.svelte';
+    import Input from './Input.svelte';
+
+    type Props = InputProps<string> & {
+        newPassword?: boolean;
+        onfocusin?: () => void;
+        onfocusout?: () => void;
+    };
+
+    let { newPassword = false, onfocusin, onfocusout, ...props }: Props = $props();
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        <input
+            {...inputProps}
+            {...props.form.as?.('password')}
+            type="password"
+            autocapitalize="off"
+            autocomplete={newPassword ? 'new-password' : 'current-password'}
+            required
+            {onfocusin}
+            {onfocusout}
+        />
+    {/snippet}
+</Input>

package/dist/components/inputs/PasswordInput.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { InputProps } from './Input.svelte';
+type Props = InputProps<string> & {
+    newPassword?: boolean;
+    onfocusin?: () => void;
+    onfocusout?: () => void;
+};
+declare const PasswordInput: import("svelte").Component<Props, {}, "">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;
+//# sourceMappingURL=PasswordInput.svelte.d.ts.map

package/dist/components/inputs/PasswordInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI7C,KAAK,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAiBN,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/inputs/TextInput.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import Input, { type InputProps } from './Input.svelte';
+
+    let { ...props }: InputProps<string> = $props();
+
+    let inputElement = $state<HTMLInputElement>();
+    export function focus() {
+        inputElement?.focus();
+    }
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        <input {...inputProps} {...props.form.as?.('text')} bind:this={inputElement} />
+    {/snippet}
+</Input>

package/dist/components/inputs/TextInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type InputProps } from './Input.svelte';
+declare const TextInput: import("svelte").Component<InputProps<string>, {
+    focus: () => void;
+}, "">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;
+//# sourceMappingURL=TextInput.svelte.d.ts.map

package/dist/components/inputs/TextInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/TextInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqBxD,QAAA,MAAM,SAAS;;MAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/inputs/ToggleInput.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { Toggle } from '../basic';
+    import type { InputProps } from './Input.svelte';
+    import FormIssues from './issues/FormIssues.svelte';
+
+    let { form, class: clazz, label, ...props }: InputProps<boolean> = $props();
+
+    const value = $derived(form.value());
+</script>
+
+<div class={['flex flex-col gap-2', clazz]} {...props}>
+    <input {...form.as('checkbox')} class="hidden" {value} />
+    <button
+        type="button"
+        class="flex flex-row items-center gap-2"
+        onclick={() => {
+            form.set(!value);
+        }}
+    >
+        <Toggle {value} />
+        {label}
+    </button>
+    <FormIssues issues={form.issues()} />
+</div>

package/dist/components/inputs/ToggleInput.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { InputProps } from './Input.svelte';
+declare const ToggleInput: import("svelte").Component<InputProps<boolean>, {}, "">;
+type ToggleInput = ReturnType<typeof ToggleInput>;
+export default ToggleInput;
+//# sourceMappingURL=ToggleInput.svelte.d.ts.map

package/dist/components/inputs/ToggleInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/ToggleInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA0BjD,QAAA,MAAM,WAAW,yDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/inputs/index.d.ts

@@ -1,2 +1,15 @@
+export { default as CheckboxInput } from './CheckboxInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as DateInput } from './DateInput.svelte';
+export { default as EmailInput } from './EmailInput.svelte';
+export { default as FileInput, type FileInputProps } from './FileInput.svelte';
 export { default as FullscreenDropzone, type FullscreenDropzoneProps } from './FullscreenDropzone.svelte';
+export { default as Input, type InputProps } from './Input.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as PasswordCreateInput, type PasswordCreateInputProps, type PasswordRequirement } from './PasswordCreateInput.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as Select } from './select/Select.svelte';
+export { default as SelectOption } from './select/SelectOption.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as ToggleInput } from './ToggleInput.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/inputs/index.js

@@ -1 +1,14 @@
+export { default as CheckboxInput } from './CheckboxInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as DateInput } from './DateInput.svelte';
+export { default as EmailInput } from './EmailInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as FullscreenDropzone } from './FullscreenDropzone.svelte';
+export { default as Input } from './Input.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as PasswordCreateInput } from './PasswordCreateInput.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as Select } from './select/Select.svelte';
+export { default as SelectOption } from './select/SelectOption.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as ToggleInput } from './ToggleInput.svelte';

package/dist/components/inputs/issues/FormIssues.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { theme } from '../../../theme.svelte';
+    import { merge } from '../../../utils/merge';
+    import { TriangleAlert } from '@lucide/svelte';
+    import type { RemoteFormIssue } from '@sveltejs/kit';
+    import type { ClassValue } from 'svelte/elements';
+    import { slide } from 'svelte/transition';
+
+    interface Props {
+        issues?: RemoteFormIssue[];
+        class?: ClassValue;
+    }
+
+    let { issues = [], class: clazz }: Props = $props();
+</script>
+
+{#each issues as err, i (i)}
+    <div
+        class={merge(
+            'text-error-500 flex h-fit w-full flex-row items-start justify-center gap-2 overflow-hidden pl-1',
+            theme.current.input?.issues?.issue?.class,
+            clazz
+        )}
+        transition:slide={{ axis: 'y' }}
+    >
+        <TriangleAlert size="18" class="my-auto" />
+        <p class="flex grow">
+            {#if theme.current.input?.issues?.issue?.label}
+                {theme.current.input?.issues?.issue?.label(err)}
+            {:else}
+                {err.message}
+            {/if}
+        </p>
+    </div>
+{/each}

package/dist/components/inputs/issues/FormIssues.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { RemoteFormIssue } from '@sveltejs/kit';
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    issues?: RemoteFormIssue[];
+    class?: ClassValue;
+}
+declare const FormIssues: import("svelte").Component<Props, {}, "">;
+type FormIssues = ReturnType<typeof FormIssues>;
+export default FormIssues;
+//# sourceMappingURL=FormIssues.svelte.d.ts.map

package/dist/components/inputs/issues/FormIssues.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormIssues.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/inputs/issues/FormIssues.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,UAAU,KAAK;IACX,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAgCL,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/inputs/select/Select.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+    import { Popover } from '../../layout';
+    import { ChevronDown } from '@lucide/svelte';
+    import { createContext, type Snippet } from 'svelte';
+    import Input, { type InputProps } from '../Input.svelte';
+
+    export interface SelectContext {
+        select: (value: string, snippet: Snippet) => void;
+        value: string | undefined | null;
+    }
+
+    export const [getSelectContext, setSelectContext] = createContext<SelectContext>();
+</script>
+
+<script lang="ts">
+    interface Props extends InputProps<string> {
+        placeholder?: string;
+        children: Snippet;
+    }
+
+    let { placeholder = '', children, ...props }: Props = $props();
+
+    let button = $state<HTMLButtonElement | undefined>();
+    let buttonWidth = $state<number>(200);
+    let popover = $state<Popover>();
+    let selectedSnippet = $state<Snippet>();
+
+    const value = $derived(props.form.value());
+
+    function select(newValue: string, snippet: Snippet) {
+        selectedSnippet = snippet;
+        if (newValue === value) return;
+        props.form.set(newValue);
+        popover?.close();
+    }
+
+    setSelectContext({
+        select,
+        get value() {
+            return value;
+        }
+    });
+</script>
+
+<Input {...props}>
+    <button
+        type="button"
+        class="flex h-14 w-full flex-row items-center justify-start gap-2 px-4 py-2"
+        onclick={popover?.toggle}
+        bind:this={button}
+        bind:clientWidth={buttonWidth}
+    >
+        {#if selectedSnippet}
+            {@render selectedSnippet()}
+        {:else}
+            {placeholder}
+        {/if}
+        <ChevronDown class={['ml-auto transition-all', popover?.isOpen() && 'rotate-180']} />
+    </button>
+</Input>
+
+<Popover
+    bind:this={popover}
+    class="bg-surface-50-950 mt-2 flex flex-col gap-2 rounded p-2 shadow"
+    style={`min-width: ${buttonWidth}px`}
+    target={button}
+>
+    {@render children()}
+</Popover>

package/dist/components/inputs/select/Select.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+import { type InputProps } from '../Input.svelte';
+export interface SelectContext {
+    select: (value: string, snippet: Snippet) => void;
+    value: string | undefined | null;
+}
+export declare const getSelectContext: () => SelectContext, setSelectContext: (context: SelectContext) => SelectContext;
+interface Props extends InputProps<string> {
+    placeholder?: string;
+    children: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/components/inputs/select/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/inputs/select/Select.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;CACpC;AAED,eAAO,MAAO,gBAAgB,uBAAE,gBAAgB,2CAAkC,CAAC;AAEnF,UAAU,KAAM,SAAQ,UAAU,CAAC,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACrB;AA+CL,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/inputs/select/SelectOption.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { getSelectContext } from './Select.svelte';
+
+    interface Props {
+        class?: ClassValue;
+        value: string;
+        children: Snippet;
+    }
+
+    let {
+        class: clazz = 'flex flex-row justify-start items-center gap-2',
+        value,
+        children
+    }: Props = $props();
+
+    const context = getSelectContext();
+
+    // this needs to run in an effect so we can update the value from outside the component
+    $effect(function setValue() {
+        if (context.value === value) context.select(value, children);
+    });
+</script>
+
+<button
+    type="button"
+    class={[clazz]}
+    onclick={() => {
+        context.select(value, children);
+    }}
+>
+    {@render children()}
+</button>

package/dist/components/inputs/select/SelectOption.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    class?: ClassValue;
+    value: string;
+    children: Snippet;
+}
+declare const SelectOption: import("svelte").Component<Props, {}, "">;
+type SelectOption = ReturnType<typeof SelectOption>;
+export default SelectOption;
+//# sourceMappingURL=SelectOption.svelte.d.ts.map

package/dist/components/inputs/select/SelectOption.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/inputs/select/SelectOption.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACrB;AA6BL,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/layout/Heading.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
     import { theme } from '../../theme.svelte';
     import type { IvoryComponent } from '../../types';
-    import clsx from 'clsx';
+    import { merge } from '../../utils/merge';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
 
     export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
         class?: ClassValue;
@@ -15,8 +14,10 @@
 </script>
 
 <h2
-    class={twMerge(
-        clsx('shrink-0 truncate text-lg font-bold select-none', theme.current.heading?.class, clazz)
+    class={merge(
+        'shrink-0 truncate text-lg font-bold select-none',
+        theme.current.heading?.class,
+        clazz
     )}
     {...rest}
 >

package/dist/components/layout/Heading.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Heading.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAgBL,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Heading.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAkBL,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/layout/dialog/Dialog.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" module>
     import { theme } from '../../../theme.svelte';
     import type { IvoryComponent, TransitionProps } from '../../../types';
-    import clsx from 'clsx';
+    import { merge } from '../../../utils/merge';
     import { onMount, tick } from 'svelte';
     import type { MouseEventHandler } from 'svelte/elements';
     import { fade } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
 
     export interface DialogProps extends IvoryComponent<HTMLElement>, TransitionProps {
         /** Gets called when the dialog requests to close (Escape, backdrop click) */
@@ -61,12 +60,10 @@
     onclick={handleBackdropClick}
     oncancel={requestClose}
     onclose={close}
-    class={twMerge(
-        clsx(
-            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
-            theme.current.dialog?.class,
-            clazz
-        )
+    class={merge(
+        'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
+        theme.current.dialog?.class,
+        clazz
     )}
     in:inTransition
     out:outTransition

package/dist/components/layout/dialog/Dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAOlE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC,EAAE,eAAe;IAC7E,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA2DL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAMlE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC,EAAE,eAAe;IAC7E,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAyDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/drawer/Drawer.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
     import type { TransitionProps } from '../../../types';
+    import { merge } from '../../../utils/merge';
     import { X } from '@lucide/svelte';
-    import clsx from 'clsx';
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
     import { HiddenBackground } from '..';
     import Heading from '../Heading.svelte';
 
@@ -58,14 +57,12 @@
         }}
     >
         <div
-            class={twMerge(
-                clsx([
-                    'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
-                    placement === 'left' && 'left-0',
-                    placement === 'right' && 'right-0',
-                    clazz
-                ])
-            )}
+            class={merge([
+                'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
+                placement === 'left' && 'left-0',
+                placement === 'right' && 'right-0',
+                clazz
+            ])}
             onclick={(e) => e.stopPropagation()}
             in:inTransition|global
             out:outTransition|global

package/dist/components/layout/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAqEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAmEN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/index.d.ts

@@ -1,9 +1,8 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './Heading.svelte';
-export { default as HiddenBackground, type HiddenBackgroundProps } from './hiddenBackground/HiddenBackground.svelte';
+export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
 export { default as Modal, type ModalProps, type ModalVariant } from './modal/Modal.svelte';
 export { default as Popover, type PopoverPlacement, type PopoverProps } from './popover/Popover.svelte';
-export { default as Portal } from './portal';
 export { getTabContext, Tab, TabPanel, Tabs, type TabPanelProps, type TabProps, type TabsProps } from './tabs';
 export { default as Tooltip, type TooltipProps } from './tooltip/Tooltip.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,EAC7B,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACH,aAAa,EACb,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACH,aAAa,EACb,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC"}