odj-svelte-ui 0.1.0

package/dist/drawer/Drawer.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { ParamsType } from "../types";
+  import { fly } from "svelte/transition";
+  import { sineIn } from "svelte/easing";
+  import { type DrawerProps as Props, drawer } from ".";
+
+  let { children, drawerStatus, closeDrawer, activateClickOutside = true, position, width, backdrop = true, backdropClass, placement = "left", class: className, params = { x: -320, duration: 200, easing: sineIn }, transition = fly, ...restProps }: Props = $props();
+
+  const { base, backdrop: backdropCls } = $derived(
+    drawer({
+      position,
+      placement,
+      width,
+      backdrop
+    })
+  );
+</script>
+
+{#if drawerStatus}
+  {#if backdrop && activateClickOutside}
+    <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={closeDrawer}></div>
+  {:else if backdrop && !activateClickOutside}
+    <div role="presentation" class={backdropCls({ class: backdropClass })}></div>
+  {:else if !backdrop && activateClickOutside}
+    <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeDrawer}></div>
+  {/if}
+  <div {...restProps} class={base({ className })} transition:transition={params as ParamsType} tabindex="-1">
+    {@render children()}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:drawerStatus: any;
+@props:closeDrawer: any;
+@props:activateClickOutside: any = true;
+@props:position: any;
+@props:width: any;
+@props:backdrop: any = true;
+@props:backdropClass: any;
+@props:placement: any = "left";
+@props:class: string;
+@props:params: any = { x: -320;
+@props:duration: any;
+@props:easing: any;
+@props:transition: any = fly;
+-->

package/dist/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type DrawerProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:drawerStatus: any;
+ * @props:closeDrawer: any;
+ * @props:activateClickOutside: any = true;
+ * @props:position: any;
+ * @props:width: any;
+ * @props:backdrop: any = true;
+ * @props:backdropClass: any;
+ * @props:placement: any = "left";
+ * @props:class: string;
+ * @props:params: any = { x: -320;
+ * @props:duration: any;
+ * @props:easing: any;
+ * @props:transition: any = fly;
+ */
+declare const Drawer: import("svelte").Component<Props, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/drawer/Drawerhead.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { drawerhead, type DrawerheadProps as Props } from ".";
+
+  let { closeIcon, children, buttonClass, svgClass, class: className, ...restProps }: Props = $props();
+
+  const { base, button, svg } = $derived(drawerhead());
+</script>
+
+<div class={base({ className })}>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if closeIcon}
+    {@render closeIcon()}
+  {:else}
+    <button type="button" {...restProps} class={button({ class: buttonClass })}>
+      <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+      </svg>
+      <span class="sr-only">Close drawer</span>
+    </button>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: closeIcon: any;
+@props:children: any;
+@props:buttonClass: any;
+@props:svgClass: any;
+@props:class: string;
+-->

package/dist/drawer/Drawerhead.svelte.d.ts

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

package/dist/drawer/index.d.ts

@@ -0,0 +1,5 @@
+import type { DrawerProps, DrawerheadProps } from "./type";
+import Drawer from "./Drawer.svelte";
+import Drawerhead from "./Drawerhead.svelte";
+import { drawer, drawerhead } from "./theme";
+export { Drawer, drawer, Drawerhead, drawerhead, type DrawerProps, type DrawerheadProps };

package/dist/drawer/index.js

@@ -0,0 +1,4 @@
+import Drawer from "./Drawer.svelte";
+import Drawerhead from "./Drawerhead.svelte";
+import { drawer, drawerhead } from "./theme";
+export { Drawer, drawer, Drawerhead, drawerhead };

package/dist/drawer/theme.d.ts

@@ -0,0 +1,336 @@
+export declare const drawer: import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}>, {
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export declare const drawerhead: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    button: string;
+    svg: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    button: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    button: string;
+    svg: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;

package/dist/drawer/theme.js

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+export const drawer = tv({
+    slots: {
+        base: "overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800",
+        backdrop: "fixed top-0 start-0 z-50 w-full h-full"
+    },
+    variants: {
+        position: {
+            fixed: { base: "fixed" },
+            absolute: { base: "absolute" }
+        },
+        placement: {
+            left: { base: "inset-y-0 start-0" },
+            right: { base: "inset-y-0 end-0" },
+            top: { base: "inset-x-0 top-0" },
+            bottom: { base: "inset-x-0 bottom-0" }
+        },
+        width: {
+            default: { base: "w-80" },
+            full: { base: "w-full" },
+            half: { base: "w-1/2" }
+        },
+        backdrop: {
+            true: { backdrop: "bg-gray-900 bg-opacity-75" }
+        }
+    },
+    defaultVariants: {
+        position: "fixed",
+        placement: "left",
+        width: "default"
+    }
+});
+export const drawerhead = tv({
+    slots: {
+        base: "flex items-center",
+        button: "ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
+        svg: "h-3 w-3"
+    }
+});

package/dist/drawer/type.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { TransitionFunc, ParamsType } from "../types";
+type WidthType = "default" | "full" | "half" | undefined;
+type PlacementType = "left" | "right" | "top" | "bottom" | undefined;
+type PosisionType = "fixed" | "absolute" | undefined;
+interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    drawerStatus: boolean;
+    closeDrawer?: () => void;
+    activateClickOutside?: boolean;
+    position?: PosisionType;
+    width?: WidthType;
+    backdrop?: boolean;
+    backdropClass?: string;
+    placement?: PlacementType;
+    class?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+}
+interface DrawerheadProps extends HTMLButtonAttributes {
+    closeIcon?: Snippet;
+    children?: Snippet;
+    buttonClass?: string;
+    svgClass?: string;
+}
+export { type DrawerProps, type DrawerheadProps };

package/dist/drawer/type.js

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

package/dist/dropdown/Dropdown.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { type DropdownProps as Props, dropdown } from "./";
+  import { fly } from "svelte/transition";
+  import type { ParamsType } from "../types";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params, transition = fly, activeUrl = "", ...restProps }: Props = $props();
+
+  const { base, backdrop } = $derived(dropdown());
+  const activeUrlStore = writable("");
+  setContext("activeUrl", activeUrlStore);
+
+  $effect(() => {
+    activeUrlStore.set(activeUrl ?? "");
+  });
+</script>
+
+<!-- Dropdown menu -->
+{#if dropdownStatus}
+  <div {...restProps} class={base({ class: className })} transition:transition={params as ParamsType}>
+    {@render children()}
+  </div>
+
+  <div role="presentation" class={backdrop({ class: backdropClass })} onclick={closeDropdown}></div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:dropdownStatus: any = $bindable();
+@props:closeDropdown: any;
+@props:class: string;
+@props:backdropClass: any;
+@props:params: any;
+@props:transition: any = fly;
+@props:activeUrl: any = "";
+-->

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type DropdownProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:dropdownStatus: any = $bindable();
+ * @props:closeDropdown: any;
+ * @props:class: string;
+ * @props:backdropClass: any;
+ * @props:params: any;
+ * @props:transition: any = fly;
+ * @props:activeUrl: any = "";
+ */
+declare const Dropdown: import("svelte").Component<Props, {}, "dropdownStatus">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/dropdown/DropdownDivider.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { type DropdownDividerProps as Props, dropdowndivider } from "./";
+
+  let { class: divClass, ...restProps }: Props = $props();
+  const base = dropdowndivider({ class: divClass });
+</script>
+
+<div {...restProps} class={base}></div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: class: string;
+-->

package/dist/dropdown/DropdownDivider.svelte.d.ts

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

package/dist/dropdown/DropdownFooter.svelte

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

package/dist/dropdown/DropdownFooter.svelte.d.ts

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

package/dist/dropdown/DropdownHeader.svelte

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

package/dist/dropdown/DropdownHeader.svelte.d.ts

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