odj-svelte-ui 0.1.0

package/dist/modal/theme.js

@@ -0,0 +1,48 @@
+import { tv } from "tailwind-variants";
+export const modal = tv({
+    slots: {
+        base: "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex pointer-events-none",
+        div: "flex relative w-full max-h-full",
+        content: "w-full text-light-surface-800 dark:text-dark-surface-300 bg-white dark:bg-dark-surface-800 pointer-events-auto",
+        backdrop: "fixed inset-0 z-50 bg-light-surface-900 bg-opacity-50 dark:bg-opacity-80 pointer-events-auto",
+        header: "flex justify-between items-center pt-4 px-4 rounded-t-xl",
+        footer: "flex items-center p-4 space-x-3 rtl:space-x-reverse rounded-b-xl border-t border-light-surface-300 dark:border-dark-surface-600 ",
+        body: "p-4 space-y-4 flex-1 overflow-y-auto overscroll-contain",
+        closeBtn: "absolute top-3 end-2.5",
+        h3: "text-xl font-semibold text-light-surface-900 dark:text-white p-0"
+    },
+    variants: {
+        // position: {
+        //   fixed: { base: 'fixed' },
+        //   absolute: { base: 'absolute' }
+        // },
+        position: {
+            "top-left": { base: "justify-start items-start" },
+            "top-center": { base: "justify-center items-start" },
+            "top-right": { base: "justify-end items-start" },
+            "center-left": { base: "justify-start items-center" },
+            center: { base: "justify-center items-center" },
+            "center-right": { base: "justify-end items-center" },
+            "bottom-left": { base: "justify-start items-end" },
+            "bottom-center": { base: "justify-center items-end" },
+            "bottom-right": { base: "justify-end items-end" },
+            default: { base: "justify-center items-center" }
+        },
+        size: {
+            xs: { div: "max-w-md" },
+            sm: { div: "max-w-lg" },
+            md: { div: "max-w-2xl" },
+            lg: { div: "max-w-4xl" },
+            xl: { div: "max-w-7xl" }
+        },
+        backdrop: {
+            true: { backdrop: "bg-light-surface-900 dark:bg-dark-surface-900 bg-opacity-75" }
+        },
+        rounded: {
+            true: { content: "rounded-xl" }
+        },
+        shadow: {
+            true: { content: "shadow-md" }
+        }
+    }
+});

package/dist/modal/type.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TransitionFunc, ParamsType } from "../types";
+type WidthType = "md" | "sm" | "lg" | "xl" | "xs" | undefined;
+type PosisionType = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | "default" | undefined;
+interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    title?: string;
+    modalStatus: boolean;
+    dismissable?: boolean;
+    closeModal?: () => void;
+    closeBtnClass?: string;
+    h3Class?: string;
+    divClass?: string;
+    headerClass?: string;
+    contentClass?: string;
+    bodyClass?: string;
+    footerClass?: string;
+    outsideClose?: boolean;
+    position?: PosisionType;
+    size?: WidthType;
+    backdrop?: boolean;
+    backdropClass?: string;
+    rounded?: boolean;
+    class?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+    backdropParams?: ParamsType;
+    backdropTransition?: TransitionFunc;
+}
+export { type ModalProps };

package/dist/modal/type.js

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

package/dist/nav/NavBrand.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { type NavBrandProps as Props, navbrand } from ".";
+  import { getContext } from "svelte";
+  import type { navbarType } from "../types";
+
+  let { children, siteName, closeNav, aClass, spanClass, ...restProps }: Props = $props();
+
+  const context = getContext<navbarType>("navbarContext");
+  closeNav = context.closeNav ?? closeNav;
+
+  const { base, span } = $derived(navbrand());
+</script>
+
+<a href="/" onclick={closeNav} {...restProps} class={base({ class: aClass })}>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if siteName}
+    <span class={span({ class: spanClass })}>{siteName}</span>
+  {/if}
+</a>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:siteName: any;
+@props:closeNav: any;
+@props:aClass: any;
+@props:spanClass: any;
+-->

