odj-svelte-ui 0.1.0

package/dist/nav/theme.js

@@ -0,0 +1,154 @@
+import { tv } from "tailwind-variants";
+export const navbar = tv({
+    slots: {
+        base: "bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full",
+        container: "mx-auto flex flex-wrap items-center justify-between",
+        toggleButton: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+        menuContainer: "w-full",
+        activeLink: "block py-2 px-3 text-white bg-primary-700 rounded dark:text-white",
+        inactiveLink: "block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+    },
+    variants: {
+        fluid: {
+            true: {
+                container: "w-full"
+            },
+            false: {
+                container: "container"
+            }
+        },
+        breakPoint: {
+            md: {
+                container: "max-w-screen-xl",
+                toggleButton: "md:hidden",
+                menuContainer: "md:block md:w-auto"
+            },
+            lg: {
+                container: "max-w-screen-xl",
+                toggleButton: "lg:hidden",
+                menuContainer: "lg:block lg:w-auto"
+            },
+            xl: {
+                container: "max-w-screen-xl",
+                toggleButton: "xl:hidden",
+                menuContainer: "xl:block xl:w-auto"
+            },
+            xxl: {
+                container: "w-full",
+                toggleButton: "2xl:hidden",
+                menuContainer: "2xl:block 2xl:w-auto"
+            }
+        },
+        navStatus: {
+            true: {
+                menuContainer: "block"
+            },
+            false: {
+                menuContainer: "hidden"
+            }
+        }
+    },
+    defaultVariants: {
+        fluid: false,
+        breakPoint: "md",
+        navStatus: false
+    }
+});
+export const navUl = tv({
+    base: "font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700",
+    variants: {
+        breakPoint: {
+            md: "md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 md:dark:bg-gray-900",
+            lg: "lg:mt-0 lg:flex-row lg:space-x-8 lg:border-0 lg:p-0 lg:dark:bg-gray-900",
+            xl: "xl:mt-0 xl:flex-row xl:space-x-8 xl:border-0 lg:p-0 xl:dark:bg-gray-900",
+            xxl: "2xl:mt-0 2xl:flex-row 2xl:space-x-8 2xl:border-0 2xl:p-0 2xl:dark:bg-gray-900"
+        }
+    }
+});
+export const navbrand = tv({
+    slots: {
+        base: "flex items-center space-x-3 rtl:space-x-reverse",
+        span: "self-center whitespace-nowrap text-2xl font-semibold text-primary-900 dark:text-white sm:text-3xl"
+    }
+});
+export const navLi = tv({
+    slots: {
+        base: "list-none",
+        link: "block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+    },
+    variants: {
+        active: {
+            true: {
+                link: "bg-primary-700 text-white"
+            }
+        },
+        breakPoint: {
+            md: {
+                link: "md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 md:dark:hover:text-primary-500 md:dark:hover:bg-transparent"
+            },
+            lg: {
+                link: "lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 lg:dark:hover:text-primary-500 lg:dark:hover:bg-transparent"
+            },
+            xl: {
+                link: "xl:hover:bg-transparent xl:border-0 xl:hover:text-primary-700 xl:p-0 xl:dark:hover:text-primary-500 xl:dark:hover:bg-transparent"
+            },
+            xxl: {
+                link: "2xl:hover:bg-transparent 2xl:border-0 2xl:hover:text-primary-700 2xl:p-0 2xl:dark:hover:text-primary-500 2xl:dark:hover:bg-transparent"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            active: true,
+            breakPoint: "md",
+            class: {
+                link: "md:bg-transparent md:text-primary-700 md:p-0 md:dark:text-primary-500"
+            }
+        },
+        {
+            active: true,
+            breakPoint: "lg",
+            class: {
+                link: "lg:bg-transparent lg:text-primary-700 lg:p-0 lg:dark:text-primary-500"
+            }
+        },
+        {
+            active: true,
+            breakPoint: "xl",
+            class: {
+                link: "xl:bg-transparent xl:text-primary-700 xl:p-0 xl:dark:text-primary-500"
+            }
+        },
+        {
+            active: true,
+            breakPoint: "xxl",
+            class: {
+                link: "2xl:bg-transparent 2xl:text-primary-700 2xl:p-0 2xl:dark:text-primary-500"
+            }
+        }
+    ],
+    defaultVariants: {
+        breakPoint: "md",
+        active: false
+    }
+});
+export const navcontainer = tv({
+    base: "mx-auto flex flex-wrap justify-between items-center",
+    variants: {
+        fluid: {
+            true: "w-full",
+            false: "container"
+        }
+    }
+});
+export const navhamburger = tv({
+    base: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+    variants: {
+        breakPoint: {
+            md: "md:hidden",
+            lg: "lg:hidden",
+            xl: "xl:hidden",
+            xxl: "2xl:hidden"
+        }
+    }
+});

package/dist/nav/type.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { navbarType } from "../types";
+interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    navSlotBlock?: Snippet;
+    navSlotHiddenTop?: Snippet;
+    navSlotHiddenBottom?: Snippet;
+    toggleNav?: () => void;
+    closeNav?: () => void;
+    navStatus?: boolean | undefined;
+    fluid?: boolean;
+    brand?: Snippet;
+    hamburgerMenu?: boolean;
+    breakPoint?: navbarType["breakPoint"];
+    navClass?: string;
+    divClass?: string;
+    btnClass?: string;
+    div2Class?: string;
+    nonActiveClass?: string;
+    activeClass?: string;
+}
+interface NavBrandProps extends HTMLAnchorAttributes {
+    children?: Snippet;
+    siteName?: string | undefined | null;
+    closeNav?: () => void;
+    aClass?: string;
+    spanClass?: string;
+}
+interface NavUlProps extends HTMLAttributes<HTMLUListElement> {
+    children: Snippet;
+    class?: string;
+    activeUrl?: string;
+}
+interface NavLiProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    closeNav?: () => void;
+    href?: string;
+    aClass?: string;
+    class?: string;
+}
+interface NavHamburgerProps extends HTMLAttributes<HTMLButtonElement> {
+    toggleNav: () => void;
+}
+export { type NavbarProps, type NavBrandProps, type NavLiProps, type NavUlProps, type NavHamburgerProps };

package/dist/nav/type.js

@@ -0,0 +1 @@
+export {};

package/dist/pagination/Pagination.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type PaginationProps as Props, pagination, PaginationItem } from ".";
+
+  let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: Props = $props();
+
+  setContext("group", true);
+  setContext("table", table);
+  setContext("size", size);
+
+  const paginationClass = $derived(pagination({ table, size }));
+</script>
+
+<nav aria-label={ariaLabel}>
+  <ul class={paginationClass}>
+    {#if typeof previous === "function"}
+      <li {...restProps} class="shrink-0">
+        <PaginationItem {size} onclick={() => previous()} class={table ? "rounded-none rounded-l" : "rounded-none  rounded-s-lg"}>
+          {#if prevContent}
+            {@render prevContent()}
+          {:else}
+            Previous
+          {/if}
+        </PaginationItem>
+      </li>
+    {/if}
+    <div class="grid grid-flow-col auto-cols-[minmax(2.5rem,1fr)] overflow-x-auto">
+      {#each pages as { name, href, active }, index}
+        <li {...restProps}>
+          <PaginationItem {size} {active} {href} class={active || index == 0 || pages[index - 1]?.active ? "" : "border-l-0"}>
+            {name}
+          </PaginationItem>
+        </li>
+      {/each}
+    </div>
+    {#if typeof next === "function"}
+      <li {...restProps} class="shrink-0">
+        <PaginationItem {size} onclick={() => next()} class={table ? "rounded-none rounded-r" : "rounded-none rounded-e-lg"}>
+          {#if nextContent}
+            {@render nextContent()}
+          {:else}
+            Next
+          {/if}
+        </PaginationItem>
+      </li>
+    {/if}
+  </ul>
+</nav>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: pages: any = [];
+@props:previous: any;
+@props:next: any;
+@props:prevContent: any;
+@props:nextContent: any;
+@props:table: any;
+@props:size: any;
+@props:ariaLabel: any;
+-->

package/dist/pagination/Pagination.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type PaginationProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: pages: any = [];
+ * @props:previous: any;
+ * @props:next: any;
+ * @props:prevContent: any;
+ * @props:nextContent: any;
+ * @props:table: any;
+ * @props:size: any;
+ * @props:ariaLabel: any;
+ */
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/pagination/PaginationItem.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { paginationItem, type PaginationItemProps as Props } from ".";
+  import { getContext } from "svelte";
+
+  let { children, size, class: className, href, active, ...restProps }: Props = $props();
+
+  const group = getContext<boolean>("group");
+  const table = getContext<boolean>("table");
+  const paginationClass = $derived(paginationItem({ size, active, group, table, className }));
+</script>
+
+{#if href}
+  <a {href} {...restProps} class={paginationClass}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button {...restProps} class={paginationClass}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:size: any;
+@props:class: string;
+@props:href: any;
+@props:active: any;
+-->

package/dist/pagination/PaginationItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type PaginationItemProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:size: any;
+ * @props:class: string;
+ * @props:href: any;
+ * @props:active: any;
+ */
+declare const PaginationItem: import("svelte").Component<Props, {}, "">;
+type PaginationItem = ReturnType<typeof PaginationItem>;
+export default PaginationItem;

package/dist/pagination/index.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationItemProps, PaginationProps, PaginationItemSpecificProps } from "./type";
+import { paginationItem, pagination } from "./theme";
+import Pagination from "./Pagination.svelte";
+import PaginationItem from "./PaginationItem.svelte";
+export { Pagination, PaginationItem, paginationItem, pagination, type PaginationItemProps, type PaginationProps, type PaginationItemSpecificProps };

package/dist/pagination/index.js

@@ -0,0 +1,4 @@
+import { paginationItem, pagination } from "./theme";
+import Pagination from "./Pagination.svelte";
+import PaginationItem from "./PaginationItem.svelte";
+export { Pagination, PaginationItem, paginationItem, pagination };

package/dist/pagination/theme.d.ts

@@ -0,0 +1,184 @@
+export declare const paginationItem: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium w-full justify-center", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}>, {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium w-full justify-center", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const pagination: import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, "flex flex-row items-start -space-x-px rtl:space-x-reverse", import("tailwind-variants/dist/config").TVConfig<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, {
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}>, {
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, "flex flex-row items-start -space-x-px rtl:space-x-reverse", import("tailwind-variants/dist/config").TVConfig<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, {
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/pagination/theme.js

@@ -0,0 +1,52 @@
+import { tv } from "tailwind-variants";
+export const paginationItem = tv({
+    base: "flex items-center font-medium w-full justify-center",
+    variants: {
+        size: {
+            default: "h-8 px-3 text-sm",
+            large: "h-10 px-4 text-base"
+        },
+        active: {
+            true: "text-primary-600 border border-light-surface-300 bg-primary-50 hover:bg-primary-100 hover:text-primary-700 dark:border-dark-surface-700 dark:bg-dark-surface-700 dark:text-white",
+            false: "text-light-surface-500 bg-white hover:bg-light-surface-100 hover:text-light-surface-700 dark:bg-dark-surface-800 dark:border-dark-surface-700 dark:text-dark-surface-400 dark:hover:bg-dark-surface-700 dark:hover:text-white"
+        },
+        group: {
+            true: "",
+            false: "rounded-lg"
+        },
+        table: {
+            true: "rounded",
+            false: "border"
+        }
+    },
+    compoundVariants: [
+        {
+            group: false,
+            table: false,
+            class: "rounded-lg"
+        }
+    ],
+    defaultVariants: {
+        size: "default",
+        active: false,
+        group: false,
+        table: false
+    }
+});
+export const pagination = tv({
+    base: "flex flex-row items-start -space-x-px rtl:space-x-reverse",
+    variants: {
+        table: {
+            true: "divide-x rtl:divide-x-reverse dark divide-light-surface-700 dark:divide-dark-surface-700",
+            false: ""
+        },
+        size: {
+            default: "",
+            large: ""
+        }
+    },
+    defaultVariants: {
+        table: false,
+        size: "default"
+    }
+});

package/dist/pagination/type.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLLiAttributes } from "svelte/elements";
+type PaginationItemType = {
+    size?: "default" | "large";
+    active?: boolean | null;
+    group?: boolean | null;
+    table?: boolean | null;
+};
+interface PaginationItemSpecificProps {
+    children?: Snippet;
+    name?: string;
+    href?: string;
+    active?: boolean;
+    rel?: string;
+    size?: "default" | "large" | undefined;
+}
+type HTMLAttributesWithoutAbort = Omit<HTMLButtonAttributes, "on:abort"> & Omit<HTMLAnchorAttributes, "on:abort">;
+interface PaginationItemProps extends HTMLAttributesWithoutAbort {
+    children?: Snippet;
+    name?: string;
+    href?: string;
+    active?: boolean;
+    rel?: string;
+    size?: "default" | "large" | undefined;
+}
+interface PaginationProps extends HTMLLiAttributes {
+    prevContent?: Snippet;
+    nextContent?: Snippet;
+    pages?: PaginationItemProps[];
+    previous?: () => void;
+    next?: () => void;
+    table?: boolean;
+    size?: PaginationItemType["size"];
+    ariaLabel?: string;
+}
+export { type PaginationItemProps, type PaginationProps, type PaginationItemSpecificProps };

package/dist/pagination/type.js

@@ -0,0 +1 @@
+export {};