odj-svelte-ui 0.1.1 → 0.2.1

package/dist/sidebar/Sidebar.svelte

@@ -1,21 +1,9 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { fly } from "svelte/transition";
   import { writable } from "svelte/store";
-  import { sineIn } from "svelte/easing";
   import { type SidebarProps as Props, sidebar, type SidebarCtxType } from ".";
 
-  let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, ...restProps }: Props = $props();
-
-  const breakpointValues = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    "2xl": 1536
-  };
-
-  let isLargeScreen = $state(false);
+  let { children, isSingle = true, breakpoint = "md", position = "fixed", divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, ...restProps }: Props = $props();
 
   const activeUrlStore = writable("");
   setContext("activeUrl", activeUrlStore);
@@ -23,69 +11,36 @@
     activeUrlStore.set(activeUrl);
   });
 
-  function checkScreenSize() {
-    isLargeScreen = window.innerWidth >= breakpointValues[breakpoint];
-  }
-
-  const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop }));
+  const { base, active, nonactive, div } = $derived(sidebar({ breakpoint, position }));
 
   let sidebarCtx: SidebarCtxType = {
-    get closeSidebar() {
-      return closeSidebar;
-    },
     get activeClass() {
       return active({ class: activeClass });
     },
     get nonActiveClass() {
       return nonactive({ class: nonActiveClass });
     },
-    isSingle
+    isSingle,
+    breakpoint
   };
 
-  let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
-
   setContext("sidebarContext", sidebarCtx);
-  $effect(() => {
-    checkScreenSize();
-    window.addEventListener("resize", checkScreenSize);
-    return () => window.removeEventListener("resize", checkScreenSize);
-  });
 </script>
 
-{#if isOpen || isLargeScreen}
-  {#if isOpen}
-    {#if backdrop && activateClickOutside}
-      <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={closeSidebar}></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={closeSidebar}></div>
-    {:else if !backdrop && !activateClickOutside}
-      <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
-    {/if}
-  {/if}
-  <aside transition:transition={transitionParams} {...restProps} class={base({ className })} aria-label={ariaLabel}>
-    <div class={div({ class: divClass })}>
-      {@render children()}
-    </div>
-  </aside>
-{/if}
+<aside {...restProps} class={base({ className })} aria-label={ariaLabel}>
+  <div class={div({ class: divClass })}>
+    {@render children()}
+  </div>
+</aside>
 
 <!--
 @component
 [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/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 };