@ims360/svelte-ivory 0.4.3 → 0.4.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/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/basic/ThemeSelect.svelte

@@ -5,7 +5,7 @@
     import type { ClassValue } from 'svelte/elements';
 
     type Props = {
-        class: ClassValue;
+        class?: ClassValue;
     };
 
     let { class: clazz }: Props = $props();

package/dist/components/basic/ThemeSelect.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ClassValue } from 'svelte/elements';
 type Props = {
-    class: ClassValue;
+    class?: ClassValue;
 };
 declare const ThemeSelect: import("svelte").Component<Props, {}, "">;
 type ThemeSelect = ReturnType<typeof ThemeSelect>;

package/dist/components/basic/ThemeSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/ThemeSelect.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,UAAU,CAAC;CACrB,CAAC;AA6CN,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ThemeSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/ThemeSelect.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AA6CN,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -1,5 +1,6 @@
 export { default as Checkbox, type CheckboxProps } from './checkbox/Checkbox.svelte';
 export { default as Element, type AnchorAttributes, type ButtonAttributes, type ElementProps } from './Element.svelte';
+export { default as Markdown } from './Markdown.svelte';
 export { default as MarkedText, type MarkedTextProps } from './MarkedText.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as ThemeSelect } from './ThemeSelect.svelte';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/basic/index.js

@@ -1,5 +1,6 @@
 export { default as Checkbox } from './checkbox/Checkbox.svelte';
 export { default as Element } from './Element.svelte';
+export { default as Markdown } from './Markdown.svelte';
 export { default as MarkedText } from './MarkedText.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as ThemeSelect } from './ThemeSelect.svelte';

package/dist/components/inputs/FullscreenDropzone.svelte

@@ -2,7 +2,7 @@
     import { FileUp } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
     import { scale } from 'svelte/transition';