package/dist/nav/NavBrand.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type NavBrandProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:siteName: any;
+ * @props:closeNav: any;
+ * @props:aClass: any;
+ * @props:spanClass: any;
+ */
+declare const NavBrand: import("svelte").Component<Props, {}, "">;
+type NavBrand = ReturnType<typeof NavBrand>;
+export default NavBrand;

package/dist/nav/NavHamburger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { navbarType } from "../types";
+  import { navhamburger, type NavHamburgerProps as Props } from ".";
+
+  let { toggleNav, class: className, ...restProps }: Props = $props();
+
+  let breakPoint;
+  const context = getContext<navbarType>("navbarContext");
+  breakPoint = context.breakPoint ?? "md";
+  const toggleButton = $derived(navhamburger({ breakPoint, className }));
+  // const handletoggleNav = () => {
+  //   toggleNav();
+  //   console.log('toggleNav clicked')
+  // }
+</script>
+
+<button onclick={toggleNav} type="button" {...restProps} class={toggleButton}>
+  <span class="sr-only">Open main menu</span>
+  <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+  </svg>
+</button>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: toggleNav: any;
+@props:class: string;
+-->

package/dist/nav/NavHamburger.svelte.d.ts

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

package/dist/nav/NavLi.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { navbarType } from "../types";
+  import { type NavLiProps as Props, navLi } from ".";
+
+  let { closeNav, href, children, aClass, class: className, ...restProps }: Props = $props();
+
+  let breakPoint: navbarType["breakPoint"];
+
+  const context = getContext<navbarType>("navbarContext");
+  breakPoint = context.breakPoint ?? "md";
+  closeNav = context.closeNav ?? closeNav;
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  // let currentUrl = $state();
+  let isActive = $derived(navUrl ? href === navUrl : false);
+  $effect(() => {
+    $inspect("navUrl: ", navUrl);
+  });
+
+  const { base, link } = $derived(navLi({ active: isActive, breakPoint }));
+</script>
+
+<li class={base({ class: className })}>
+  <a {href} onclick={closeNav} {...restProps} aria-current={isActive} class={link({ class: aClass })}>
+    {@render children()}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: closeNav: any;
+@props:href: any;
+@props:children: any;
+@props:aClass: any;
+@props:class: string;
+-->

package/dist/nav/NavLi.svelte.d.ts

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

package/dist/nav/NavUl.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+  import type { navbarType } from "../types";
+  import { writable } from "svelte/store";
+  import { type NavUlProps as Props, navUl } from ".";
+
+  let { children, activeUrl = "", class: className, ...restProps }: Props = $props();
+
+  let breakPoint: navbarType["breakPoint"];
+  const context = getContext<navbarType>("navbarContext");
+  breakPoint = context.breakPoint ?? "md";
+
+  const base = $derived(navUl({ breakPoint, className }));
+  const activeUrlStore = writable("");
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
+  setContext("activeUrl", activeUrlStore);
+</script>
+
+<ul {...restProps} class={base}>
+  {@render children()}
+</ul>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:activeUrl: any = "";
+@props:class: string;
+-->

package/dist/nav/NavUl.svelte.d.ts

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

