odj-svelte-ui 0.1.0

package/dist/indicator/theme.js

@@ -0,0 +1,123 @@
+import { tv } from "tailwind-variants";
+const indicator = tv({
+    slots: {
+        base: "flex-shrink-0"
+    },
+    variants: {
+        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-500" },
+            secondary: { base: "bg-secondary-500" },
+            gray: { base: "bg-gray-200" },
+            red: { base: "bg-red-500" },
+            orange: { base: "bg-orange-600" },
+            amber: { base: "bg-amber-500" },
+            yellow: { base: "bg-yellow-300" },
+            lime: { base: "bg-lime-500" },
+            green: { base: "bg-green-500" },
+            emerald: { base: "bg-emerald-500" },
+            teal: { base: "bg-teal-500" },
+            cyan: { base: "bg-cyan-500" },
+            sky: { base: "bg-sky-500" },
+            blue: { base: "bg-blue-500" },
+            indigo: { base: "bg-indigo-500" },
+            violet: { base: "bg-violet-500" },
+            purple: { base: "bg-purple-500" },
+            fuchsia: { base: "bg-fuchsia-500" },
+            pink: { base: "bg-pink-500" },
+            rose: { base: "bg-rose-500" }
+        },
+        size: {
+            xs: { base: "w-2 h-2" },
+            sm: { base: "w-2.5 h-2.5" },
+            md: { base: "w-3 h-3" },
+            lg: { base: "w-3.5 h-3.5" },
+            xl: { base: "w-6 h-6" }
+        },
+        cornerStyle: {
+            rounded: { base: "rounded" },
+            circular: { base: "rounded-full" }
+        },
+        border: {
+            true: { base: "border border-gray-300 dark:border-gray-300" },
+            false: {}
+        },
+        hasChildren: {
+            true: { base: "inline-flex items-center justify-center" },
+            false: {}
+        },
+        placement: {
+            default: { base: "" },
+            "top-left": { base: "absolute top-0 start-0" },
+            "top-center": {
+                base: "absolute top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2"
+            },
+            "top-right": { base: "absolute top-0 end-0" },
+            "center-left": { base: "absolute top-1/2 -translate-y-1/2 start-0" },
+            center: {
+                base: "absolute top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2"
+            },
+            "center-right": { base: "absolute top-1/2 -translate-y-1/2 end-0" },
+            "bottom-left": { base: "absolute bottom-0 start-0" },
+            "bottom-center": {
+                base: "absolute bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2"
+            },
+            "bottom-right": { base: "absolute bottom-0 end-0" }
+        },
+        offset: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            placement: "top-left",
+            offset: true,
+            class: { base: "-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3" }
+        },
+        {
+            placement: "top-center",
+            offset: true,
+            class: { base: "-translate-y-1/3" }
+        },
+        {
+            placement: "top-right",
+            offset: true,
+            class: { base: "translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3" }
+        },
+        {
+            placement: "center-left",
+            offset: true,
+            class: { base: "-translate-x-1/3 rtl:translate-x-1/3" }
+        },
+        {
+            placement: "center-right",
+            offset: true,
+            class: { base: "translate-x-1/3 rtl:-translate-x-1/3" }
+        },
+        {
+            placement: "bottom-left",
+            offset: true,
+            class: { base: "-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3" }
+        },
+        {
+            placement: "bottom-center",
+            offset: true,
+            class: { base: "translate-y-1/3" }
+        },
+        {
+            placement: "bottom-right",
+            offset: true,
+            class: { base: "translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3" }
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "md",
+        cornerStyle: "circular",
+        border: false,
+        offset: true,
+        hasChildren: false
+    }
+});
+export { indicator };

package/dist/indicator/type.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ColorType = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+type SizeType = "md" | "sm" | "lg" | "xl" | "xs" | undefined;
+type PlacementType = "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | "default" | "center" | undefined;
+interface IndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    color?: ColorType;
+    cornerStyle?: "rounded" | "circular";
+    size?: SizeType;
+    border?: boolean;
+    placement?: PlacementType | undefined;
+    class?: string;
+    offset?: boolean;
+}
+export { type IndicatorProps };

package/dist/indicator/type.js

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

package/dist/kbd/Kbd.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { kbd, type KbdProps as Props } from ".";
+
+  let { children, class: kbdClass, ...restProps }: Props = $props();
+  const kbdCls = kbd();
+</script>
+
+<kbd {...restProps} class={twMerge(kbdCls, kbdClass)}>
+  {@render children()}
+</kbd>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:class: string;
+-->

package/dist/kbd/Kbd.svelte.d.ts

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

package/dist/kbd/index.d.ts

@@ -0,0 +1,4 @@
+import type { KbdProps } from "./type";
+import Kbd from "./Kbd.svelte";
+import { kbd } from "./theme";
+export { Kbd, kbd, type KbdProps };

package/dist/kbd/index.js

@@ -0,0 +1,3 @@
+import Kbd from "./Kbd.svelte";
+import { kbd } from "./theme";
+export { Kbd, kbd };

package/dist/kbd/theme.d.ts