-    import { HiddenBackground } from '../layout';
+    import { Dialog } from '../layout/dialog';
 
     export interface FullscreenDropzoneProps {
         ondrop: (files: File[]) => void;
@@ -64,9 +64,9 @@
 />
 
 {#if open}
-    <HiddenBackground class="flex items-center justify-center">
+    <Dialog class="flex items-center justify-center">
         {@render children()}
-    </HiddenBackground>
+    </Dialog>
 {/if}
 
 {#snippet defaultChildren()}

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

@@ -2,6 +2,7 @@
     import { Popover } from '../../layout';
     import { ChevronDown } from '@lucide/svelte';
     import { createContext, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
     import Input, { type InputProps } from '../Input.svelte';
 
     export interface SelectContext {
@@ -16,9 +17,15 @@
     interface Props extends InputProps<string> {
         placeholder?: string;
         children: Snippet;
+        popoverClass?: ClassValue;
     }
 
-    let { placeholder = '', children, ...props }: Props = $props();
+    let {
+        placeholder = 'bg-surface-50-950 flex flex-col gap-2 rounded-container p-2 shadow',
+        children,
+        popoverClass,
+        ...props
+    }: Props = $props();
 
     let button = $state<HTMLButtonElement | undefined>();
     let buttonWidth = $state<number>(200);
@@ -62,7 +69,7 @@
 
 <Popover
     bind:this={popover}
-    class="bg-surface-50-950 mt-2 flex flex-col gap-2 rounded p-2 shadow"
+    class={popoverClass}
     style={`min-width: ${buttonWidth}px`}
     target={button}
 >

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

@@ -1,4 +1,5 @@
 import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 import { type InputProps } from '../Input.svelte';
 export interface SelectContext {
     select: (value: string, snippet: Snippet) => void;
@@ -8,6 +9,7 @@ export declare const getSelectContext: () => SelectContext, setSelectContext: (c
 interface Props extends InputProps<string> {
     placeholder?: string;
     children: Snippet;
+    popoverClass?: ClassValue;
 }
 declare const Select: import("svelte").Component<Props, {}, "">;
 type Select = ReturnType<typeof Select>;

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

@@ -1 +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;AAgDL,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"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,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,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;IAClB,YAAY,CAAC,EAAE,UAAU,CAAC;CAC7B;AAqDL,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -1,12 +1,11 @@
 <script lang="ts" module>
     import { theme } from '../../../theme.svelte';
-    import type { IvoryComponent, TransitionProps } from '../../../types';
+    import type { IvoryComponent } from '../../../types';
     import { merge } from '../../../utils/functions';
     import { onMount, tick } from 'svelte';
     import type { MouseEventHandler } from 'svelte/elements';
-    import { fade } from 'svelte/transition';
 
-    export interface DialogProps extends IvoryComponent<HTMLElement>, TransitionProps {
+    export interface DialogProps extends IvoryComponent<HTMLElement> {
         /** Gets called when the dialog requests to close (Escape, backdrop click) */
         onclose?: () => void;
     }
@@ -17,8 +16,6 @@
         class: clazz,
         onclose: close, // This is the prop from the parent
         children,
-        inTransition = (e) => fade(e, { duration: 200 }),
-        outTransition = (e) => fade(e, { duration: 200 }),
         ...rest
     }: DialogProps = $props();
 
@@ -61,13 +58,22 @@
     oncancel={requestClose}
     onclose={close}
     class={merge(
-        'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
+        'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full bg-transparent',
         theme.current.dialog?.class,
         clazz
     )}
-    in:inTransition
-    out:outTransition
     {...rest}
 >
     {@render children?.()}
 </dialog>
+
+<style>
+    dialog::backdrop {
+        animation: fade-in 200ms ease-out;
+    }
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+    }
+</style>

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

@@ -1,5 +1,5 @@
-import type { IvoryComponent, TransitionProps } from '../../../types';
-export interface DialogProps extends IvoryComponent<HTMLElement>, TransitionProps {
+import type { IvoryComponent } from '../../../types';
+export interface DialogProps extends IvoryComponent<HTMLElement> {
     /** Gets called when the dialog requests to close (Escape, backdrop click) */
     onclose?: () => void;
 }

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;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"}
+{"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,MAAM,YAAY,CAAC;AAKjD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,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

@@ -4,8 +4,8 @@
     import { X } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
-    import { HiddenBackground } from '..';
     import Heading from '../Heading.svelte';
+    import { Dialog } from '../dialog';
 
     export type DrawerPlacement = 'left' | 'right';
 
@@ -54,7 +54,7 @@
 </script>
 
 {#if currentlyOpen}
-    <HiddenBackground
+    <Dialog
         onclose={() => {
             if (closeOnOutsideClick) close();
         }}
@@ -67,8 +67,8 @@
                 clazz
             ])}
             onclick={(e) => e.stopPropagation()}
-            in:inTransition|global
-            out:outTransition|global
+            in:inTransition
+            out:outTransition
             {...rest}
         >
             {#if inner}
@@ -91,5 +91,5 @@
                 {@render children()}
             {/if}
         </div>
-    </HiddenBackground>
+    </Dialog>
 {/if}

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

@@ -1,6 +1,6 @@
+export { Dialog, type DialogProps } from './dialog';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './Heading.svelte';
-export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
 export { default as Modal, type ModalProps } from './modal/Modal.svelte';
 export { default as Popover, type PopoverPlacement, type PopoverProps } from './popover/Popover.svelte';
 export { getTabContext, Tab, TabPanel, Tabs, type TabPanelProps, type TabProps, type TabsProps } from './tabs';

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,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,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"}

package/dist/components/layout/index.js

@@ -1,6 +1,6 @@
+export { Dialog } from './dialog';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './Heading.svelte';
-export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as Popover } from './popover/Popover.svelte';
 export { getTabContext, Tab, TabPanel, Tabs } from './tabs';

package/dist/components/layout/modal/Modal.svelte

@@ -6,8 +6,9 @@
     import { X } from '@lucide/svelte';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { fade } from 'svelte/transition';
-    import { Heading, HiddenBackground } from '..';
+    import { scale } from 'svelte/transition';
+    import { Heading } from '..';
+    import { Dialog } from '../dialog';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
     export type ModalProps = TransitionProps & {
@@ -45,8 +46,9 @@
         variant,
         innerClass,
         inTransition = (e) =>
-            fade(e, {
-                duration: 200
+            scale(e, {
+                duration: 200,
+                start: 0.8
             }),
         outTransition = () => ({}),
         ...rest
@@ -81,7 +83,7 @@
 	A modal, comes with a title, close button and different variants per default.
 -->
 {#if currentlyOpen}
-    <HiddenBackground
+    <Dialog
         onclose={() => {
             if (closeOnOutsideClick) close();
         }}
@@ -143,5 +145,5 @@
                 </div>
             </div>
         {/if}
-    </HiddenBackground>
+    </Dialog>
 {/if}

package/dist/components/layout/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAsGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAuGL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/theme.svelte.d.ts

@@ -7,9 +7,6 @@ export interface Theme {
     heading?: {
         class?: ClassValue;
     };
-    hiddenBackground?: {
-        class?: ClassValue;
-    };
     dialog?: {
         class?: ClassValue;
     };

package/dist/theme.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;KAC9D,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACf,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;SAC3C,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}
+{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;KAC9D,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;SAC3C,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.4.3",
+    "version": "0.4.5",
     "keywords": [
         "svelte"
     ],
@@ -22,10 +22,6 @@
             "types": "./dist/index.d.ts",
             "svelte": "./dist/index.js"
         },
-        "./components/ai": {
-            "types": "./dist/components/ai/index.d.ts",
-            "svelte": "./dist/components/ai/index.js"
-        },
         "./components/basic": {
             "types": "./dist/components/basic/index.d.ts",
             "svelte": "./dist/components/basic/index.js"

package/src/lib/components/basic/ThemeSelect.svelte

@@ -5,7 +5,7 @@
     import type { ClassValue } from 'svelte/elements';
 
     type Props = {
-        class: ClassValue;
+        class?: ClassValue;
     };
 
     let { class: clazz }: Props = $props();

package/src/lib/components/basic/index.ts

@@ -5,6 +5,7 @@ export {
     type ButtonAttributes,
     type ElementProps
 } from './Element.svelte';
+export { default as Markdown } from './Markdown.svelte';
 export { default as MarkedText, type MarkedTextProps } from './MarkedText.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as ThemeSelect } from './ThemeSelect.svelte';

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

@@ -2,7 +2,7 @@
     import { FileUp } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
     import { scale } from 'svelte/transition';
-    import { HiddenBackground } from '../layout';
+    import { Dialog } from '../layout/dialog';
 
     export interface FullscreenDropzoneProps {
         ondrop: (files: File[]) => void;
@@ -64,9 +64,9 @@
 />
 
 {#if open}
-    <HiddenBackground class="flex items-center justify-center">
+    <Dialog class="flex items-center justify-center">
         {@render children()}
-    </HiddenBackground>
+    </Dialog>
 {/if}
 
 {#snippet defaultChildren()}

package/src/lib/components/inputs/select/Select.svelte

@@ -2,6 +2,7 @@
     import { Popover } from '$lib/components/layout';
     import { ChevronDown } from '@lucide/svelte';
     import { createContext, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
     import Input, { type InputProps } from '../Input.svelte';
 
     export interface SelectContext {
@@ -16,9 +17,15 @@
     interface Props extends InputProps<string> {
         placeholder?: string;
         children: Snippet;
+        popoverClass?: ClassValue;
     }
 
-    let { placeholder = '', children, ...props }: Props = $props();
+    let {
+        placeholder = 'bg-surface-50-950 flex flex-col gap-2 rounded-container p-2 shadow',
+        children,
+        popoverClass,
+        ...props
+    }: Props = $props();
 
     let button = $state<HTMLButtonElement | undefined>();
     let buttonWidth = $state<number>(200);
@@ -62,7 +69,7 @@
 
 <Popover
     bind:this={popover}
-    class="bg-surface-50-950 mt-2 flex flex-col gap-2 rounded p-2 shadow"
+    class={popoverClass}
     style={`min-width: ${buttonWidth}px`}
     target={button}
 >

package/src/lib/components/layout/dialog/Dialog.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
-    import type { IvoryComponent, TransitionProps } from '$lib/types';
+    import type { IvoryComponent } from '$lib/types';
     import { merge } from '$lib/utils/functions';
     import { onMount, tick } from 'svelte';
     import type { MouseEventHandler } from 'svelte/elements';
-    import { fade } from 'svelte/transition';
 
-    export interface DialogProps extends IvoryComponent<HTMLElement>, TransitionProps {
+    export interface DialogProps extends IvoryComponent<HTMLElement> {
         /** Gets called when the dialog requests to close (Escape, backdrop click) */
         onclose?: () => void;
     }
@@ -17,8 +16,6 @@
         class: clazz,
         onclose: close, // This is the prop from the parent
         children,
-        inTransition = (e) => fade(e, { duration: 200 }),
-        outTransition = (e) => fade(e, { duration: 200 }),
         ...rest
     }: DialogProps = $props();
 
@@ -61,13 +58,22 @@
     oncancel={requestClose}
     onclose={close}
     class={merge(
-        'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
+        'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full bg-transparent',
         theme.current.dialog?.class,
         clazz
     )}
-    in:inTransition
-    out:outTransition
     {...rest}
 >
     {@render children?.()}
 </dialog>
+
+<style>
+    dialog::backdrop {
+        animation: fade-in 200ms ease-out;
+    }
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+    }
+</style>

package/src/lib/components/layout/drawer/Drawer.svelte

@@ -4,8 +4,8 @@
     import { X } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
-    import { HiddenBackground } from '..';
     import Heading from '../Heading.svelte';
+    import { Dialog } from '../dialog';
 
     export type DrawerPlacement = 'left' | 'right';
 
@@ -54,7 +54,7 @@
 </script>
 
 {#if currentlyOpen}
-    <HiddenBackground
+    <Dialog
         onclose={() => {
             if (closeOnOutsideClick) close();
         }}
@@ -67,8 +67,8 @@
                 clazz
             ])}
             onclick={(e) => e.stopPropagation()}
-            in:inTransition|global
-            out:outTransition|global
+            in:inTransition
+            out:outTransition
             {...rest}
         >
             {#if inner}
@@ -91,5 +91,5 @@
                 {@render children()}
             {/if}
         </div>
-    </HiddenBackground>
+    </Dialog>
 {/if}

package/src/lib/components/layout/index.ts

@@ -1,6 +1,6 @@
+export { Dialog, type DialogProps } from './dialog';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './Heading.svelte';
-export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
 export { default as Modal, type ModalProps } from './modal/Modal.svelte';
 export {
     default as Popover,

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

@@ -6,8 +6,9 @@
     import { X } from '@lucide/svelte';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { fade } from 'svelte/transition';
-    import { Heading, HiddenBackground } from '..';
+    import { scale } from 'svelte/transition';
+    import { Heading } from '..';
+    import { Dialog } from '../dialog';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
     export type ModalProps = TransitionProps & {
@@ -45,8 +46,9 @@
         variant,
         innerClass,
         inTransition = (e) =>
-            fade(e, {
-                duration: 200
+            scale(e, {
+                duration: 200,
+                start: 0.8
             }),
         outTransition = () => ({}),
         ...rest
@@ -81,7 +83,7 @@
 	A modal, comes with a title, close button and different variants per default.
 -->
 {#if currentlyOpen}
-    <HiddenBackground
+    <Dialog
         onclose={() => {
             if (closeOnOutsideClick) close();
         }}
@@ -143,5 +145,5 @@
                 </div>
             </div>
         {/if}
-    </HiddenBackground>
+    </Dialog>
 {/if}

package/src/lib/theme.svelte.ts

@@ -8,9 +8,6 @@ export interface Theme {
     heading?: {
         class?: ClassValue;
     };
-    hiddenBackground?: {
-        class?: ClassValue;
-    };
     dialog?: {
         class?: ClassValue;
     };

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

@@ -1 +0,0 @@
-{"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/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Markdown } from './Markdown.svelte';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/ai/index.js

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

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-    import { theme } from '../../../theme.svelte';
-    import type { DialogProps } from '../dialog';
-    import Dialog from '../dialog/Dialog.svelte';
-
-    let {
-        class: clazz,
-
-        ...rest
-    }: DialogProps = $props();
-</script>
-
-<Dialog {...rest} class={['bg-surface-950-50/40', theme.current.hiddenBackground?.class, clazz]} />

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte.d.ts

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

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HiddenBackground.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/HiddenBackground.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAmB7C,QAAA,MAAM,gBAAgB,iDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/src/lib/components/ai/index.ts

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

package/src/lib/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-    import { theme } from '$lib/theme.svelte';
-    import type { DialogProps } from '../dialog';
-    import Dialog from '../dialog/Dialog.svelte';
-
-    let {
-        class: clazz,
-
-        ...rest
-    }: DialogProps = $props();
-</script>
-
-<Dialog {...rest} class={['bg-surface-950-50/40', theme.current.hiddenBackground?.class, clazz]} />