odj-svelte-ui 0.2.0 → 0.2.2

package/dist/sidebar/Sidebar.svelte.d.ts

@@ -3,16 +3,9 @@ import { type SidebarProps as Props } from ".";
  * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
  * ## Props
  * @props: children: any;
- * @props:isOpen: any = false;
- * @props:closeSidebar: any;
  * @props:isSingle: any = true;
  * @props:breakpoint: any = "md";
  * @props:position: any = "fixed";
- * @props:activateClickOutside: any = true;
- * @props:backdrop: any = true;
- * @props:backdropClass: any;
- * @props:transition: any = fly;
- * @props:params: any;
  * @props:divClass: any;
  * @props:ariaLabel: any;
  * @props:nonActiveClass: any;

package/dist/sidebar/SidebarGroup.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-  import { type SidebarGroupProps as Props } from ".";
+  import { type SidebarGroupProps as Props, sidebargroup, type SidebarCtxType } from ".";
+  import { getContext } from "svelte";
 
-  let { children, class: className = "space-y-2", borderClass = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700", border = false, ...restProps }: Props = $props();
+  const context = getContext<SidebarCtxType>("sidebarContext") ?? {};
+
+  let { children, class: className, border = false, ...restProps }: Props = $props();
+  const { base } = $derived(sidebargroup({ breakpoint: context.breakpoint, border }));
 </script>
 
-<ul {...restProps} class={border ? borderClass : className}>
+<ul {...restProps} class={base({ className })}>
   {@render children()}
 </ul>
 
@@ -14,6 +18,5 @@
 ## Props
 @props: children: any;
 @props:class: string = "space-y-2";
-@props:borderClass: any = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700";
-@props:border: any = false;
+@props:border:boolean = false;
 -->

package/dist/sidebar/SidebarGroup.svelte.d.ts

@@ -4,8 +4,7 @@ import { type SidebarGroupProps as Props } from ".";
  * ## Props
  * @props: children: any;
  * @props:class: string = "space-y-2";
- * @props:borderClass: any = "pt-4 mt-4 border-t border-gray-200 dark:border-gray-700";
- * @props:border: any = false;
+ * @props:border:boolean = false;
  */
 declare const SidebarGroup: import("svelte").Component<Props, {}, "">;
 type SidebarGroup = ReturnType<typeof SidebarGroup>;

package/dist/sidebar/SidebarItem.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <li class={className}>
-  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={twMerge(aCls, aClass)}>
+  <a {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={twMerge(aCls, aClass)}>
     {#if iconSlot}
       {@render iconSlot()}
     {/if}

package/dist/sidebar/index.d.ts

@@ -1,10 +1,9 @@
-import type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarButtonProps, SidebarCtaProps, SidebarBrandProps, SidebarCtxType, PosisionType, BreakpointType } from "./type";
+import type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarCtaProps, SidebarBrandProps, SidebarCtxType, PosisionType, BreakpointType } from "./type";
 import Sidebar from "./Sidebar.svelte";
 import SidebarDropdownWrapper from "./SidebarDropdownWrapper.svelte";
 import SidebarGroup from "./SidebarGroup.svelte";
 import SidebarItem from "./SidebarItem.svelte";
-import SidebarButton from "./SidebarButton.svelte";
 import SidebarCta from "./SidebarCta.svelte";
 import SidebarBrand from "./SidebarBrand.svelte";
-import { sidebar, sidebarbutton, sidebarcta, sitebarbrand, sidebardropdownwrapper } from "./theme";
-export { Sidebar, sidebar, type SidebarProps, SidebarDropdownWrapper, sidebardropdownwrapper, type SidebarDropdownWrapperProps, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarCtxType, SidebarButton, sidebarbutton, type SidebarButtonProps, SidebarCta, sidebarcta, type SidebarCtaProps, SidebarBrand, sitebarbrand, type SidebarBrandProps, type BreakpointType, type PosisionType };
+import { sidebar, sidebarcta, sitebarbrand, sidebargroup, sidebardropdownwrapper } from "./theme";
+export { Sidebar, sidebar, type SidebarProps, SidebarDropdownWrapper, sidebardropdownwrapper, type SidebarDropdownWrapperProps, SidebarGroup, sidebargroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarCtxType, SidebarCta, sidebarcta, type SidebarCtaProps, SidebarBrand, sitebarbrand, type SidebarBrandProps, type BreakpointType, type PosisionType };

package/dist/sidebar/index.js

@@ -2,8 +2,7 @@ import Sidebar from "./Sidebar.svelte";
 import SidebarDropdownWrapper from "./SidebarDropdownWrapper.svelte";
 import SidebarGroup from "./SidebarGroup.svelte";
 import SidebarItem from "./SidebarItem.svelte";
-import SidebarButton from "./SidebarButton.svelte";
 import SidebarCta from "./SidebarCta.svelte";
 import SidebarBrand from "./SidebarBrand.svelte";
-import { sidebar, sidebarbutton, sidebarcta, sitebarbrand, sidebardropdownwrapper } from "./theme";
-export { Sidebar, sidebar, SidebarDropdownWrapper, sidebardropdownwrapper, SidebarGroup, SidebarItem, SidebarButton, sidebarbutton, SidebarCta, sidebarcta, SidebarBrand, sitebarbrand };
+import { sidebar, sidebarcta, sitebarbrand, sidebargroup, sidebardropdownwrapper } from "./theme";
+export { Sidebar, sidebar, SidebarDropdownWrapper, sidebardropdownwrapper, SidebarGroup, sidebargroup, SidebarItem, SidebarCta, sidebarcta, SidebarBrand, sitebarbrand };

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<{