odj-svelte-ui 0.1.0

package/dist/elements/utils/Popper.svelte.d.ts

@@ -0,0 +1,68 @@
+import type { Placement } from '@floating-ui/dom';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let activeContent: boolean = false;
+ * @prop export let arrow: boolean = true;
+ * @prop export let offset: number = 8;
+ * @prop export let placement: Placement = 'top';
+ * @prop export let trigger: 'hover' | 'click' = 'hover';
+ * @prop export let triggeredBy: string | undefined = undefined;
+ * @prop export let reference: string | undefined = undefined;
+ * @prop export let strategy: 'absolute' | 'fixed' = 'absolute';
+ * @prop export let open: boolean = false;
+ * @prop export let yOnly: boolean = false;
+ */
+declare const Popper: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    activeContent?: boolean;
+    arrow?: boolean;
+    offset?: number;
+    placement?: Placement;
+    trigger?: "hover" | "click";
+    triggeredBy?: string;
+    reference?: string;
+    strategy?: "absolute" | "fixed";
+    open?: boolean;
+    yOnly?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Popper = InstanceType<typeof Popper>;
+export default Popper;

package/dist/elements/utils/Wrapper.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Action } from 'svelte/action';
+
+  export let tag: string = 'div';
+  export let show: boolean;
+  export let use: Action<HTMLElement, any> = () => {};
+</script>
+
+{#if show}
+  <svelte:element this={tag} use:use {...$$restProps}><slot /></svelte:element>
+{:else}
+  <slot />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let tag: string = 'div';
+@prop export let show: boolean;
+@prop export let use: Action<HTMLElement, any> = () => {};
+-->

package/dist/elements/utils/Wrapper.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Action } from 'svelte/action';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let tag: string = 'div';
+ * @prop export let show: boolean;
+ * @prop export let use: Action<HTMLElement, any> = () => {};
+ */
+declare const Wrapper: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    tag?: string | undefined;
+    show: boolean;
+    use?: Action<HTMLElement, any> | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Wrapper = InstanceType<typeof Wrapper>;
+export default Wrapper;

package/dist/elements/utils/backdrop.d.ts

@@ -0,0 +1,6 @@
+export declare let open: boolean;
+export declare let placement: string;
+export declare const init: (node: HTMLElement, _open: boolean) => {
+    update(_open: boolean): void;
+    destroy(): void;
+};

package/dist/elements/utils/backdrop.js

@@ -0,0 +1,82 @@
+import { createEventDispatcher } from 'svelte';
+export let open = false;
+const backdropClasses = 'bg-neutral-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+export let placement;
+// const placement:
+// 		| 'top-left'
+// 		| 'top-center'
+// 		| 'top-right'
+// 		| 'center-left'
+// 		| 'center'
+// 		| 'center-right'
+// 		| 'bottom-left'
+// 		| 'bottom-center'
+// 		| 'bottom-right'='center';
+export const init = (node, _open) => {
+    getPlacementClasses().map((c) => node.classList.add(c));
+    _open && createBackdrop(node);
+    return {
+        update(_open) {
+            allPlacementClasses.map((c) => node.classList.remove(c));
+            getPlacementClasses().map((c) => node.classList.add(c));
+            _open ? createBackdrop(node) : destroyBackdrop(node);
+        },
+        destroy() {
+            destroyBackdrop(node);
+        }
+    };
+};
+const getPlacementClasses = () => {
+    switch (placement) {
+        // top
+        case 'top-left':
+            return ['justify-start', 'items-start'];
+        case 'top-center':
+            return ['justify-center', 'items-start'];
+        case 'top-right':
+            return ['justify-end', 'items-start'];
+        // center
+        case 'center-left':
+            return ['justify-start', 'items-center'];
+        case 'center':
+            return ['justify-center', 'items-center'];
+        case 'center-right':
+            return ['justify-end', 'items-center'];
+        // bottom
+        case 'bottom-left':
+            return ['justify-start', 'items-end'];
+        case 'bottom-center':
+            return ['justify-center', 'items-end'];
+        case 'bottom-right':
+            return ['justify-end', 'items-end'];
+        default:
+            return ['justify-center', 'items-center'];
+    }
+};
+const createBackdrop = (node) => {
+    if (!backdropEl) {
+        backdropEl = document.createElement('div');
+        backdropEl.classList.add(...backdropClasses.split(' '));
+        const body = document.body;
+        body.append(backdropEl);
+        body.style.overflow = 'hidden';
+        document.addEventListener('keydown', handleEscape, true);
+    }
+    dispatch('show', node);
+};
+const destroyBackdrop = (node) => {
+    const body = document.body;
+    body.style.overflow = 'auto';
+    if (backdropEl)
+        backdropEl.remove();
+    backdropEl = undefined;
+    document.removeEventListener('keydown', handleEscape, true);
+    dispatch('hide', node);
+};
+let backdropEl;
+const handleEscape = (e) => {
+    if (open && e.key === 'Escape')
+        open = false;
+};
+const dispatch = createEventDispatcher();
+const allPlacementClasses = ['justify-start', 'justify-center', 'justify-end', 'items-start', 'items-center', 'items-end'];