@@ -0,0 +1 @@
+export declare const kbd: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/kbd/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const kbd = tv({
+    base: "text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500"
+});

package/dist/kbd/type.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    class: string | undefined | null;
+}
+export { type KbdProps };

package/dist/kbd/type.js

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

package/dist/list-group/Listgroup.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import ListgroupItem from "./ListgroupItem.svelte";
+  import { type ListgroupProps as Props, listGroup } from ".";
+
+  let { children, items, active, onclick, rounded = true, border = true, class: className, itemClass, iconClass, ...restProps }: Props = $props();
+  const base = $derived(listGroup({ rounded, border, className }));
+  let tag = active ? "div" : "ul";
+  setContext("active", active);
+</script>
+
+<svelte:element this={tag} {...restProps} class={base}>
+  {#if items}
+    {#each items as item}
+      {#if typeof item === "string"}
+        <ListgroupItem class={itemClass} {iconClass} {active} {onclick}>{item}</ListgroupItem>
+      {:else}
+        <ListgroupItem class={itemClass} {iconClass} {active} {...item} onclick={item.onclick ? item.onclick : onclick}>{item}</ListgroupItem>
+      {/if}
+    {/each}
+  {:else if children}
+    {@render children()}
+  {/if}
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:items: any;
+@props:active: any;
+@props:onclick: any;
+@props:rounded: any = true;
+@props:border: any = true;
+@props:class: string;
+@props:itemClass: any;
+@props:iconClass: any;
+-->

package/dist/list-group/Listgroup.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ListgroupProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:items: any;
+ * @props:active: any;
+ * @props:onclick: any;
+ * @props:rounded: any = true;
+ * @props:border: any = true;
+ * @props:class: string;
+ * @props:itemClass: any;
+ * @props:iconClass: any;
+ */
+declare const Listgroup: import("svelte").Component<Props, {}, "">;
+type Listgroup = ReturnType<typeof Listgroup>;
+export default Listgroup;

package/dist/list-group/ListgroupItem.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { tv } from "tailwind-variants";
+  import { type ListgroupItemProps as Props, listGroupItem } from ".";
+
+  let { children, onclick, active, current, disabled, name, Icon, href, currentClass = "text-white bg-primary-700 dark:text-white dark:bg-gray-800", normalClass, disabledClass = "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400", liClass = "py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg", class: className, aClasss, btnClass, iconClass = "me-2.5 h-5 w-5", ...restProps }: Props = $props();
+
+  active = getContext("active");
+
+  const itemClass = listGroupItem({
+    state: disabled ? "disabled" : current ? "current" : "normal",
+    active,
+    class: twMerge(liClass, disabled ? disabledClass : current ? currentClass : normalClass, className)
+  });
+
+  const buttonClass = tv({
+    base: "flex items-center text-left",
+    extend: listGroupItem
+  })({
+    state: disabled ? "disabled" : current ? "current" : "normal",
+    active,
+    class: twMerge(itemClass, btnClass)
+  });
+
+  const linkClass = tv({
+    base: "block",
+    extend: listGroupItem
+  })({
+    state: disabled ? "disabled" : current ? "current" : "normal",
+    active,
+    class: twMerge(itemClass, aClasss)
+  });
+</script>
+
+{#if !active && children}
+  <li class={itemClass}>
+    {@render children()}
+  </li>
+{:else if href}
+  <a {...restProps} {onclick} {href} class={linkClass} aria-current={current}>
+    {name}
+  </a>
+{:else}
+  <button type="button" {onclick} class={buttonClass} {disabled} aria-current={current}>
+    {#if Icon}
+      <Icon class={iconClass} />
+    {/if}
+    {#if name}
+      {name}
+    {:else}
+      {@render children()}
+    {/if}
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:onclick: any;
+@props:active: any;
+@props:current: any;
+@props:disabled: any;
+@props:name: any;
+@props:Icon: any;
+@props:href: any;
+@props:currentClass: any = "text-white bg-primary-700 dark:text-white dark:bg-gray-800";
+@props:normalClass: any;
+@props:disabledClass: any = "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400";
+@props:liClass: any = "py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg";
+@props:class: string;
+@props:aClasss: any;
+@props:btnClass: any;
+@props:iconClass: any = "me-2.5 h-5 w-5";
+-->

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type ListgroupItemProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:onclick: any;
+ * @props:active: any;
+ * @props:current: any;
+ * @props:disabled: any;
+ * @props:name: any;
+ * @props:Icon: any;
+ * @props:href: any;
+ * @props:currentClass: any = "text-white bg-primary-700 dark:text-white dark:bg-gray-800";
+ * @props:normalClass: any;
+ * @props:disabledClass: any = "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400";
+ * @props:liClass: any = "py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg";
+ * @props:class: string;
+ * @props:aClasss: any;
+ * @props:btnClass: any;
+ * @props:iconClass: any = "me-2.5 h-5 w-5";
+ */
+declare const ListgroupItem: import("svelte").Component<Props, {}, "">;
+type ListgroupItem = ReturnType<typeof ListgroupItem>;
+export default ListgroupItem;

package/dist/list-group/index.d.ts

@@ -0,0 +1,5 @@
+import type { ListgroupProps, ListgroupItemProps, ListGroupItemType } from "./type";
+import Listgroup from "./Listgroup.svelte";
+import ListgroupItem from "./ListgroupItem.svelte";
+import { listGroup, listGroupItem } from "./theme";
+export { Listgroup, ListgroupItem, listGroup, listGroupItem, type ListgroupProps, type ListgroupItemProps, type ListGroupItemType };

package/dist/list-group/index.js

@@ -0,0 +1,4 @@
+import Listgroup from "./Listgroup.svelte";
+import ListgroupItem from "./ListgroupItem.svelte";
+import { listGroup, listGroupItem } from "./theme";
+export { Listgroup, ListgroupItem, listGroup, listGroupItem };

package/dist/list-group/theme.d.ts

@@ -0,0 +1,135 @@
+export declare const listGroup: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-y divide-gray-200 dark:divide-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, {
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}>, {
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-y divide-gray-200 dark:divide-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}, {
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none", import("tailwind-variants/dist/config").TVConfig<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, {
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}>, {
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none", import("tailwind-variants/dist/config").TVConfig<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}, {
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/list-group/theme.js

@@ -0,0 +1,50 @@
+import { tv } from "tailwind-variants";
+export const listGroup = tv({
+    base: "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-y divide-gray-200 dark:divide-gray-600",
+    variants: {
+        rounded: {
+            true: "rounded-lg",
+            false: ""
+        },
+        border: {
+            true: "border border-gray-200 dark:border-gray-700",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            border: true,
+            class: "divide-gray-200 dark:divide-gray-700"
+        }
+    ],
+    defaultVariants: {
+        rounded: true,
+        border: true
+    }
+});
+export const listGroupItem = tv({
+    base: "py-2 px-4 w-full text-sm font-medium list-none",
+    variants: {
+        state: {
+            normal: "",
+            current: "",
+            disabled: ""
+        },
+        active: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            active: true,
+            state: "disabled",
+            class: "cursor-not-allowed"
+        },
+        {
+            active: true,
+            state: "normal",
+            class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
+        }
+    ]
+});

package/dist/list-group/type.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { Component } from "svelte";
+interface ListGroupItemType {
+    name: string;
+    Icon?: Component;
+    onclick?: () => void;
+    href?: string;
+    active?: boolean;
+    current?: boolean;
+    disabled?: boolean;
+    [key: string]: any;
+}
+interface ListgroupProps {
+    children?: Snippet;
+    items?: (ListGroupItemType | string)[];
+    active?: boolean;
+    onclick?: (event?: MouseEvent) => void;
+    rounded?: boolean;
+    border?: boolean;
+    class?: string;
+    itemClass?: string;
+    aClasss?: string;
+    btnClass?: string;
+    iconClass?: string;
+}
+interface ListgroupItemProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    onclick?: (event?: MouseEvent) => void;
+    active?: boolean;
+    current?: boolean;
+    disabled?: boolean;
+    name?: string;
+    Icon?: Component;
+    href?: string;
+    currentClass?: string;
+    normalClass?: string;
+    disabledClass?: string;
+    liClass?: string;
+    class?: string;
+    aClasss?: string;
+    btnClass?: string;
+    iconClass?: string;
+}
+export { type ListgroupProps, type ListgroupItemProps, type ListGroupItemType };

package/dist/list-group/type.js

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

package/dist/mega-menu/MegaMenu.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { type MegaMenuProps as Props, megamenu } from ".";
+
+  let { children, footer, items = [], full, dropdownStatus = $bindable(), class: className, ...restProps }: Props = $props();
+
+  const { base, div, ul, footerDiv } = $derived(megamenu());
+  $inspect("dropdownStatus", dropdownStatus);
+</script>
+
+<!-- Dropdown menu -->
+{#if dropdownStatus}
+  <div {...restProps} class={base({ className })}>
+    <div class={div()}>
+      <ul class={ul()}>
+        {#each items as item, index}
+          <li>
+            {@render children({ item, index })}
+          </li>
+        {:else}
+          {@render children({ item: items[0], index: 0 })}
+        {/each}
+      </ul>
+      {#if full && footer}
+        <div class={footerDiv()}>
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:footer: any;
+@props:items: any = [];
+@props:full: any;
+@props:dropdownStatus: any = $bindable();
+@props:class: string;
+-->

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type MegaMenuProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:footer: any;
+ * @props:items: any = [];
+ * @props:full: any;
+ * @props:dropdownStatus: any = $bindable();
+ * @props:class: string;
+ */
+declare const MegaMenu: import("svelte").Component<Props, {}, "dropdownStatus">;
+type MegaMenu = ReturnType<typeof MegaMenu>;
+export default MegaMenu;

package/dist/mega-menu/index.d.ts

@@ -0,0 +1,4 @@
+import type { MegaMenuProps } from "./type";
+import MegaMenu from "./MegaMenu.svelte";
+import { megamenu } from "./theme";
+export { MegaMenu, type MegaMenuProps, megamenu };