odj-svelte-ui 0.1.0

package/dist/sidebar/theme.d.ts

@@ -0,0 +1,517 @@
+export declare const sidebar: import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        static: {
+            base: string;
+        };
+    };
+    isOpen: {
+        true: string;
+        false: string;
+    };
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    active: string;
+    nonactive: string;
+    div: string;
+    backdrop: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        static: {
+            base: string;
+        };
+    };
+    isOpen: {
+        true: string;
+        false: string;
+    };
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        static: {
+            base: string;
+        };
+    };
+    isOpen: {
+        true: string;
+        false: string;
+    };
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}>, {
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        static: {
+            base: string;
+        };
+    };
+    isOpen: {
+        true: string;
+        false: string;
+    };
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    active: string;
+    nonactive: string;
+    div: string;
+    backdrop: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        static: {
+            base: string;
+        };
+    };
+    isOpen: {
+        true: string;
+        false: string;
+    };
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    active: string;
+    nonactive: string;
+    div: string;
+    backdrop: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        static: {
+            base: string;
+        };
+    };
+    isOpen: {
+        true: string;
+        false: string;
+    };
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    position: {
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        static: {
+            base: string;
+        };
+    };
+    isOpen: {
+        true: string;
+        false: string;
+    };
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export declare const sidebarbutton: import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+}, undefined, "inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+}, {
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+}>, {
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+}, undefined, "inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", import("tailwind-variants/dist/config").TVConfig<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+}, {
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const sidebarcta: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    div: string;
+    span: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    div: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    div: string;
+    span: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const sitebarbrand: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    img: string;
+    span: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    img: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    img: string;
+    span: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const sidebardropdownwrapper: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            btn?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            btn?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    btn: string;
+    span: string;
+    svg: string;
+    ul: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            btn?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            btn?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    btn: string;
+    span: string;
+    svg: string;
+    ul: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    btn: string;
+    span: string;
+    svg: string;
+    ul: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            btn?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;

package/dist/sidebar/theme.js

@@ -0,0 +1,66 @@
+import { tv } from "tailwind-variants";
+export const sidebar = tv({
+    slots: {
+        base: "top-0 left-0 z-50 w-64 transition-transform bg-gray-50 dark:bg-gray-800",
+        active: "flex items-center text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700",
+        nonactive: "flex items-center text-base font-normal text-gray-900 rounded dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700",
+        div: "overflow-y-auto h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800",
+        backdrop: "fixed top-0 start-0 z-40 w-full h-full"
+    },
+    variants: {
+        position: {
+            fixed: { base: "fixed" },
+            absolute: { base: "absolute" },
+            static: { base: "static" }
+        },
+        isOpen: {
+            true: "block",
+            false: "hidden"
+        },
+        breakpoint: {
+            sm: { base: "sm:block" },
+            md: { base: "md:block" },
+            lg: { base: "lg:block" },
+            xl: { base: "xl:block" },
+            "2xl": { base: "2xl:block" }
+        },
+        backdrop: {
+            true: { backdrop: "bg-gray-900 bg-opacity-75" }
+        }
+    }
+});
+export const sidebarbutton = tv({
+    base: "inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+    variants: {
+        breakpoint: {
+            sm: "sm:hidden",
+            md: "md:hidden",
+            lg: "lg:hidden",
+            xl: "xl:hidden",
+            "2xl": "2xl:hidden"
+        }
+    }
+});
+export const sidebarcta = tv({
+    slots: {
+        base: "p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900",
+        div: "flex items-center mb-3",
+        span: "bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900"
+    }
+});
+export const sitebarbrand = tv({
+    slots: {
+        base: "flex items-center ps-2.5 mb-5",
+        img: "h-6 me-3 sm:h-7",
+        span: "self-center text-xl font-semibold whitespace-nowrap dark:text-white"
+    }
+});
+export const sidebardropdownwrapper = tv({
+    slots: {
+        base: "",
+        btn: "flex items-center w-full text-base font-normal text-gray-900 rounded transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+        span: "flex-1 ms-3 text-left whitespace-nowrap",
+        svg: "h-3 w-3 text-gray-800 dark:text-white",
+        ul: "py-2 space-y-2"
+    }
+});

