odj-svelte-ui 0.1.0

package/dist/bottom-navigation/theme.js

@@ -0,0 +1,113 @@
+import { tv } from "tailwind-variants";
+export const bottomNav = tv({
+    slots: {
+        outer: "w-full z-30 border-gray-200 dark:bg-gray-700 dark:border-gray-600",
+        inner: "grid h-full max-w-lg mx-auto"
+    },
+    variants: {
+        position: {
+            static: { outer: "static" },
+            fixed: { outer: "fixed" },
+            absolute: { outer: "absolute" },
+            relative: { outer: "relative" },
+            sticky: { outer: "sticky" }
+        },
+        navType: {
+            default: { outer: "bottom-0 start-0 h-16 bg-white border-t" },
+            border: { outer: "bottom-0 start-0 h-16 bg-white border-t" },
+            application: {
+                outer: "h-16 max-w-lg -translate-x-1/2 rtl:translate-x-1/2 bg-white border rounded-full bottom-4 start-1/2"
+            },
+            pagination: {
+                outer: "bottom-0 h-16 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
+            },
+            group: {
+                outer: "bottom-0 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
+            },
+            card: { outer: "bottom-0 start-0 h-16 bg-white border-t" },
+            meeting: {
+                outer: "bottom-0 start-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
+                inner: "flex items-center justify-center mx-auto"
+            },
+            video: {
+                outer: "bottom-0 start-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
+                inner: "flex items-center w-full"
+            }
+        }
+    },
+    defaultVariants: {
+        position: "fixed",
+        navType: "default"
+    }
+});
+export const bottomNavItem = tv({
+    slots: {
+        base: "inline-flex flex-col items-center justify-center",
+        span: "text-sm"
+    },
+    variants: {
+        navType: {
+            default: {
+                base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+            },
+            border: {
+                base: "px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600",
+                span: "text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+            },
+            application: {
+                base: "",
+                span: "sr-only"
+            },
+            pagination: {
+                base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "sr-only"
+            },
+            group: {
+                base: "p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "sr-only"
+            },
+            card: {
+                base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+                span: "text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+            },
+            meeting: {
+                base: "",
+                span: ""
+            },
+            video: {
+                base: "",
+                span: ""
+            }
+        },
+        appBtnPosition: {
+            left: {
+                base: "px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
+            },
+            middle: { base: "px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group" },
+            right: {
+                base: "px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
+            }
+        }
+    },
+    defaultVariants: {
+        navType: "default",
+        appBtnPosition: "middle",
+        active: false
+    }
+});
+export const bottomnavheader = tv({
+    slots: {
+        innerDiv: "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600",
+        outerDiv: "w-full"
+    }
+});
+export const bottomnavheaderitem = tv({
+    base: "px-5 py-1.5 text-xs font-medium rounded-lg",
+    variants: {
+        active: {
+            true: "text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900",
+            false: "text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
+        }
+    }
+});

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

@@ -0,0 +1,42 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type BottomNavVariantType = "border" | "application" | "group" | "default" | "pagination" | "card" | "meeting" | "video" | undefined;
+type PositionType = "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
+type BottomNavContextType = {
+    activeClass: string | undefined | null;
+};
+type AppBtnPositionType = "middle" | "left" | "right" | undefined;
+interface BottomNavProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    activeUrl?: string;
+    position?: PositionType;
+    navType?: BottomNavVariantType;
+    outerClass?: string;
+    innerClass?: string;
+    activeClass?: string;
+}
+interface BaseBottomNavItemProps {
+    children: Snippet;
+    btnName?: string;
+    appBtnPosition?: AppBtnPositionType;
+    target?: string;
+    activeClass?: string;
+    btnClass?: string;
+    spanClass?: string;
+}
+type BottomNavItemProps = BaseBottomNavItemProps & (({
+    href: string;
+} & HTMLAnchorAttributes) | ({
+    href?: never;
+} & HTMLButtonAttributes));
+interface BottomNavHeaderProps {
+    children: Snippet;
+    outerClass?: string;
+    innerClass?: string;
+}
+interface BottomNavHeaderItemProps extends HTMLButtonAttributes {
+    itemName: string;
+    active?: boolean;
+}
+export { type BottomNavProps, type BottomNavItemProps, type BottomNavContextType, type BottomNavVariantType, type BottomNavHeaderProps, type BottomNavHeaderItemProps };

package/dist/bottom-navigation/type.js

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

package/dist/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { type BreadcrumbProps as Props, breadcrumb } from "./index";
+
+  let { children, solid = false, navClass, olClass, ariaLabel = "Breadcrumb", ...restProps }: Props = $props();
+
+  // Get merged theme from context
+  const context = getContext<Record<string, any>>("themeConfig");
+  // Use context theme if available, otherwise fallback to default
+  const usedBreadcrumb = context?.breadcrumb || breadcrumb;
+
+  const { nav, list } = usedBreadcrumb({ solid });
+  let classNav = $derived(nav({ class: navClass }));
+  let classList = $derived(list({ class: olClass }));
+</script>
+
+<nav aria-label={ariaLabel} {...restProps} class={classNav}>
+  <ol class={classList}>
+    {@render children()}
+  </ol>
+</nav>

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type BreadcrumbProps as Props } from "./index";
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { type BreadcrumbItemProps as Props, breadcrumb } from "./index";
+  import { twMerge } from "tailwind-merge";
+
+  let { children, icon, home = false, href, linkClass, spanClass, homeClass, class: className, ...restProps }: Props = $props();
+
+  const { item, icon: breacrumbIcon } = breadcrumb({
+    home,
+    hasHref: !!href,
+    class: className
+  });
+</script>
+
+<li {...restProps} class={item()}>
+  {#if home}
+    <a class={item({ home: true, class: homeClass })} {href}>
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <svg class="me-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+        </svg>
+      {/if}
+
+      {@render children()}
+    </a>
+  {:else}
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <svg class={breacrumbIcon()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+      </svg>
+    {/if}
+
+    {#if href}
+      <a class={twMerge(item({ home: false, hasHref: true }), linkClass)} {href}>
+        {@render children()}
+      </a>
+    {:else}
+      <span class={twMerge(item({ home: false, hasHref: false }), spanClass)}>
+        {@render children()}
+      </span>
+    {/if}
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:icon: any;
+@props:home: any = false;
+@props:href: any;
+@props:linkClass: any;
+@props:spanClass: any;
+@props:homeClass: any;
+@props:class: string;
+-->

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type BreadcrumbItemProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:icon: any;
+ * @props:home: any = false;
+ * @props:href: any;
+ * @props:linkClass: any;
+ * @props:spanClass: any;
+ * @props:homeClass: any;
+ * @props:class: string;
+ */
+declare const BreadcrumbItem: import("svelte").Component<Props, {}, "">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,5 @@
+import type { BreadcrumbProps, BreadcrumbItemProps } from "./type";
+import Breadcrumb from "./Breadcrumb.svelte";
+import BreadcrumbItem from "./BreadcrumbItem.svelte";
+import { breadcrumb } from "./theme";
+export { Breadcrumb, BreadcrumbItem, breadcrumb, type BreadcrumbProps, type BreadcrumbItemProps };

package/dist/breadcrumb/index.js

@@ -0,0 +1,4 @@
+import Breadcrumb from "./Breadcrumb.svelte";
+import BreadcrumbItem from "./BreadcrumbItem.svelte";
+import { breadcrumb } from "./theme";
+export { Breadcrumb, BreadcrumbItem, breadcrumb };

package/dist/breadcrumb/theme.d.ts

@@ -0,0 +1,121 @@
+export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
+    solid: {
+        true: {
+            nav: string;
+        };
+        false: string;
+    };
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    nav: string;
+    list: string;
+    item: string;
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    solid: {
+        true: {
+            nav: string;
+        };
+        false: string;
+    };
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    solid: {
+        true: {
+            nav: string;
+        };
+        false: string;
+    };
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}>, {
+    solid: {
+        true: {
+            nav: string;
+        };
+        false: string;
+    };
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    nav: string;
+    list: string;
+    item: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    solid: {
+        true: {
+            nav: string;
+        };
+        false: string;
+    };
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    nav: string;
+    list: string;
+    item: string;
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    solid: {
+        true: {
+            nav: string;
+        };
+        false: string;
+    };
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}, {
+    solid: {
+        true: {
+            nav: string;
+        };
+        false: string;
+    };
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/breadcrumb/theme.js

@@ -0,0 +1,51 @@
+import { tv } from "tailwind-variants";
+export const breadcrumb = tv({
+    slots: {
+        nav: "flex",
+        list: "inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse",
+        item: "inline-flex items-center",
+        icon: "h-6 w-6 text-gray-400 rtl:-scale-x-100"
+    },
+    variants: {
+        solid: {
+            true: {
+                nav: "px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
+            },
+            false: ""
+        },
+        home: {
+            true: "",
+            false: ""
+        },
+        hasHref: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            home: true,
+            class: {
+                item: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
+                icon: "me-2 h-4 w-4"
+            }
+        },
+        {
+            home: false,
+            hasHref: true,
+            class: {
+                item: "ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white"
+            }
+        },
+        {
+            home: false,
+            hasHref: false,
+            class: {
+                item: "ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400"
+            }
+        }
+    ],
+    defaultVariants: {
+        solid: false
+    }
+});

package/dist/breadcrumb/type.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { HTMLLiAttributes } from "svelte/elements";
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    solid?: boolean;
+    navClass?: string;
+    olClass?: string;
+    ariaLabel?: string;
+    class?: string;
+}
+interface BreadcrumbItemProps extends HTMLLiAttributes {
+    children: Snippet;
+    icon?: Snippet;
+    home?: boolean;
+    href?: string;
+    linkClass?: string;
+    spanClass?: string;
+    homeClass?: string;
+    class?: string;
+}
+export { type BreadcrumbProps, type BreadcrumbItemProps };

package/dist/breadcrumb/type.js

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

package/dist/buttongroup/ButtonGroup.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type ButtonGroupProps as Props, buttonGroup } from "./index";
+
+  let { children, size = "md", class: className, ...restProps }: Props = $props();
+
+  let groupClass = $derived(buttonGroup({ size, className }));
+  setContext("group", size);
+</script>
+
+<div {...restProps} class={groupClass} role="group">
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:size: any = "md";
+@props:class: string;
+-->

