@ims360/svelte-ivory 0.1.14 → 0.2.0

package/README.md

@@ -20,8 +20,3 @@ _You may need to adjust the path if your `app.css` is not located in `/src`_
 - [x] Basic layout components (modal, tabs, popover, etc.)
 - [x] Table
 - [ ] Input components
-
-## TODOs
-
-- [ ] Bindings to exported functions
-- [ ] Replace `<Portal>` with `<dialog>` element in Modal, Popover and Drawer

package/dist/components/ai/AiMessage.svelte

@@ -5,11 +5,10 @@
 -->
 
 <script lang="ts">
+    import { merge } from '../../utils/merge';
     import { ThumbsDown, ThumbsUp } from '@lucide/svelte';
-    import clsx from 'clsx';
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import CopyToClipboardButton from '../buttons/CopyToClipboardButton.svelte';
     import type { AiChatMessage } from './Chat.svelte';
     import Markdown from './Markdown.svelte';
@@ -48,7 +47,7 @@
 </script>
 
 <div
-    class={twMerge(clsx('group flex w-full flex-col items-start', clazz))}
+    class={merge('group flex w-full flex-col items-start', clazz)}
     style={minHeight ? `min-height: ${minHeight}px;` : undefined}
 >
     {@render messageText({

package/dist/components/ai/AiMessage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/AiMessage.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACX,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAuFL;;;GAGG;AACH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AiMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/AiMessage.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACX,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAsFL;;;GAGG;AACH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/ai/Chat.svelte

@@ -6,10 +6,9 @@
 -->
 
 <script lang="ts" module>
-    import clsx from 'clsx';
+    import { merge } from '../../utils/merge';
     import { tick, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import AiMessage from './AiMessage.svelte';
     import UserMessage from './UserMessage.svelte';
 
@@ -101,7 +100,7 @@
     }
 </script>
 
-<div class={twMerge(clsx('flex grow flex-col gap-2 overflow-hidden', clazz))}>
+<div class={merge('flex grow flex-col gap-2 overflow-hidden', clazz)}>
     <div
         class="flex grow flex-col gap-4 overflow-auto pr-2 [scrollbar-gutter:stable]"
         bind:this={chatContainer}

package/dist/components/ai/Chat.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/Chat.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAqHL;;;;GAIG;AACH,QAAA,MAAM,IAAI;;YAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chat.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/Chat.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAqHL;;;;GAIG;AACH,QAAA,MAAM,IAAI;;YAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/ai/Markdown.svelte

@@ -5,11 +5,10 @@
 -->
 
 <script lang="ts">
-    import clsx from 'clsx';
+    import { merge } from '../../utils/merge';
     import DomPurify from 'dompurify';
     import { marked } from 'marked';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
 
     interface Props {
         source: string;
@@ -44,11 +43,9 @@
 </script>
 
 <div
-    class={twMerge(
-        clsx(
-            'text-surface-950-50 prose prose-strong:text-surface-950-50 prose-p:my-1 flex flex-col items-start gap-1',
-            clazz
-        )
+    class={merge(
+        'text-surface-950-50 prose prose-strong:text-surface-950-50 prose-p:my-1 flex flex-col items-start gap-1',
+        clazz
     )}
 >
     {#await html then html}

package/dist/components/ai/Markdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/Markdown.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,UAAU,KAAK;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,eAAe,EAAE,MAAM,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;KAC3F,CAAC;CACL;AAiDL;;;GAGG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Markdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/Markdown.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,UAAU,KAAK;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,eAAe,EAAE,MAAM,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;KAC3F,CAAC;CACL;AA8CL;;;GAGG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/ai/UserMessage.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-    import clsx from 'clsx';
+    import { merge } from '../../utils/merge';
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import AttachedFile from './AttachedFile.svelte';
     import type { AiChatMessage } from './Chat.svelte';
     import Markdown from './Markdown.svelte';
@@ -24,7 +23,7 @@
     }: Props = $props();
 </script>
 
-<div class={twMerge(clsx('flex w-full flex-col items-end gap-1', clazz))}>
+<div class={merge('flex w-full flex-col items-end gap-1', clazz)}>
     {@render messageText({ message })}
     {#if message.files}
         <div class="flex flex-row items-center gap-2">

package/dist/components/ai/UserMessage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/UserMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IACrC,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;CACvD;AAiDL,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/UserMessage.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI/C,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IACvB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IACrC,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;CACvD;AAgDL,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/basic/checkbox/Checkbox.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" module>
+    import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
+    import { merge } from '../../../utils/merge';
     import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
     import clsx from 'clsx';
     import type { ClassValue } from 'svelte/elements';
     import { scale } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
 
     export interface CheckboxProps extends IvoryComponent<HTMLElement> {
         class?: ClassValue;
@@ -40,16 +41,19 @@
         innerClass,
         style
     }: { icon?: typeof LucideIcon; innerClass?: string; style?: string } = $derived.by(() => {
-        if (!checked && !partial) return { innerClass: 'border-surface-500' };
+        const overwrittenClass =
+            theme.current.checkbox?.class &&
+            clsx(theme.current.checkbox?.class?.(!!checked, !!partial));
+        if (!checked && !partial) return { innerClass: overwrittenClass ?? 'border-surface-500' };
         if (checked)
             return {
                 icon: Check,
-                innerClass: 'bg-primary-500 border-primary-500 text-surface-50'
+                innerClass: overwrittenClass ?? 'bg-primary-500 border-primary-500 text-surface-50'
             };
         if (partial)
             return {
                 icon: Minus,
-                innerClass: 'border-primary-700 text-primary-500'
+                innerClass: overwrittenClass ?? 'border-primary-700 text-primary-500'
             };
         return {};
     });
@@ -62,13 +66,11 @@
     {disabled}
     {style}
     {onclick}
-    class={twMerge(
-        clsx(
-            'box-border flex h-5 w-5 items-center justify-center overflow-hidden rounded border-2 transition-colors',
-            disabled && 'cursor-not-allowed opacity-70',
-            innerClass,
-            clazz
-        )
+    class={merge(
+        'box-border flex h-5 w-5 items-center justify-center overflow-hidden rounded border-2 transition-colors',
+        disabled && 'cursor-not-allowed opacity-70',
+        innerClass,
+        clazz
     )}
     {...rest}
 >

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAsDL,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAuDL,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/basic/toggle/Toggle.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
     import type { IvoryComponent } from '../../../types';
-    import clsx from 'clsx';
+    import { merge } from '../../../utils/merge';
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
 
     export interface ToggleProps extends IvoryComponent<HTMLElement> {
         value?: boolean;
@@ -18,12 +17,10 @@
 
 <svelte:element
     this={rest.onclick ? 'button' : 'div'}
-    class={twMerge(
-        clsx(
-            'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
-            value ? 'bg-primary-500' : 'bg-surface-300-700',
-            clazz
-        )
+    class={merge(
+        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
+        value ? 'bg-primary-500' : 'bg-surface-300-700',
+        clazz
     )}
     type={rest.onclick ? 'button' : undefined}
     role={rest.onclick ? 'button' : undefined}

package/dist/components/basic/toggle/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAgCL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AA8BL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/inputs/CheckboxInput.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import type { ClassValue } from 'svelte/elements';
+    import { Checkbox } from '../basic';
+    import type { InputProps } from './Input.svelte';
+    import FormIssues from './issues/FormIssues.svelte';
+
+    interface Props extends InputProps<boolean> {
+        class?: ClassValue;
+        label: string;
+        description?: string;
+        onclick?: () => void;
+    }
+
+    let { class: clazz = '', label, description, onclick, disabled, form }: Props = $props();
+
+    const { set, issues, value } = $derived(form);
+
+    const checked = $derived(value());
+</script>
+
+<div class={['flex flex-col', clazz]}>
+    <button
+        type="button"
+        {disabled}
+        onclick={onclick ||
+            (() => {
+                set(!checked);
+            })}
+        class={['flex flex-row items-center gap-2', disabled && 'opacity-80']}
+    >
+        <Checkbox {checked} />
+        {label}
+    </button>
+    <input class="hidden" {...form.as('checkbox')} {checked} />
+    {#if description}
+        <p class="text-surface-700-300">{description}</p>
+    {/if}
+    <FormIssues issues={issues?.()} />
+</div>

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

@@ -0,0 +1,12 @@
+import type { ClassValue } from 'svelte/elements';
+import type { InputProps } from './Input.svelte';
+interface Props extends InputProps<boolean> {
+    class?: ClassValue;
+    label: string;
+    description?: string;
+    onclick?: () => void;
+}
+declare const CheckboxInput: import("svelte").Component<Props, {}, "">;
+type CheckboxInput = ReturnType<typeof CheckboxInput>;
+export default CheckboxInput;
+//# sourceMappingURL=CheckboxInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/CheckboxInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI7C,UAAU,KAAM,SAAQ,UAAU,CAAC,OAAO,CAAC;IACvC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgCL,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/inputs/ColorInput.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { merge } from '../../utils/merge';
+    import Input, { INPUT_UNSET_OUTLINE, type InputProps } from './Input.svelte';
+
+    let props: InputProps<string> = $props();
+</script>
+
+<Input {...props}>
+    {#snippet children({ id, class: inputClass })}
+        <div
+            class={merge([inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0'])}
+        >
+            <input
+                type="text"
+                bind:value={props.form.value, props.form.set}
+                class={['flex h-full grow items-center bg-transparent pl-2', INPUT_UNSET_OUTLINE]}
+            />
+            <input
+                class={['h-full rounded', INPUT_UNSET_OUTLINE]}
+                {id}
+                {...props.form.as('color')}
+            />
+        </div>
+    {/snippet}
+</Input>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/ColorInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAc,EAAuB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAoB7E,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/inputs/DateInput.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import Input, { type InputProps } from './Input.svelte';
+
+    let props: InputProps<string> = $props();
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        <input {...inputProps} {...props.form.as?.('date')} />
+    {/snippet}
+</Input>

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

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

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

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

package/dist/components/inputs/EmailInput.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import Input, { type InputProps } from './Input.svelte';
+
+    let props: InputProps<string> = $props();
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        <input
+            {...inputProps}
+            {...props.form.as?.('email')}
+            autocomplete="email"
+            autocapitalize="off"
+        />
+    {/snippet}
+</Input>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/EmailInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAgBxD,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/inputs/FileInput.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>
+    import { FileUp, X } from '@lucide/svelte';
+    import type { Snippet } from 'svelte';
+    import type { InputProps } from './Input.svelte';
+    import Input from './Input.svelte';
+
+    export interface FileInputProps extends InputProps<File[] | File> {
+        accept?: string[];
+        children?: Snippet;
+        multiple?: boolean;
+    }
+</script>
+
+<script lang="ts">
+    let { accept, children: passedChildren, multiple = false, ...rest }: FileInputProps = $props();
+
+    let hovering = $state(false);
+
+    function onDrop(
+        event: DragEvent & {
+            currentTarget: EventTarget & HTMLElement;
+        }
+    ) {
+        add(event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : []);
+    }
+
+    function add(files: File[]) {
+        const value = rest.form.value();
+        if (Array.isArray(value)) {
+            rest.form.set([...value.filter((f) => !files.includes(f)), ...Array.from(files || [])]);
+        } else {
+            rest.form.set((files[0] ?? undefined) as File);
+        }
+    }
+
+    function remove(file: File) {
+        const value = rest.form.value();
+        if (Array.isArray(value)) {
+            rest.form.set(value.filter((e) => e !== file));
+        } else {
+            rest.form.set(undefined as unknown as File);
+        }
+    }
+
+    const files = $derived.by(() => {
+        const value = rest.form.value();
+        if (Array.isArray(value)) {
+            return value;
+        } else {
+            return value ? [value] : [];
+        }
+    });
+
+    const formAttributes = $derived(rest.form.as(multiple ? 'file multiple' : 'file'));
+</script>
+
+<Input {...rest} fixTitle>
+    {#snippet children({ id })}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+            class={[
+                'group relative h-full min-h-16 w-full rounded transition-all',
+                hovering ? 'bg-primary-50-950' : ''
+            ]}
+            ondragover={() => {
+                hovering = true;
+            }}
+            ondragleave={() => {
+                hovering = false;
+            }}
+            ondrop={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                hovering = false;
+                onDrop(e);
+            }}
+        >
+            {#if passedChildren}
+                {@render passedChildren()}
+            {:else}
+                <div class="flex h-full w-full flex-col items-center justify-center gap-2 p-4">
+                    {#if files && files.length > 0}
+                        <div class="flex flex-row items-center gap-4">
+                            {#each files as file (file)}
+                                {@render fileRender(file)}
+                            {/each}
+                        </div>
+                    {:else}
+                        <div
+                            class="text-primary-200-800 group-hover:text-primary-300-700 group-hover:bg-primary-100-900 flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl transition-colors"
+                        >
+                            <FileUp />
+                        </div>
+                    {/if}
+                </div>
+            {/if}
+            <input
+                type={formAttributes.type}
+                aria-invalid={formAttributes['aria-invalid']}
+                name={formAttributes.name}
+                oninput={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    add(e.currentTarget.files ? Array.from(e.currentTarget.files) : []);
+                }}
+                {multiple}
+                title=""
+                accept={accept?.join(', ')}
+                class="absolute top-0 left-0 h-full w-full grow cursor-pointer opacity-0"
+                {id}
+            />
+        </div>
+    {/snippet}
+</Input>
+
+{#snippet fileRender(file: File)}
+    <div class="bg-primary-200-800 flex w-fit items-center rounded-full py-2 pr-2 pl-4">
+        <p>{file.name}</p>
+        <button
+            type="button"
+            class="btn-icon hover:text-primary-500"
+            onclick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                remove(file);
+            }}
+        >
+            <X />
+        </button>
+    </div>
+{/snippet}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { InputProps } from './Input.svelte';
+export interface FileInputProps extends InputProps<File[] | File> {
+    accept?: string[];
+    children?: Snippet;
+    multiple?: boolean;
+}
+declare const FileInput: import("svelte").Component<FileInputProps, {}, "">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;
+//# sourceMappingURL=FileInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/FileInput.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,UAAU,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAwGL,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/inputs/Input.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" module>
+    import { theme } from '../../theme.svelte';
+    import { pseudoRandomId } from '../../utils/functions';
+    import { merge } from '../../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>