odj-svelte-ui 0.1.0

package/dist/banner/theme.js

@@ -0,0 +1,68 @@
+import { tv } from "tailwind-variants";
+const banner = tv({
+    slots: {
+        base: "z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600",
+        insideDiv: "flex items-center"
+    },
+    variants: {
+        position: {
+            // "static" | "fixed" | "absolute" | "relative" | "sticky"
+            static: { base: "static" },
+            fixed: { base: "fixed" },
+            absolute: { base: "absolute" },
+            relative: { base: "relative" },
+            sticky: { base: "sticky" }
+        },
+        bannerType: {
+            // "default" | "bottom" | "cta" | "signup" | "info"
+            default: {
+                base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
+                insideDiv: "mx-auto"
+            },
+            bottom: {
+                base: "bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50",
+                insideDiv: "mx-auto"
+            },
+            cta: {
+                base: "flex-col md:flex-row w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl start-1/2 top-6",
+                insideDiv: "flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0"
+            },
+            signup: {
+                base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
+                insideDiv: "flex-shrink-0 w-full mx-auto sm:w-auto"
+            },
+            info: {
+                base: "top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50",
+                insideDiv: "flex-shrink-0"
+            }
+        },
+        color: {
+            // 'primary' secondary, | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+            primary: { base: "bg-primary-50 dark:bg-primary-900" },
+            secondary: { base: "bg-secondary-50 dark:bg-secondary-900" },
+            gray: { base: "bg-gray-50 dark:bg-gray-700" },
+            red: { base: "bg-red-50 dark:bg-red-900" },
+            orange: { base: "bg-orange-50 dark:bg-orange-900" },
+            amber: { base: "bg-amber-50 dark:bg-amber-900" },
+            yellow: { base: "bg-yellow-50 dark:bg-yellow-900" },
+            lime: { base: "bg-lime-50 dark:bg-lime-900" },
+            green: { base: "bg-green-50 dark:bg-green-900" },
+            emerald: { base: "bg-emerald-50 dark:bg-emerald-900" },
+            teal: { base: "bg-teal-50 dark:bg-teal-900" },
+            cyan: { base: "bg-cyan-50 dark:bg-cyan-900" },
+            sky: { base: "bg-sky-50 dark:bg-sky-900" },
+            blue: { base: "bg-blue-50 dark:bg-blue-900" },
+            indigo: { base: "bg-indigo-50 dark:bg-indigo-900" },
+            violet: { base: "bg-violet-50 dark:bg-violet-900" },
+            purple: { base: "bg-purple-50 dark:bg-purple-900" },
+            fuchsia: { base: "bg-fuchsia-50 dark:bg-fuchsia-900" },
+            pink: { base: "bg-pink-50 dark:bg-pink-900" },
+            rose: { base: "bg-rose-50 dark:bg-rose-900" }
+        }
+    },
+    defaultVariants: {
+        position: "sticky",
+        bannerType: "default"
+    }
+});
+export { banner };

package/dist/banner/type.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+type ColorVariants = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+type TypeVariants = "default" | "bottom" | "cta" | "signup" | "info";
+type PositionVariants = "static" | "fixed" | "absolute" | "relative" | "sticky";
+interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    bannerStatus?: boolean;
+    position?: PositionVariants;
+    dismissable?: boolean;
+    color?: ColorVariants;
+    bannerType?: TypeVariants;
+    divClass?: string;
+    innerClass?: string;
+    transition?: TransitionFunc;
+    params?: object;
+}
+export { type BannerProps };

package/dist/banner/type.js

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