package/dist/buttongroup/ButtonGroup.svelte.d.ts

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

package/dist/buttongroup/index.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonGroupProps } from "./type";
+import ButtonGroup from "./ButtonGroup.svelte";
+import { buttonGroup } from "./theme";
+export { ButtonGroup, buttonGroup, type ButtonGroupProps };

package/dist/buttongroup/index.js

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

package/dist/buttongroup/theme.d.ts

@@ -0,0 +1,44 @@
+declare const buttonGroup: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex rounded-lg shadow-sm", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex rounded-lg shadow-sm", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+export { buttonGroup };

package/dist/buttongroup/theme.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+const buttonGroup = tv({
+    base: "inline-flex rounded-lg shadow-sm",
+    variants: {
+        size: {
+            sm: "scale-90",
+            md: "scale-100",
+            lg: "scale-110"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+export { buttonGroup };

package/dist/buttongroup/type.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface ButtonGroupProps {
+    children: Snippet;
+    size?: SizeType;
+    class?: string;
+}
+type SizeType = "sm" | "md" | "lg" | undefined;
+export { type ButtonGroupProps };

package/dist/buttongroup/type.js

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

package/dist/buttons/Button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { SizeType } from "../types";
+  import { type ButtonProps as Props, button } from ".";
+
+  const group: SizeType = getContext("group");
+
+  let { children, pill = false, outline = false, size = group ? "sm" : "md", href, type = "button", color = group ? (outline ? "dark" : "alternative") : "primary", shadow = false, tag = "button", disabled, class: className, ...restProps }: Props = $props();
+
+  const base = $derived(button({ color, size, disabled, pill, group: !!group, outline, shadow, className }));
+</script>
+
+{#if href}
+  <a {href} {...restProps} class={base} role="button">
+    {@render children()}
+  </a>
+{:else if tag === "button"}
+  <button {type} {...restProps} class={base} {disabled}>
+    {@render children()}
+  </button>
+{:else}
+  <svelte:element this={tag} {...restProps} class={base}>
+    {@render children()}
+  </svelte:element>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:pill: any = false;
+@props:outline: any = false;
+@props:size: any = group ? "sm" : "md";
+@props:href: any;
+@props:type: any = "button";
+@props:color: any = group ? (outline ? "dark" : "alternative") : "primary";
+@props:shadow: any = false;
+@props:tag: any = "button";
+@props:disabled: any;
+@props:class: string;
+-->

package/dist/buttons/Button.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:pill: any = false;
+ * @props:outline: any = false;
+ * @props:size: any = group ? "sm" : "md";
+ * @props:href: any;
+ * @props:type: any = "button";
+ * @props:color: any = group ? (outline ? "dark" : "alternative") : "primary";
+ * @props:shadow: any = false;
+ * @props:tag: any = "button";
+ * @props:disabled: any;
+ * @props:class: string;
+ */
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;