@ims360/svelte-ivory 0.1.15 → 0.2.0

package/src/lib/components/inputs/Input.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" module>
+    import { theme } from '$lib/theme.svelte';
+    import { pseudoRandomId } from '$lib/utils/functions';
+    import { merge } from '$lib/utils/merge';
+    import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { slide } from 'svelte/transition';
+    import FormIssues from './issues/FormIssues.svelte';
+
+    interface CommonProps {
+        id?: string;
+        class?: ClassValue;
+        style?: string;
+        label?: string;
+        disabled?: boolean;
+    }
+
+    export interface InputProps<T extends RemoteFormFieldValue> extends CommonProps {
+        form: RemoteFormField<T>;
+    }
+
+    export const INPUT_UNSET_OUTLINE =
+        'border-none outline-none ring-transparent focus:outline-none';
+</script>
+
+<script lang="ts" generics="T extends RemoteFormFieldValue">
+    interface Props<K extends RemoteFormFieldValue> extends CommonProps {
+        children: Snippet<[{ class: string; id: string; disabled?: boolean }]>;
+        fixTitle?: boolean;
+        form: Pick<RemoteFormField<K>, 'value' | 'issues'>;
+    }
+
+    let {
+        class: clazz,
+        style,
+        label,
+        id = pseudoRandomId(),
+        children,
+        form,
+        fixTitle,
+        ...inputProps
+    }: Props<T> = $props();
+
+    const inputClass = `bg-transparent grow h-14 transition-all peer m-[1px] px-4 py-3 text-lg ${INPUT_UNSET_OUTLINE}`;
+
+    const hasIssues = $derived.by(() => {
+        const i = form.issues?.();
+        return i && i.length > 0;
+    });
+
+    const hasValue = $derived(!!fixTitle || !!form.value?.());
+</script>
+
+<div
+    class={[
+        'accent-primary-500 relative flex h-fit flex-col pt-5',
+        inputProps.disabled && 'pointer-events-none opacity-70',
+        theme.current.input?.outerClass,
+        clazz
+    ]}
+    {style}
+>
+    <div
+        class={merge(
+            'group flex h-full grow flex-col overflow-hidden rounded border-2',
+            hasIssues
+                ? 'bg-error-500/20 border-error-500'
+                : 'focus-within:border-primary-500 focus-within:hover:border-primary-500 border-surface-300-700/25 hover:border-surface-300-700/50 transition-[border-color] duration-300',
+            theme.current.input?.class?.(hasValue, hasIssues)
+        )}
+    >
+        {@render children({ class: inputClass, id, ...inputProps })}
+        {#if label}
+            <label
+                class={merge([
+                    'pointer-events-none absolute cursor-text px-1 transition-all select-none group-focus-within:top-0 group-focus-within:left-0 group-focus-within:text-sm focus:cursor-default',
+                    hasValue ? 'top-0 left-0 cursor-default text-sm' : 'top-10 left-3',
+                    hasIssues ? 'text-error-500' : 'text-surface-700-300',
+                    theme.current.input?.label?.class?.(hasValue, hasIssues)
+                ])}
+                for={id}
+            >
+                {label}
+            </label>
+        {/if}
+    </div>
+    {#if form.issues?.()}
+        <div class="h-fit w-full">
+            <div
+                class={merge(
+                    'flex w-full flex-col overflow-hidden',
+                    theme.current.input?.issues?.class
+                )}
+                transition:slide
+            >
+                <FormIssues issues={form.issues?.()} class="my-0.5 pr-2 first:mt-1 last:mb-1" />
+            </div>
+        </div>
+    {/if}
+</div>

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/components/inputs/index.ts

@@ -1,4 +1,21 @@
+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';

package/src/lib/components/inputs/issues/FormIssues.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { theme } from '$lib/theme.svelte';
+    import { merge } from '$lib/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/src/lib/components/inputs/select/Select.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+    import { Popover } from '$lib/components/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/src/lib/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/src/lib/components/layout/Heading.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
-    import clsx from 'clsx';
+    import { merge } from '$lib/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/src/lib/components/layout/dialog/Dialog.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent, TransitionProps } from '$lib/types';
-    import clsx from 'clsx';
+    import { merge } from '$lib/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/src/lib/components/layout/drawer/Drawer.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
     import type { TransitionProps } from '$lib/types';
+    import { merge } from '$lib/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/src/lib/components/layout/index.ts

@@ -1,16 +1,12 @@
 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,

package/src/lib/components/layout/modal/Modal.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
     import type { TransitionProps } from '$lib/types';
+    import { merge } from '$lib/utils/merge';
     import { X } from '@lucide/svelte';
-    import clsx from 'clsx';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { fade } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
     import { Heading, HiddenBackground } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
@@ -95,13 +94,11 @@
             </div>
         {:else}
             <div
-                class={twMerge(
-                    clsx([
-                        'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                        theme.current.modal?.class,
-                        clazz
-                    ])
-                )}
+                class={merge([
+                    'bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded',
+                    theme.current.modal?.class,
+                    clazz
+                ])}
                 {...rest}
                 {onclick}
                 in:inTransition|global
@@ -131,12 +128,10 @@
                     </button>
                 </div>
                 <div
-                    class={twMerge(
-                        clsx(
-                            'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
-                            theme.current.modal?.innerClass,
-                            innerClass
-                        )
+                    class={merge(
+                        'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                        theme.current.modal?.innerClass,
+                        innerClass
                     )}
                 >
                     {@render children?.()}