package/dist/sidebar/type.d.ts

@@ -0,0 +1,85 @@
+import { type Writable } from "svelte/store";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+import type { TransitionFunc, ParamsType } from "../types";
+type SidebarCtxType = {
+    closeSidebar?: () => void;
+    activeClass?: string;
+    nonActiveClass?: string;
+    isSingle?: boolean;
+    selected?: Writable<object>;
+    activeUrl?: string;
+};
+type BreakpointType = "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+type PosisionType = "fixed" | "absolute" | "static" | undefined;
+interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    isOpen?: boolean;
+    closeSidebar?: () => void;
+    activateClickOutside?: boolean;
+    isSingle?: boolean;
+    breakpoint?: BreakpointType;
+    position?: PosisionType;
+    ariaLabel?: string;
+    divClass?: string;
+    nonActiveClass?: string;
+    activeClass?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+    backdrop?: boolean;
+    backdropClass?: string;
+    activeUrl?: string;
+}
+interface SidebarButtonProps extends HTMLButtonAttributes {
+    breakpoint?: BreakpointType;
+}
+interface SidebarCtaProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    icon?: Snippet;
+    divClass?: string;
+    spanClass?: string;
+    label: string;
+}
+interface SiteType {
+    name?: string;
+    href?: string;
+    img?: string;
+}
+interface SidebarBrandProps extends HTMLAnchorAttributes {
+    children?: Snippet;
+    site?: SiteType;
+    imgClass?: string;
+    spanClass?: string;
+}
+interface SidebarDropdownWrapperProps extends HTMLButtonAttributes {
+    children: Snippet;
+    arrowup?: Snippet;
+    arrowdown?: Snippet;
+    iconSlot?: Snippet;
+    isOpen?: boolean | undefined;
+    btnClass?: string;
+    label: string | undefined;
+    spanClass?: string;
+    ulClass?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+    svgClass?: string;
+    onclick?: () => void;
+    isSingle?: boolean;
+}
+interface SidebarGroupProps extends HTMLAttributes<HTMLUListElement> {
+    children: Snippet;
+    borderClass?: string;
+    border?: boolean;
+}
+interface SidebarItemProps extends HTMLAnchorAttributes {
+    iconSlot?: Snippet;
+    subtext?: Snippet;
+    label?: string;
+    spanClass?: string;
+    activeClass?: string;
+    nonActiveClass?: string;
+    aClass?: string;
+    active?: boolean;
+}
+export type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarCtxType, SidebarButtonProps, SidebarCtaProps, SidebarBrandProps, BreakpointType, PosisionType };

package/dist/sidebar/type.js

@@ -0,0 +1 @@
+import {} from "svelte/store";

package/dist/skeleton/CardPlaceholder.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { type CardPlaceholderProps as Props, cardPlaceholder } from "./index";
+
+  let { size = "sm", class: className, ...restProps }: Props = $props();
+
+  const { base, imageArea, imageIcon, line, footerArea } = $derived(cardPlaceholder({ size }));
+</script>
+
+<div role="status" {...restProps} class={base({ className })}>
+  <div class={imageArea()}>
+    <svg width="48" height="48" class={imageIcon()} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
+      <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"></path>
+    </svg>
+  </div>
+  <div class={line({ class: "mb-4 h-2.5 w-1/2" })}></div>
+  <div class={line({ class: "mb-2.5 h-2" })}></div>
+  <div class={line({ class: "mb-2.5 h-2" })}></div>
+  <div class={line({ class: "h-2" })}></div>
+  <div class={footerArea()}>
+    <svg class={line({ class: "h-14 w-14" })} aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
+    </svg>
+    <div class={line({ class: "mb-2 h-2.5 w-32" })}></div>
+    <div class={line({ class: "mb-2 h-2 w-32" })}></div>
+  </div>
+  <span class="sr-only">Loading...</span>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: size: any = "sm";
+@props:class: string;
+-->