package/dist/nav/Navbar.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { clickOutside } from "../uiHelpers.svelte";
+  import { slide, type SlideParams } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import type { navbarType } from "../types";
+  import { type NavbarProps as Props, navbar } from "./";
+
+  let { children, navSlotBlock, navSlotHiddenTop, navSlotHiddenBottom, toggleNav, closeNav = () => {}, navStatus, fluid, brand, hamburgerMenu = true, breakPoint = "md", navClass, divClass, btnClass, div2Class, activeClass, nonActiveClass, ...restProps }: Props = $props();
+
+  const { base, container, toggleButton, menuContainer, activeLink, inactiveLink } = $derived(navbar({ fluid, breakPoint, navStatus }));
+
+  setContext<navbarType>("navbarContext", {
+    navStatus,
+    breakPoint,
+    get activeClass() {
+      return activeLink({ class: activeClass });
+    },
+    get nonActiveClass() {
+      return inactiveLink({ class: nonActiveClass });
+    },
+    closeNav: closeNav
+  });
+
+  let slideParams: SlideParams = {
+    delay: 250,
+    duration: 500,
+    easing: quintOut
+  };
+  // Create a helper to determine menu role and tabindex for A11y
+  function getMenuProps(isOpen: boolean) {
+    return isOpen ? { role: "menu", tabindex: 0 } : { role: "none", tabindex: -1 };
+  }
+</script>
+
+<nav {...restProps} class={base({ class: navClass })} use:clickOutside={closeNav}>
+  <div class={container({ class: divClass })}>
+    {#if brand}
+      {@render brand()}
+    {/if}
+    {#if hamburgerMenu}
+      <button onclick={toggleNav} type="button" class={toggleButton({ class: btnClass })}>
+        <span class="sr-only">Open main menu</span>
+        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+        </svg>
+      </button>
+    {/if}
+    {#if navSlotBlock}
+      {@render navSlotBlock()}
+    {/if}
+    {#if navStatus}
+      {#if navSlotHiddenTop}
+        {@render navSlotHiddenTop()}
+      {/if}
+      <div class={menuContainer({ class: div2Class })} transition:slide={slideParams} {...getMenuProps(true)}>
+        {@render children()}
+      </div>
+      {#if navSlotHiddenBottom}
+        {@render navSlotHiddenBottom()}
+      {/if}
+    {:else}
+      <div class={menuContainer({ class: div2Class })} {...getMenuProps(false)}>
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+</nav>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:navSlotBlock: any;
+@props:navSlotHiddenTop: any;
+@props:navSlotHiddenBottom: any;
+@props:toggleNav: any;
+@props:closeNav: any = ();
+@props:navStatus: any;
+@props:fluid: any;
+@props:brand: any;
+@props:hamburgerMenu: any = true;
+@props:breakPoint: any = "md";
+@props:navClass: any;
+@props:divClass: any;
+@props:btnClass: any;
+@props:div2Class: any;
+@props:activeClass: any;
+@props:nonActiveClass: any;
+-->

package/dist/nav/Navbar.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type NavbarProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:navSlotBlock: any;
+ * @props:navSlotHiddenTop: any;
+ * @props:navSlotHiddenBottom: any;
+ * @props:toggleNav: any;
+ * @props:closeNav: any = ();
+ * @props:navStatus: any;
+ * @props:fluid: any;
+ * @props:brand: any;
+ * @props:hamburgerMenu: any = true;
+ * @props:breakPoint: any = "md";
+ * @props:navClass: any;
+ * @props:divClass: any;
+ * @props:btnClass: any;
+ * @props:div2Class: any;
+ * @props:activeClass: any;
+ * @props:nonActiveClass: any;
+ */
+declare const Navbar: import("svelte").Component<Props, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/nav/index.d.ts

@@ -0,0 +1,8 @@
+import type { NavbarProps, NavBrandProps, NavLiProps, NavUlProps, NavHamburgerProps } from "./type";
+import Navbar from "./Navbar.svelte";
+import NavBrand from "./NavBrand.svelte";
+import NavLi from "./NavLi.svelte";
+import NavUl from "./NavUl.svelte";
+import NavHamburger from "./NavHamburger.svelte";
+import { navbar, navUl, navbrand, navLi, navhamburger } from "./theme";
+export { Navbar, navbar, type NavbarProps, NavBrand, navbrand, type NavBrandProps, NavLi, navLi, type NavLiProps, NavUl, navUl, type NavUlProps, NavHamburger, navhamburger, type NavHamburgerProps };

package/dist/nav/index.js

@@ -0,0 +1,7 @@
+import Navbar from "./Navbar.svelte";
+import NavBrand from "./NavBrand.svelte";
+import NavLi from "./NavLi.svelte";
+import NavUl from "./NavUl.svelte";
+import NavHamburger from "./NavHamburger.svelte";
+import { navbar, navUl, navbrand, navLi, navhamburger } from "./theme";
+export { Navbar, navbar, NavBrand, navbrand, NavLi, navLi, NavUl, navUl, NavHamburger, navhamburger };