package/dist/bottom-navigation/BottomNav.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { writable } from "svelte/store";
+  import { type BottomNavProps as Props, type BottomNavContextType, bottomNav } from "./index";
+
+  let { children, header, position = "fixed", navType = "default", outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: Props = $props();
+
+  const activeCls = twMerge("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass);
+
+  const activeUrlStore = writable("");
+  setContext("activeUrl", activeUrlStore);
+  setContext("navType", navType);
+  setContext<BottomNavContextType>("bottomNavType", { activeClass: activeCls });
+
+  // $inspect('position: ', position);
+  const { outer, inner } = bottomNav({ position, navType });
+  const outerCls = $derived(outer({ class: outerClass }));
+  const innerCls = $derived(inner({ class: innerClass }));
+
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
+</script>
+
+<div {...restProps} class={outerCls}>
+  {#if header}
+    {@render header()}
+  {/if}
+
+  <div class={innerCls}>
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:header: any;
+@props:position: any = "fixed";
+@props:navType: any = "default";
+@props:outerClass: any;
+@props:innerClass: any;
+@props:activeClass: any;
+@props:activeUrl: any = "";
+-->

package/dist/bottom-navigation/BottomNav.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type BottomNavProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:header: any;
+ * @props:position: any = "fixed";
+ * @props:navType: any = "default";
+ * @props:outerClass: any;
+ * @props:innerClass: any;
+ * @props:activeClass: any;
+ * @props:activeUrl: any = "";
+ */
+declare const BottomNav: import("svelte").Component<Props, {}, "">;
+type BottomNav = ReturnType<typeof BottomNav>;
+export default BottomNav;

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { type BottomNavHeaderProps as Props, bottomnavheader } from ".";
+
+  let { children, outerClass, innerClass, ...restProps }: Props = $props();
+  const { innerDiv, outerDiv } = $derived(bottomnavheader());
+</script>
+
+<div {...restProps} class={outerDiv({ class: outerClass })}>
+  <div class={innerDiv({ class: innerClass })} role="group">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:outerClass: any;
+@props:innerClass: any;
+-->

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { type BottomNavHeaderItemProps as Props, bottomnavheaderitem } from ".";
+  let { itemName, active, class: className, ...restProps }: Props = $props();
+  let base = $derived(bottomnavheaderitem({ active, className }));
+</script>
+
+<button {...restProps} class={base}>
+  {itemName}
+</button>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: itemName: any;
+@props:active: any;
+@props:class: string;
+-->

package/dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import { type BottomNavItemProps as Props, type BottomNavContextType, type BottomNavVariantType, bottomNavItem } from "./index";
+  import { twMerge } from "tailwind-merge";
+
+  let { children, btnName, appBtnPosition = "middle", target, activeClass, href = "", btnClass, spanClass, ...restProps }: Props = $props();
+
+  const navType: BottomNavVariantType = getContext("navType");
+  const context = getContext<BottomNavContextType>("bottomNavType") ?? {};
+
+  let active: boolean = $state(false);
+
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  const { base, span } = bottomNavItem({ navType, appBtnPosition });
+
+  $effect(() => {
+    active = navUrl ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
+  });
+
+  function getCommonClass() {
+    return twMerge(base({ class: btnClass }), active && (activeClass ?? context.activeClass));
+  }
+
+  function getSpanClass() {
+    return twMerge(span({ class: spanClass }), active && (activeClass ?? context.activeClass));
+  }
+
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const commonProps: Record<string, any> = $derived({
+    "aria-label": btnName,
+    class: getCommonClass(),
+    ...restProps
+  });
+
+  const anchorProps: HTMLAnchorAttributes = $derived({
+    ...commonProps,
+    href,
+    target
+  });
+
+  const buttonProps: HTMLButtonAttributes = $derived({
+    ...commonProps,
+    type: "button" as const
+  });
+
+  $effect(() => {
+    console.log("commonProps: ", commonProps);
+  });
+</script>
+
+{#if href}
+  <a {...anchorProps}>
+    {@render children()}
+    <span class={getSpanClass()}>{btnName}</span>
+  </a>
+{:else}
+  <button {...buttonProps}>
+    {@render children()}
+    <span class={getSpanClass()}>{btnName}</span>
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:btnName: any;
+@props:appBtnPosition: any = "middle";
+@props:target: any;
+@props:activeClass: any;
+@props:href: any = "";
+@props:btnClass: any;
+@props:spanClass: any;
+-->

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type BottomNavItemProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:btnName: any;
+ * @props:appBtnPosition: any = "middle";
+ * @props:target: any;
+ * @props:activeClass: any;
+ * @props:href: any = "";
+ * @props:btnClass: any;
+ * @props:spanClass: any;
+ */
+declare const BottomNavItem: import("svelte").Component<Props, {}, "">;
+type BottomNavItem = ReturnType<typeof BottomNavItem>;
+export default BottomNavItem;

package/dist/bottom-navigation/index.d.ts

@@ -0,0 +1,7 @@
+import type { BottomNavProps, BottomNavItemProps, BottomNavContextType, BottomNavVariantType, BottomNavHeaderProps, BottomNavHeaderItemProps } from "./type";
+import BottomNav from "./BottomNav.svelte";
+import BottomNavItem from "./BottomNavItem.svelte";
+import BottomNavHeaderItem from "./BottomNavHeaderItem.svelte";
+import BottomNavHeader from "./BottomNavHeader.svelte";
+import { bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem } from "./theme";
+export { BottomNav, BottomNavItem, bottomNav, bottomNavItem, BottomNavHeader, bottomnavheader, BottomNavHeaderItem, bottomnavheaderitem, type BottomNavProps, type BottomNavItemProps, type BottomNavContextType, type BottomNavVariantType, type BottomNavHeaderProps, type BottomNavHeaderItemProps };

package/dist/bottom-navigation/index.js

@@ -0,0 +1,6 @@
+import BottomNav from "./BottomNav.svelte";
+import BottomNavItem from "./BottomNavItem.svelte";
+import BottomNavHeaderItem from "./BottomNavHeaderItem.svelte";
+import BottomNavHeader from "./BottomNavHeader.svelte";
+import { bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem } from "./theme";
+export { BottomNav, BottomNavItem, bottomNav, bottomNavItem, BottomNavHeader, bottomnavheader, BottomNavHeaderItem, bottomnavheaderitem };