odj-svelte-ui 0.2.0 → 0.2.1

package/dist/sidebar/theme.d.ts

@@ -10,38 +10,37 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isOpen: {
-        true: string;
-        false: string;
-    };
     breakpoint: {
+        none: {
+            base: string;
+            div: string;
+        };
         sm: {
             base: string;
+            div: string;
         };
         md: {
             base: string;
+            div: string;
         };
         lg: {
             base: string;
+            div: string;
         };
         xl: {
             base: string;
+            div: string;
         };
         "2xl": {
             base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
+            div: string;
         };
     };
 }, {
     base: string;
+    div: string;
     active: string;
     nonactive: string;
-    div: string;
-    backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
     position: {
         fixed: {
@@ -54,30 +53,30 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isOpen: {
-        true: string;
-        false: string;
-    };
     breakpoint: {
+        none: {
+            base: string;
+            div: string;
+        };
         sm: {
             base: string;
+            div: string;
         };
         md: {
             base: string;
+            div: string;
         };
         lg: {
             base: string;
+            div: string;
         };
         xl: {
             base: string;
+            div: string;
         };
         "2xl": {
             base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
+            div: string;
         };
     };
 }, {
@@ -92,30 +91,30 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isOpen: {
-        true: string;
-        false: string;
-    };
     breakpoint: {
+        none: {
+            base: string;
+            div: string;
+        };
         sm: {
             base: string;
+            div: string;
         };
         md: {
             base: string;
+            div: string;
         };
         lg: {
             base: string;
+            div: string;
         };
         xl: {
             base: string;
+            div: string;
         };
         "2xl": {
             base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
+            div: string;
         };
     };
 }>, {
@@ -130,38 +129,37 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isOpen: {
-        true: string;
-        false: string;
-    };
     breakpoint: {
+        none: {
+            base: string;
+            div: string;
+        };
         sm: {
             base: string;
+            div: string;
         };
         md: {
             base: string;
+            div: string;
         };
         lg: {
             base: string;
+            div: string;
         };
         xl: {
             base: string;
+            div: string;
         };
         "2xl": {
             base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
+            div: string;
         };
     };
 }, {
     base: string;
+    div: string;
     active: string;
     nonactive: string;
-    div: string;
-    backdrop: string;
 }, import("tailwind-variants").TVReturnType<{
     position: {
         fixed: {
@@ -174,38 +172,37 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isOpen: {
-        true: string;
-        false: string;
-    };
     breakpoint: {
+        none: {
+            base: string;
+            div: string;
+        };
         sm: {
             base: string;
+            div: string;
         };
         md: {
             base: string;
+            div: string;
         };
         lg: {
             base: string;
+            div: string;
         };
         xl: {
             base: string;
+            div: string;
         };
         "2xl": {
             base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
+            div: string;
         };
     };
 }, {
     base: string;
+    div: string;
     active: string;
     nonactive: string;
-    div: string;
-    backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
     position: {
         fixed: {
@@ -218,30 +215,30 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isOpen: {
-        true: string;
-        false: string;
-    };
     breakpoint: {
+        none: {
+            base: string;
+            div: string;
+        };
         sm: {
             base: string;
+            div: string;
         };
         md: {
             base: string;
+            div: string;
         };
         lg: {
             base: string;
+            div: string;
         };
         xl: {
             base: string;
+            div: string;
         };
         "2xl": {
             base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
+            div: string;
         };
     };
 }, {
@@ -256,88 +253,206 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
-    isOpen: {
-        true: string;
-        false: string;
-    };
     breakpoint: {
+        none: {
+            base: string;
+            div: string;
+        };
         sm: {
             base: string;
+            div: string;
         };
         md: {
             base: string;
+            div: string;
         };
         lg: {
             base: string;
+            div: string;
         };
         xl: {
             base: string;
+            div: string;
         };
         "2xl": {
             base: string;
-        };
-    };
-    backdrop: {
-        true: {
-            backdrop: string;
+            div: string;
         };
     };
 }>, unknown, unknown, undefined>>;
-export declare const sidebarbutton: import("tailwind-variants").TVReturnType<{
+export declare const sidebargroup: import("tailwind-variants").TVReturnType<{
     breakpoint: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    border: {
+        true: 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-hidden 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<{
+}, {
+    base: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
     breakpoint: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    border: {
+        true: string;
     };
 }, {
     breakpoint: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    border: {
+        true: string;
     };
 }>, {
     breakpoint: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+    border: {
+        true: string;
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
     breakpoint: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    border: {
+        true: 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-hidden 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<{
+}, {
+    base: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
     breakpoint: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    border: {
+        true: string;
     };
 }, {
     breakpoint: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        "2xl": {
+            base: string;
+        };
+    };
+    border: {
+        true: string;
     };
 }>, unknown, unknown, undefined>>;
 export declare const sidebarcta: import("tailwind-variants").TVReturnType<{

package/dist/sidebar/theme.js

@@ -1,11 +1,10 @@
 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-sm dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700",
-        nonactive: "flex items-center text-base font-normal text-gray-900 rounded-sm 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"
+        base: "top-0 left-0 z-10 min-w-full",
+        div: "overflow-y-auto p-2 rounded-lg bg-light-surface-100 dark:bg-dark-surface-800",
+        active: "cursor-pointer flex items-center p-2 rounded-lg text-base font-normal text-light-surface-900 dark:text-white bg-light-surface-300 dark:bg-dark-surface-700 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600",
+        nonactive: "cursor-pointer flex items-center p-2 rounded-lg text-base font-normal text-light-surface-700 dark:text-dark-surface-400 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600 hover:text-light-surface-800 dark:hover:text-dark-surface-200"
     },
     variants: {
         position: {
@@ -13,44 +12,44 @@ export const sidebar = tv({
             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/75" }
+            none: { base: "min-w-64 h-full", div: "h-full sm:rounded-none" },
+            sm: { base: "sm:min-w-64 sm:h-full", div: "sm:h-full sm:rounded-none" },
+            md: { base: "md:min-w-64 md:h-full", div: "md:h-full md:rounded-none" },
+            lg: { base: "lg:min-w-64 lg:h-full", div: "lg:h-full lg:rounded-none" },
+            xl: { base: "xl:min-w-64 xl:h-full", div: "xl:h-full xl:rounded-none" },
+            "2xl": { base: "2xl:min-w-64 2xl:h-full", div: "2xl:h-full 2xl:rounded-none" }
         }
     }
 });
-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-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+export const sidebargroup = tv({
+    slots: {
+        base: "flex flex-row gap-2"
+    },
     variants: {
         breakpoint: {
-            sm: "sm:hidden",
-            md: "md:hidden",
-            lg: "lg:hidden",
-            xl: "xl:hidden",
-            "2xl": "2xl:hidden"
+            none: { base: "flex-col" },
+            sm: { base: "sm:flex-col" },
+            md: { base: "md:flex-col" },
+            lg: { base: "lg:flex-col" },
+            xl: { base: "xl:flex-col" },
+            "2xl": { base: "2xl:flex-col" }
+        },
+        border: {
+            true: "pt-4 mt-4 border-t border-light-surface-200 dark:border-dark-surface-700"
         }
     }
 });
 export const sidebarcta = tv({
     slots: {
-        base: "p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900",
+        base: "p-4 mt-2 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-sm dark:bg-primary-200 dark:text-primary-900"
     }
 });
 export const sitebarbrand = tv({
     slots: {
-        base: "flex items-center ps-2.5 mb-5",
+        base: "flex items-center px-2 my-2",
         img: "h-6 me-3 sm:h-7",
         span: "self-center text-xl font-semibold whitespace-nowrap dark:text-white"
     }
@@ -58,9 +57,9 @@ export const sitebarbrand = tv({
 export const sidebardropdownwrapper = tv({
     slots: {
         base: "",
-        btn: "flex items-center w-full text-base font-normal text-gray-900 rounded-sm transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+        btn: "group w-full cursor-pointer flex items-center p-2 rounded-lg text-base font-normal text-light-surface-700 dark:text-dark-surface-400 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600 hover:text-light-surface-800 dark:hover:text-dark-surface-200",
         span: "flex-1 ms-3 text-left whitespace-nowrap",
-        svg: "h-3 w-3 text-gray-800 dark:text-white",
+        svg: "h-3 w-3 text-light-surface-700 dark:text-dark-surface-400 group-hover:text-light-surface-800 dark:group-hover:text-dark-surface-200",
         ul: "py-2 space-y-2"
     }
 });

package/dist/sidebar/type.d.ts

@@ -3,36 +3,26 @@ 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;
+    breakpoint?: BreakpointType;
 };
-type BreakpointType = "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+type BreakpointType = "sm" | "md" | "lg" | "xl" | "2xl" | "none" | 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;
+    ariaLabel?: 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;
@@ -69,7 +59,6 @@ interface SidebarDropdownWrapperProps extends HTMLButtonAttributes {
 }
 interface SidebarGroupProps extends HTMLAttributes<HTMLUListElement> {
     children: Snippet;
-    borderClass?: string;
     border?: boolean;
 }
 interface SidebarItemProps extends HTMLAnchorAttributes {
@@ -82,4 +71,4 @@ interface SidebarItemProps extends HTMLAnchorAttributes {
     aClass?: string;
     active?: boolean;
 }
-export type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarCtxType, SidebarButtonProps, SidebarCtaProps, SidebarBrandProps, BreakpointType, PosisionType };
+export type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarCtxType, SidebarCtaProps, SidebarBrandProps, BreakpointType, PosisionType };

package/dist/theme/Theme.svelte

@@ -61,7 +61,6 @@
     review,
     scorerating,
     sidebar,
-    sidebarbutton,
     sidebarcta,
     sitebarbrand,
     sidebardropdownwrapper,
@@ -216,7 +215,6 @@
     review,
     scorerating,
     sidebar,
-    sidebarbutton,
     sidebarcta,
     sitebarbrand,
     sidebardropdownwrapper,