@damillora/iuno 0.2.0

package/README.md

@@ -0,0 +1,44 @@
+# iuno
+
+Damillora's next-generation component library and design system.
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/app.css

@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');
+@import "tailwindcss";
+
+@theme {
+    --font-sans: "Sen", sans-serif;
+}
+
+@theme inline {
+    --color-primary: var(--color-blue-800);
+    --color-primary-content: var(--color-blue-100);
+    --color-primary-hover: var(--color-blue-200);
+}

package/dist/components/form/Button.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { MouseEventHandler } from "svelte/elements";
+
+    let {
+        children,
+        primary = false,
+        large = false,
+        class: className = "",
+        ...restProps
+    } = $props();
+</script>
+
+<button
+    class={[
+      "py-1 px-4 rounded-lg text-blue-800 border border-blue-800 transition-colors cursor-pointer hover:bg-blue-100",
+      primary && "bg-blue-800 text-white hover:bg-blue-700",
+      large && "text-xl py-2 px-8",
+      className,
+    ]}
+    {...restProps}>{@render children?.()}</button
+>

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

@@ -0,0 +1,8 @@
+declare const Button: import("svelte").Component<{
+    children: any;
+    primary?: boolean;
+    large?: boolean;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/form/Input.svelte

@@ -0,0 +1,10 @@
+<script>
+    let { children, class: className = "", ...restProps } = $props();
+</script>
+
+<div
+    class="group rounded-lg bg-gray-100 focus-within:bg-blue-100 focus-within:ring focus-within:ring-blue-800 transition-all flex flex-row cursor-text {className}"
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+export default Input;
+type Input = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Input: import("svelte").Component<{
+    children: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    children: any;
+    class?: string;
+} & Record<string, any>;

package/dist/components/form/InputButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    let {
+        primary = false,
+        children,
+        class: className = "",
+        ...restProps
+    } = $props();
+</script>
+
+<button
+        class="cursor-pointer hover:bg-blue-100 rounded-r-lg transition-colors px-2 {className}"
+    class:bg-blue-800={primary}
+    class:hover:bg-blue-700={primary}
+    class:text-white={primary}
+    {...restProps}
+>
+    {@render children?.()}
+</button>

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

@@ -0,0 +1,7 @@
+declare const InputButton: import("svelte").Component<{
+    primary?: boolean;
+    children: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type InputButton = ReturnType<typeof InputButton>;
+export default InputButton;

package/dist/components/form/Label.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    let {
+        children,
+        for: forName = "",
+        class: className = "",
+        ...restProps
+    } = $props();
+</script>
+
+<div class="font-medium mb-2 text-base text-left {className}" {...restProps}>
+    <label for={forName}>{@render children?.()}</label>
+</div>

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

@@ -0,0 +1,7 @@
+declare const Label: import("svelte").Component<{
+    children: any;
+    for?: string;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/form/LinkButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { MouseEventHandler } from "svelte/elements";
+
+    let {
+        href,
+        children,
+        primary = false,
+        class: className = "",
+        ...restProps
+    } = $props();
+</script>
+
+<a
+    class="inline-block py-1 px-4 rounded-lg border border-blue-800 font-bold transition-colors cursor-pointer hover:bg-blue-100 {className}"
+    class:bg-blue-800={primary}
+    class:text-white={primary}
+    class:hover:bg-blue-700={primary}
+    {href}
+    {...restProps}>{@render children?.()}</a
+>

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

@@ -0,0 +1,8 @@
+declare const LinkButton: import("svelte").Component<{
+    href: any;
+    children: any;
+    primary?: boolean;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

package/dist/components/form/TagsInput.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import type { KeyboardEventHandler } from "svelte/elements";
+    import NavButton from "../nav/NavButton.svelte";
+
+    let {
+        value = [],
+        class: className = "",
+        ontagchange,
+        name = "",
+        onautocomplete = undefined,
+        ...restProps
+    } = $props();
+    let textValue = $state("");
+    let id = $state(0);
+
+    let timer: Timeout | undefined = $state();
+
+    let autocompleteEntries: string[] = $state([]);
+    let selectedAutocomplete: number | undefined = $state();
+
+    const appendTextValue = (textValue: string) => {
+        let newValue = value.concat(textValue);
+        if (ontagchange) {
+            ontagchange(newValue);
+        }
+        id += 1;
+    };
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            let len = autocompleteEntries.length;
+            if (selectedAutocomplete === undefined) {
+                selectedAutocomplete = (len + len - 1) % len;
+            } else {
+                selectedAutocomplete = (selectedAutocomplete + len - 1) % len;
+            }
+            return;
+        } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            let len = autocompleteEntries.length;
+            if (selectedAutocomplete === undefined) {
+                console.log("up");
+                selectedAutocomplete = 0;
+            } else {
+                console.log("up");
+                selectedAutocomplete = (selectedAutocomplete + 1) % len;
+            }
+            return;
+        }
+        if (e.key === " ") {
+            e.preventDefault();
+            if (selectedAutocomplete !== undefined) {
+                console.log(autocompleteEntries[selectedAutocomplete]);
+                autocompleteSelect(autocompleteEntries[selectedAutocomplete]);
+                return;
+            }
+            if (textValue !== "") {
+                const exist = value.find((x) => x === textValue);
+                if (!exist) {
+                    appendTextValue(textValue);
+                    textValue = "";
+                    id += 1;
+                }
+            } else {
+                textValue = "";
+            }
+        } else if (
+            e.key === "Backspace" &&
+            textValue === "" &&
+            value.length > 0
+        ) {
+            removeTag(value[value.length - 1]);
+        } else if (onautocomplete) {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                invokeAutocomplete(textValue);
+            }, 400);
+        }
+        autocompleteEntries = [];
+    };
+    const invokeAutocomplete = async (str: string) => {
+        let autocomplete: string[] = await onautocomplete(str);
+        autocomplete = autocomplete.filter((x) => !value.includes(x));
+        autocompleteEntries = autocomplete.slice(0, 5);
+    };
+    const removeTag = (i: string) => {
+        let newValue = value.filter((x) => x != i);
+        console.log(newValue);
+        if (ontagchange) {
+            ontagchange(newValue);
+        }
+    };
+    const autocompleteSelect = (str: string) => {
+        appendTextValue(str);
+        autocompleteEntries = [];
+        selectedAutocomplete = undefined;
+        textValue = "";
+        id += 1;
+    };
+</script>
+
+<div
+    class="relative group py-2 px-2 w-full rounded-lg transition-shadow {className} flex flex-row flex-wrap cursor-text"
+    {...restProps}
+>
+    {#each value as item, i}
+        <div
+            class="text-sm mr-1 rounded-lg bg-blue-100 group-focus-within:bg-blue-200 transition-colors px-2 my-1 cursor-default flex flex-row items-center justify-center"
+        >
+            <span class="mr-1">{item}</span>
+            <button
+                class="cursor-pointer hover:text-red-800 rounded-full transition-colors"
+                type="button"
+                onclick={() => removeTag(item)}>✕</button
+            >
+        </div>
+    {/each}
+    <input
+        type="text"
+        autocomplete="off"
+        {name}
+        class="outline-none focus-within:outline-none grow min-w-32"
+        bind:value={textValue}
+        onkeydown={onKeyDown}
+        {...restProps}
+    />
+    <div
+        class="hidden group-focus-within:flex absolute left-0 top-full bg-gray-100 flex-col rounded-lg *:w-full transition-all"
+    >
+        {#each autocompleteEntries as autocomplete, i}
+            <NavButton
+                active={selectedAutocomplete === i}
+                class="text-left"
+                type="button"
+                onclick={() => autocompleteSelect(autocomplete)}
+            >
+                {autocomplete}
+            </NavButton>
+        {/each}
+    </div>
+</div>

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

@@ -0,0 +1,9 @@
+declare const TagsInput: import("svelte").Component<{
+    value?: any[];
+    class?: string;
+    ontagchange: any;
+    name?: string;
+    onautocomplete?: any;
+} & Record<string, any>, {}, "">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/dist/components/form/TextInput.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    let {
+        type: typeName = "text",
+        value = $bindable(),
+        class: className = "",
+        ...restProps
+    } = $props();
+</script>
+
+<input
+    type={typeName}
+    class="py-2 px-2 rounded-lg outline-none focus-within:outline-none transition-shadow w-full {className}"
+    bind:value
+    {...restProps}
+/>

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

@@ -0,0 +1,7 @@
+declare const TextInput: import("svelte").Component<{
+    type?: string;
+    value?: any;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/components/image/Image.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { onMount } from "svelte";
+    import { get } from "svelte/store";
+
+    let { alt, src, class: className = "" } = $props();
+    let loading = $state(false);
+    let failed = $state(false);
+
+    onMount(() => {
+        const img = new Image();
+        img.src = src;
+        loading = true;
+
+        img.onload = () => {
+            loading = false;
+            failed = false;
+        };
+        img.onerror = () => {
+            loading = true;
+            failed = true;
+        };
+    });
+</script>
+
+{#if !failed}
+    <figure class={className} class:bg-gray-300={loading}>
+        <img class="w-full" {src} {alt} />
+    </figure>
+{:else}
+    <div class="bg-red-300">There was an error loading this image.</div>
+{/if}

package/dist/components/image/Image.svelte.d.ts

@@ -0,0 +1,15 @@
+export default Image;
+type Image = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Image: import("svelte").Component<{
+    alt: any;
+    src: any;
+    class?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    alt: any;
+    src: any;
+    class?: string;
+};

package/dist/components/image/LocalImage.svelte

@@ -0,0 +1,7 @@
+<script>
+    let { alt, src, class: className = "" } = $props();
+</script>
+
+<figure>
+    <img class={className} {src} {alt} />
+</figure>

package/dist/components/image/LocalImage.svelte.d.ts

@@ -0,0 +1,15 @@
+export default LocalImage;
+type LocalImage = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LocalImage: import("svelte").Component<{
+    alt: any;
+    src: any;
+    class?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    alt: any;
+    src: any;
+    class?: string;
+};

package/dist/components/layout/Container.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    let { children, class: className = "" } = $props();
+</script>
+
+<div
+    class="min-h-[calc(100vh-4rem)] container mx-auto {className}"
+>
+    {@render children?.()}
+</div>

package/dist/components/layout/Container.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Container: import("svelte").Component<{
+    children: any;
+    class?: string;
+}, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/layout/ContainerWithSidebar.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    let {
+        sidebar = undefined,
+        contents = undefined,
+        reverse = false,
+        class: className = "",
+    } = $props();
+</script>
+
+<div
+    class="flex lg:flex-row {className}"
+    class:flex-col-reverse={reverse}
+    class:flex-col={!reverse}
+>
+    <div
+        class="relative w-full lg:w-1/3 2xl:w-1/4 flex flex-col min-h-[calc(100vh-4rem)] pb-8"
+    >
+        {@render sidebar?.()}
+    </div>
+    <div
+        class="relative w-full lg:w-2/3 2xl:w-3/4 flex flex-col min-h-[calc(100vh-4rem)] pb-8"
+    >
+        {@render contents?.()}
+    </div>
+</div>

package/dist/components/layout/ContainerWithSidebar.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const ContainerWithSidebar: import("svelte").Component<{
+    sidebar?: any;
+    contents?: any;
+    reverse?: boolean;
+    class?: string;
+}, {}, "">;
+type ContainerWithSidebar = ReturnType<typeof ContainerWithSidebar>;
+export default ContainerWithSidebar;

package/dist/components/layout/Footer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    let { children, class: className = "", ...restProps } = $props();
+</script>
+
+<footer
+    class="min-h-16 text-center bg-blue-50 py-4 my-auto flex flex-col justify-center {className}"
+>
+    {@render children?.()}
+</footer>

package/dist/components/layout/Footer.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Footer: import("svelte").Component<{
+    children: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/layout/ScreenCenteredContainer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    let { children, class: className = "" } = $props();
+</script>
+
+<div
+    class="min-h-[calc(100vh-4rem)] w-full flex flex-col items-center justify-center p-8 {className}"
+>
+    <div class="text-center lg:w-3/4 xl:w-1/2">
+        {@render children?.()}
+    </div>
+</div>

package/dist/components/layout/ScreenCenteredContainer.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const ScreenCenteredContainer: import("svelte").Component<{
+    children: any;
+    class?: string;
+}, {}, "">;
+type ScreenCenteredContainer = ReturnType<typeof ScreenCenteredContainer>;
+export default ScreenCenteredContainer;

package/dist/components/layout/Tabs.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import NavButton from "../nav/NavButton.svelte";
+
+    let { margin = true, tabs, contents, class: className = "" } = $props();
+
+    let currentTab = $state(0);
+    const changeTab = (tab: number) => {
+        currentTab = tab;
+    };
+</script>
+
+<div class="flex flex-row mx-4 my-2">
+    <div class="bg-gray-100 rounded-lg">
+        {#each tabs as tab, i}
+            <NavButton
+                active={currentTab === i}
+                onclick={() => changeTab(i)}
+                class={i > 0 ? "ml-1" : ""}
+            >
+                {tab}
+            </NavButton>
+        {/each}
+    </div>
+</div>
+
+<div class:mx-4={margin} class:my-2={margin} class={className}>
+    {@render contents?.(currentTab)}
+</div>

package/dist/components/layout/Tabs.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const Tabs: import("svelte").Component<{
+    margin?: boolean;
+    tabs: any;
+    contents: any;
+    class?: string;
+}, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/nav/Nav.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    let menuVisible = $state(false);
+    let {
+        logoItem = undefined,
+        centerItems = undefined,
+        rightItems = undefined,
+    } = $props();
+</script>
+
+<nav class="w-full bg-blue-50">
+    <div class="relative container mx-auto h-16 py-2 px-4 flex flex-row items-center z-30">
+        <a
+            href="/"
+            class="text-white font-bold hover:bg-blue-100 py-2 px-4 rounded-lg transition-colors md:mr-1"
+        >
+            <div class="flex flex-row items-center text-blue-800">
+                {@render logoItem?.()}
+            </div>
+        </a>
+        <div
+            class="flex flex-row md:flex-row items-end md:items-start justify-end w-full"
+        >
+            <button
+                aria-label="Menu"
+                class="md:hidden py-2 px-2 hover:bg-blue-100 rounded-lg cursor-pointer transition-colors"
+                class:bg-blue-200={menuVisible}
+                class:text-blue-800={menuVisible}
+                class:hover:bg-blue-200={menuVisible}
+                class:hover:text-blue-800={menuVisible}
+                onclick={() => {
+                    menuVisible = !menuVisible;
+                }}
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    class="size-6"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                    />
+                </svg>
+            </button>
+            <div
+                class="absolute top-16 left-0 right-0 px-2 md:px-0 md:static flex flex-col md:flex-row md:flex md:grow bg-blue-50 md:bg-transparent pb-2 md:pb-0"
+                class:hidden={!menuVisible}
+            >
+                <div class="flex flex-col md:flex-row grow *:md:mr-1">
+                    {@render centerItems?.()}
+                </div>
+                <div class="flex flex-col md:flex-row *:md:mr-1">
+                    {@render rightItems?.()}
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>

package/dist/components/nav/Nav.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const Nav: import("svelte").Component<{
+    logoItem?: any;
+    centerItems?: any;
+    rightItems?: any;
+}, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/dist/components/nav/NavButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    let {
+        onclick = undefined,
+        active = false,
+        class: className = "",
+        children,
+        disabled = false,
+        danger = false,
+        ...restProps
+    } = $props();
+</script>
+
+<button
+    class={[
+        "inline-block py-2 px-4 rounded-lg transition-colors cursor-pointer",
+        "hover:bg-blue-100",
+        active && "bg-blue-100 text-blue-800",
+        disabled && "bg-gray-200 text-gray-700 hover:bg-gray-100 cursor-default",
+        danger && "text-red-800 hover:bg-red-200",
+        className,
+    ]}
+    {disabled}
+    {onclick}
+    {...restProps}
+>
+    {@render children?.()}
+</button>

package/dist/components/nav/NavButton.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const NavButton: import("svelte").Component<{
+    onclick?: any;
+    active?: boolean;
+    class?: string;
+    children: any;
+    disabled?: boolean;
+    danger?: boolean;
+} & Record<string, any>, {}, "">;
+type NavButton = ReturnType<typeof NavButton>;
+export default NavButton;

package/dist/components/nav/NavDropdown.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    let { class: className = "", children, dropdownList } = $props();
+    import { fade, fly } from "svelte/transition";
+    let isDropdownVisible = $state(false);
+</script>
+
+<div class="relative">
+    <button
+        class="group w-full py-2 px-4 rounded-lg hover:bg-blue-100 cursor-pointer text-left flex flex-row items-center transition-colors {className}"
+        class:bg-blue-200={isDropdownVisible}
+        class:text-blue-800={isDropdownVisible}
+        class:hover:bg-blue-200={isDropdownVisible}
+        class:hover:text-blue-800={isDropdownVisible}
+        onclick={() => {
+            isDropdownVisible = !isDropdownVisible;
+        }}
+    >
+        <span class="w-full ">
+            {@render children?.()}
+        </span>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6 ml-2"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m19.5 8.25-7.5 7.5-7.5-7.5"
+            />
+        </svg>
+    </button>
+    {#if isDropdownVisible}
+        <div
+            class="absolute top-10 w-full md:min-w-64 right-0 md:px-0 flex flex-col bg-blue-50 rounded-lg *:w-full transition-all"
+            transition:fade={{
+                duration: 50,
+            }}
+        >
+            {@render dropdownList?.()}
+        </div>
+    {/if}
+</div>

package/dist/components/nav/NavDropdown.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const NavDropdown: import("svelte").Component<{
+    class?: string;
+    children: any;
+    dropdownList: any;
+}, {}, "">;
+type NavDropdown = ReturnType<typeof NavDropdown>;
+export default NavDropdown;

package/dist/components/nav/NavHeader.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    let { children } = $props();
+</script>
+
+<div class="mx-4 my-2 flex flex-col items-center">
+    <div class="rounded-lg bg-gray-100">
+        {@render children?.()}
+    </div>
+</div>

package/dist/components/nav/NavHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const NavHeader: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type NavHeader = ReturnType<typeof NavHeader>;
+export default NavHeader;

package/dist/components/nav/NavLink.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    let {
+        href,
+        class: className = "",
+        active = false,
+        primary = false,
+        children,
+        ...restProps
+    } = $props();
+</script>
+
+<a
+    {href}
+    class={[
+      "inline-block py-2 px-4 rounded-lg transition-colors",
+      " hover:bg-blue-100",
+      primary && "bg-blue-800 text-white hover:bg-blue-700 hover:text-white",
+      active && "bg-blue-200 text-blue-800",
+      className,
+    ]}
+    {...restProps}
+>
+    {@render children?.()}
+</a>

package/dist/components/nav/NavLink.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const NavLink: import("svelte").Component<{
+    href: any;
+    class?: string;
+    active?: boolean;
+    primary?: boolean;
+    children: any;
+} & Record<string, any>, {}, "">;
+type NavLink = ReturnType<typeof NavLink>;
+export default NavLink;

package/dist/components/nav/Pagination.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { paginate } from "../../utils/simple-pagination.js";
+    import NavButton from "./NavButton.svelte";
+
+    let { page, changePage, totalPages } = $props();
+
+    let pagination = $derived(paginate(page, totalPages));
+</script>
+
+<nav class="flex flex-row justify-center" aria-label="pagination">
+    <div class="flex flex-row justify-center bg-gray-100 rounded-lg">
+        {#if page > 1}
+            <NavButton
+                onclick={() => changePage(page - 1)}
+                disabled={page <= 1}
+                class="mr-1">Previous</NavButton
+            >
+        {/if}
+        <ul class="flex flex-row">
+            {#each pagination as pageEntry, i}
+                {#if pageEntry == "..."}
+                    <li>
+                        <span
+                            class="inline-block py-2 px-4 rounded-lg font-medium"
+                            >&hellip;</span
+                        >
+                    </li>
+                {:else}
+                    <li>
+                        <NavButton
+                            class={i < pagination.length - 2 ? "mr-1" : ""}
+                            onclick={() => changePage(pageEntry)}
+                            aria-label="Go to page {pageEntry}"
+                            active={page === pageEntry}>{pageEntry}</NavButton
+                        >
+                    </li>
+                {/if}
+            {/each}
+        </ul>
+        {#if page < totalPages}
+            <NavButton
+                class="ml-1"
+                onclick={() => changePage(page + 1)}
+                disabled={page >= totalPages}>Next</NavButton
+            >
+        {/if}
+    </div>
+</nav>

package/dist/components/nav/Pagination.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const Pagination: import("svelte").Component<{
+    page: any;
+    changePage: any;
+    totalPages: any;
+}, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import Button from "./components/form/Button.svelte";
+import Input from "./components/form/Input.svelte";
+import InputButton from "./components/form/InputButton.svelte";
+import Label from "./components/form/Label.svelte";
+import LinkButton from "./components/form/LinkButton.svelte";
+import TagsInput from "./components/form/TagsInput.svelte";
+import TextInput from "./components/form/TextInput.svelte";
+import Image from "./components/image/Image.svelte";
+import LocalImage from "./components/image/LocalImage.svelte";
+import Container from "./components/layout/Container.svelte";
+import ContainerWithSidebar from "./components/layout/ContainerWithSidebar.svelte";
+import Footer from "./components/layout/Footer.svelte";
+import ScreenCenteredContainer from "./components/layout/ScreenCenteredContainer.svelte";
+import Tabs from "./components/layout/Tabs.svelte";
+import Nav from "./components/nav/Nav.svelte";
+import NavButton from "./components/nav/NavButton.svelte";
+import NavDropdown from "./components/nav/NavDropdown.svelte";
+import NavHeader from "./components/nav/NavHeader.svelte";
+import NavLink from "./components/nav/NavLink.svelte";
+import Pagination from "./components/nav/Pagination.svelte";
+export { Button, Input, InputButton, Label, LinkButton, TagsInput, TextInput, Image, LocalImage, Container, ContainerWithSidebar, Footer, ScreenCenteredContainer, Tabs, Nav, NavButton, NavDropdown, NavHeader, NavLink, Pagination, };

package/dist/index.js

@@ -0,0 +1,34 @@
+// Reexport your entry components here
+// Form
+import Button from "./components/form/Button.svelte";
+import Input from "./components/form/Input.svelte";
+import InputButton from "./components/form/InputButton.svelte";
+import Label from "./components/form/Label.svelte";
+import LinkButton from "./components/form/LinkButton.svelte";
+import TagsInput from "./components/form/TagsInput.svelte";
+import TextInput from "./components/form/TextInput.svelte";
+// Image
+import Image from "./components/image/Image.svelte";
+import LocalImage from "./components/image/LocalImage.svelte";
+// Layout
+import Container from "./components/layout/Container.svelte";
+import ContainerWithSidebar from "./components/layout/ContainerWithSidebar.svelte";
+import Footer from "./components/layout/Footer.svelte";
+import ScreenCenteredContainer from "./components/layout/ScreenCenteredContainer.svelte";
+import Tabs from "./components/layout/Tabs.svelte";
+// Nav
+import Nav from "./components/nav/Nav.svelte";
+import NavButton from "./components/nav/NavButton.svelte";
+import NavDropdown from "./components/nav/NavDropdown.svelte";
+import NavHeader from "./components/nav/NavHeader.svelte";
+import NavLink from "./components/nav/NavLink.svelte";
+import Pagination from "./components/nav/Pagination.svelte";
+export { 
+// Form
+Button, Input, InputButton, Label, LinkButton, TagsInput, TextInput, 
+// Image
+Image, LocalImage, 
+// Layout
+Container, ContainerWithSidebar, Footer, ScreenCenteredContainer, Tabs, 
+// Nav
+Nav, NavButton, NavDropdown, NavHeader, NavLink, Pagination, };

package/dist/utils/simple-pagination.d.ts

@@ -0,0 +1,2 @@
+declare const paginate: (c: number, m: number) => (string | number)[];
+export { paginate };

package/dist/utils/simple-pagination.js

@@ -0,0 +1,53 @@
+// Implementation in ES6
+// https://gist.github.com/kottenator/9d936eb3e4e3c3e02598
+const paginate = (c, m) => {
+    let current = c, last = m, delta = 1, left = current - delta, right = current + delta + 1, range = [], rangeWithDots = [], l;
+    for (let i = 1; i <= last; i++) {
+        if (i == 1 || i == last || (i >= left && i < right)) {
+            range.push(i);
+        }
+    }
+    for (let i of range) {
+        if (l) {
+            if (i - l === 2) {
+                rangeWithDots.push(l + 1);
+            }
+            else if (i - l !== 1) {
+                rangeWithDots.push("...");
+            }
+        }
+        rangeWithDots.push(i);
+        l = i;
+    }
+    return rangeWithDots;
+};
+export { paginate };
+/*
+Test it:
+
+for (let i = 1, l = 20; i <= l; i++)
+    console.log(`Selected page ${i}:`, pagination(i, l));
+
+Expected output:
+
+Selected page 1: [1, 2, 3, "...", 20]
+Selected page 2: [1, 2, 3, 4, "...", 20]
+Selected page 3: [1, 2, 3, 4, 5, "...", 20]
+Selected page 4: [1, 2, 3, 4, 5, 6, "...", 20]
+Selected page 5: [1, 2, 3, 4, 5, 6, 7, "...", 20]
+Selected page 6: [1, "...", 4, 5, 6, 7, 8, "...", 20]
+Selected page 7: [1, "...", 5, 6, 7, 8, 9, "...", 20]
+Selected page 8: [1, "...", 6, 7, 8, 9, 10, "...", 20]
+Selected page 9: [1, "...", 7, 8, 9, 10, 11, "...", 20]
+Selected page 10: [1, "...", 8, 9, 10, 11, 12, "...", 20]
+Selected page 11: [1, "...", 9, 10, 11, 12, 13, "...", 20]
+Selected page 12: [1, "...", 10, 11, 12, 13, 14, "...", 20]
+Selected page 13: [1, "...", 11, 12, 13, 14, 15, "...", 20]
+Selected page 14: [1, "...", 12, 13, 14, 15, 16, "...", 20]
+Selected page 15: [1, "...", 13, 14, 15, 16, 17, "...", 20]
+Selected page 16: [1, "...", 14, 15, 16, 17, 18, 19, 20]
+Selected page 17: [1, "...", 15, 16, 17, 18, 19, 20]
+Selected page 18: [1, "...", 16, 17, 18, 19, 20]
+Selected page 19: [1, "...", 17, 18, 19, 20]
+Selected page 20: [1, "...", 18, 19, 20]
+*/

package/package.json

@@ -0,0 +1,72 @@
+{
+	"name": "@damillora/iuno",
+	"version": "0.2.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./app.css": "./dist/app.css"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^5.0.1",
+		"@eslint/compat": "^2.0.2",
+		"@eslint/js": "^9.39.2",
+		"@storybook/addon-a11y": "^10.2.10",
+		"@storybook/addon-docs": "^10.2.10",
+		"@storybook/addon-svelte-csf": "^5.0.11",
+		"@storybook/addon-vitest": "^10.2.10",
+		"@storybook/sveltekit": "^10.2.10",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@types/node": "^24",
+		"@vitest/browser-playwright": "^4.0.18",
+		"@vitest/coverage-v8": "^4.0.18",
+		"eslint": "^9.39.2",
+		"eslint-plugin-storybook": "^10.2.10",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.3.0",
+		"playwright": "^1.58.2",
+		"publint": "^0.3.17",
+		"storybook": "^10.2.10",
+		"svelte": "^5.49.2",
+		"svelte-check": "^4.3.6",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.54.0",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18",
+		"@tailwindcss/vite": "^4.1.14",
+		"tailwindcss": "^4.1.14"
+	},
+	"keywords": [
+		"svelte"
+	]
+}