package/dist/elements/utils/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare const clickOutside: (node: HTMLElement, callback: () => void) => {
+    destroy(): void;
+};

package/dist/elements/utils/clickOutside.js

@@ -0,0 +1,15 @@
+export const clickOutside = (node, callback) => {
+    const handleClick = (event) => {
+        if (!event?.target)
+            return;
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            callback();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+};

package/dist/elements/utils/createEventDispatcher.d.ts

@@ -0,0 +1 @@
+export default function createEventDispatcher(): ((type: string, target: Element, detail: any) => void) | undefined;

package/dist/elements/utils/createEventDispatcher.js

@@ -0,0 +1,22 @@
+/*
+ Custom Event Dispatcher
+ 
+ Sets `target` in event data.
+
+ https://svelte.dev/repl/c93cbf99a8ca4f44912e662a8e3cbef7?version=3.37.0
+
+*/
+export default function createEventDispatcher() {
+    return;
+    const component = {};
+    return (type, target, detail) => {
+        const callbacks = component.$$.callbacks[type];
+        if (callbacks) {
+            const event = new CustomEvent(type, { detail });
+            target.dispatchEvent(event);
+            callbacks.slice().forEach((fn) => {
+                fn.call(component, event);
+            });
+        }
+    };
+}

package/dist/elements/utils/focusTrap.d.ts

@@ -0,0 +1 @@
+export default function focusTrap<Node extends HTMLElement>(node: Node, parameter?: any): void | import("svelte/action").ActionReturn<any, any>;

package/dist/elements/utils/focusTrap.js

@@ -0,0 +1,42 @@
+//
+// Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
+//
+
+// add all the elements inside modal which you want to make focusable
+const selectorTabbable = `
+  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+  textarea:not([disabled]):not([tabindex='-1']),
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
+
+/** @type {import('svelte/action').Action<HTMLElement, any>} */
+export default function focusTrap(node) {
+  /** @type {(e:KeyboardEvent)=>void} */
+  function handleFocusTrap(e) {
+    let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+    if (!isTabPressed) {
+      return;
+    }
+
+    const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
+
+    let index = tabbable.indexOf(document.activeElement ?? node);
+    if (index === -1 && e.shiftKey) index = 0;
+    index += tabbable.length + (e.shiftKey ? -1 : 1);
+    index %= tabbable.length;
+    /** @ts-ignore */
+    tabbable[index].focus();
+
+    e.preventDefault();
+  }
+
+  document.addEventListener('keydown', handleFocusTrap, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('keydown', handleFocusTrap, true);
+    }
+  };
+}

package/dist/elements/utils/generateId.d.ts

@@ -0,0 +1 @@
+export default function _default(): string;

package/dist/elements/utils/generateId.js

@@ -0,0 +1,5 @@
+let n = Date.now();
+
+export default function () {
+  return (++n).toString(36);
+}

package/dist/elements/video/Video.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let src: string;
+  export let type: string = 'video/mp4';
+  export let trackSrc: string = '';
+  export let srclang: string = 'en';
+  export let label: string = 'english_captions';
+
+  let videoClass = twMerge($$props.class);
+</script>
+
+<video {...$$restProps} class={videoClass}>
+  <source {src} {type} />
+  <slot />
+  <track src={trackSrc} kind="captions" {srclang} {label} />
+  Your browser does not support the video tag.
+</video>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let src: string;
+@prop export let type: string = 'video/mp4';
+@prop export let trackSrc: string = '';
+@prop export let srclang: string = 'en';
+@prop export let label: string = 'english_captions';
+-->

package/dist/elements/video/Video.svelte.d.ts

@@ -0,0 +1,43 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let src: string;
+ * @prop export let type: string = 'video/mp4';
+ * @prop export let trackSrc: string = '';
+ * @prop export let srclang: string = 'en';
+ * @prop export let label: string = 'english_captions';
+ */
+declare const Video: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    src: string;
+    type?: string | undefined;
+    trackSrc?: string | undefined;
+    srclang?: string | undefined;
+    label?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Video = InstanceType<typeof Video>;
+export default Video;

package/dist/footer/Footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { type FooterProps as Props, footer } from ".";
+
+  let { children, footerType = "default", class: className, ...restProps }: Props = $props();
+
+  const footerCls = $derived(footer({ footerType, className }));
+</script>
+
+<footer {...restProps} class={footerCls}>
+  {@render children()}
+</footer>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:footerType: any = "default";
+@props:class: string;
+-->

package/dist/footer/Footer.svelte.d.ts

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

package/dist/footer/FooterBrand.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { type FooterBrandProps as Props, footerBrand } from ".";
+
+  let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: Props = $props();
+
+  const { base, span, img } = $derived(footerBrand());
+</script>
+
+{#if href}
+  <a {...restProps} {href} class={base({ class: aClass })}>
+    {#if src}
+      <img {src} class={img({ class: imgClass })} {alt} />
+    {/if}
+    {#if name}
+      <span class={span({ class: spanClass })}>{name}</span>
+    {/if}
+    {#if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <img {src} class={img({ class: imgClass })} {alt} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:aClass: any;
+@props:spanClass: any;
+@props:imgClass: any;
+@props:href: any;
+@props:src: any;
+@props:alt: any;
+@props:name: any;
+-->

package/dist/footer/FooterBrand.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type FooterBrandProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:aClass: any;
+ * @props:spanClass: any;
+ * @props:imgClass: any;
+ * @props:href: any;
+ * @props:src: any;
+ * @props:alt: any;
+ * @props:name: any;
+ */
+declare const FooterBrand: import("svelte").Component<Props, {}, "">;
+type FooterBrand = ReturnType<typeof FooterBrand>;
+export default FooterBrand;

package/dist/footer/FooterCopyright.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { type FooterCopyrightProps as Props, footerCopyright } from ".";
+
+  let { spanClass, aClass, href, by, copyrightMessage = "All Rights Reserved.", year, ...restProps }: Props = $props();
+
+  if (!year) year = new Date().getFullYear();
+
+  const { base, link, bySpan } = $derived(footerCopyright());
+</script>
+
+<span class={base({ class: spanClass })}>
+  &copy; {year}
+  {#if href}
+    <a {...restProps} {href} class={link({ class: aClass })}>
+      {by}
+    </a>
+  {:else}
+    <span class={bySpan()}>{by}</span>
+  {/if}
+  {copyrightMessage}
+</span>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: spanClass: any;
+@props:aClass: any;
+@props:href: any;
+@props:by: any;
+@props:copyrightMessage: any = "All Rights Reserved.";
+@props:year: any;
+-->

package/dist/footer/FooterCopyright.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type FooterCopyrightProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: spanClass: any;
+ * @props:aClass: any;
+ * @props:href: any;
+ * @props:by: any;
+ * @props:copyrightMessage: any = "All Rights Reserved.";
+ * @props:year: any;
+ */
+declare const FooterCopyright: import("svelte").Component<Props, {}, "">;
+type FooterCopyright = ReturnType<typeof FooterCopyright>;
+export default FooterCopyright;

package/dist/footer/FooterIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { type FooterIconProps as Props, footerIcon } from ".";
+
+  let { children, href, ariaLabel, class: aClass, ...restProps }: Props = $props();
+
+  const aCls = $derived(footerIcon({ class: aClass }));
+</script>
+
+{#if href}
+  <a {...restProps} {href} aria-label={ariaLabel} class={aCls}>
+    {@render children()}
+  </a>
+{:else}
+  {@render children()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:href: any;
+@props:ariaLabel: any;
+@props:class: string;
+-->

package/dist/footer/FooterIcon.svelte.d.ts

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

package/dist/footer/FooterLi.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { type FooterLiProps as Props, footerLi } from "./";
+
+  let { children, liClass, aClass, href, ...restProps }: Props = $props();
+  const { base, link } = $derived(footerLi());
+</script>
+
+<li class={base({ class: liClass })}>
+  <a {...restProps} {href} class={link({ class: aClass })}>
+    {@render children()}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:liClass: any;
+@props:aClass: any;
+@props:href: any;
+-->

package/dist/footer/FooterLi.svelte.d.ts

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

package/dist/footer/FooterUl.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { type FooterUlProps as Props, footerUl } from "./";
+
+  let { class: ulClass, children, ...restProps }: Props = $props();
+  const base = $derived(footerUl({ class: ulClass }));
+</script>
+
+<ul {...restProps} class={base}>
+  {@render children()}
+</ul>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: class: string;
+@props:children: any;
+-->

package/dist/footer/FooterUl.svelte.d.ts

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

package/dist/footer/index.d.ts

@@ -0,0 +1,9 @@
+import type { FooterProps, FooterBrandProps, FooterCopyrightProps, FooterIconProps, FooterUlProps, FooterLiProps } from "./type";
+import Footer from "./Footer.svelte";
+import FooterBrand from "./FooterBrand.svelte";
+import FooterCopyright from "./FooterCopyright.svelte";
+import FooterIcon from "./FooterIcon.svelte";
+import FooterLi from "./FooterLi.svelte";
+import FooterUl from "./FooterUl.svelte";
+import { footer, footerBrand, footerCopyright, footerIcon, footerUl, footerLi } from "./theme";
+export { Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLi, FooterUl, footer, footerBrand, footerCopyright, footerIcon, footerUl, footerLi, type FooterProps, type FooterBrandProps, type FooterCopyrightProps, type FooterIconProps, type FooterUlProps, type FooterLiProps };

package/dist/footer/index.js

@@ -0,0 +1,8 @@
+import Footer from "./Footer.svelte";
+import FooterBrand from "./FooterBrand.svelte";
+import FooterCopyright from "./FooterCopyright.svelte";
+import FooterIcon from "./FooterIcon.svelte";
+import FooterLi from "./FooterLi.svelte";
+import FooterUl from "./FooterUl.svelte";
+import { footer, footerBrand, footerCopyright, footerIcon, footerUl, footerLi } from "./theme";
+export { Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLi, FooterUl, footer, footerBrand, footerCopyright, footerIcon, footerUl, footerLi };