odj-svelte-ui 0.1.0

package/dist/sidebar/SidebarCta.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { type SidebarCtaProps as Props, sidebarcta } from ".";
+  let { children, icon, divClass, spanClass, label, class: className, ...restProps }: Props = $props();
+  const { base, div, span } = $derived(sidebarcta());
+</script>
+
+<div {...restProps} id="dropdown-cta" class={base({ className })} role="alert">
+  <div class={div({ class: divClass })}>
+    <span class={span({ class: spanClass })}>{label}</span>
+    {#if icon}
+      {@render icon()}
+    {/if}
+  </div>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:icon: any;
+@props:divClass: any;
+@props:spanClass: any;
+@props:label: any;
+@props:class: string;
+-->

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

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

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { writable, type Writable } from "svelte/store";
+  import type { ParamsType } from "../types";
+  import { slide } from "svelte/transition";
+  import { uiHelpers } from "..";
+  import { type SidebarDropdownWrapperProps as Props, sidebardropdownwrapper } from ".";
+
+  type SidebarContext = {
+    selected?: Writable<object | null>;
+    isSingle: boolean;
+  };
+
+  let { children, arrowup, arrowdown, iconSlot, isOpen = false, btnClass, label, spanClass, ulClass, transition = slide, params, svgClass, class: className, onclick, ...restProps }: Props = $props();
+
+  const { base, btn, span, svg, ul } = $derived(sidebardropdownwrapper());
+
+  let sidebarDropdown = uiHelpers();
+  sidebarDropdown.isOpen = isOpen;
+  let ctx = getContext<SidebarContext>("sidebarContext") || { isSingle: false };
+  let self = {};
+
+  // Create a new Writable store for tracking the selected dropdown if it doesn't exist in the context
+  if (ctx.isSingle && !ctx.selected) {
+    ctx.selected = writable<object | null>(null);
+  }
+
+  // Use the shared selected store if in single mode, otherwise use the local isOpen state
+  let selected: Writable<object | null> = ctx.isSingle ? ctx.selected! : writable(self);
+
+  $effect(() => {
+    if (ctx.isSingle) {
+      isOpen = $selected === self;
+    } else {
+      isOpen = sidebarDropdown.isOpen;
+    }
+  });
+
+  function handleDropdown() {
+    if (ctx.isSingle) {
+      selected.update((current) => (current === self ? null : self));
+    } else {
+      sidebarDropdown.toggle();
+    }
+
+    if (onclick) onclick();
+  }
+</script>
+
+<li class={base({ className })}>
+  <button {...restProps} onclick={handleDropdown} type="button" class={btn({ class: btnClass })} aria-controls="sidebar-dropdown">
+    {#if iconSlot}
+      {@render iconSlot()}
+    {/if}
+    <span class={span({ class: spanClass })}>{label}</span>
+    {#if isOpen}
+      {#if arrowup}
+        {@render arrowup()}
+      {:else}
+        <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
+        </svg>
+      {/if}
+    {:else if arrowdown}
+      {@render arrowdown()}
+    {:else}
+      <svg class={svg({ class: svgClass })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+      </svg>
+    {/if}
+  </button>
+  {#if isOpen}
+    <ul class={ul({ class: ulClass })} transition:transition={params as ParamsType}>
+      {@render children()}
+    </ul>
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:arrowup: any;
+@props:arrowdown: any;
+@props:iconSlot: any;
+@props:isOpen: any = false;
+@props:btnClass: any;
+@props:label: any;
+@props:spanClass: any;
+@props:ulClass: any;
+@props:transition: any = slide;
+@props:params: any;
+@props:svgClass: any;
+@props:class: string;
+@props:onclick: any;
+-->

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

@@ -0,0 +1,22 @@
+import { type SidebarDropdownWrapperProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:arrowup: any;
+ * @props:arrowdown: any;
+ * @props:iconSlot: any;
+ * @props:isOpen: any = false;
+ * @props:btnClass: any;
+ * @props:label: any;
+ * @props:spanClass: any;
+ * @props:ulClass: any;
+ * @props:transition: any = slide;
+ * @props:params: any;
+ * @props:svgClass: any;
+ * @props:class: string;
+ * @props:onclick: any;
+ */
+declare const SidebarDropdownWrapper: import("svelte").Component<Props, {}, "">;
+type SidebarDropdownWrapper = ReturnType<typeof SidebarDropdownWrapper>;
+export default SidebarDropdownWrapper;

package/dist/sidebar/SidebarGroup.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { type SidebarGroupProps as Props } from ".";
+
+  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();
+</script>
+
+<ul {...restProps} class={border ? borderClass : className}>
+  {@render children()}
+</ul>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## 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;
+-->

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

@@ -0,0 +1,12 @@
+import { type SidebarGroupProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## 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;
+ */
+declare const SidebarGroup: import("svelte").Component<Props, {}, "">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/sidebar/SidebarItem.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { type SidebarCtxType, type SidebarItemProps as Props } from "./";
+
+  let { iconSlot, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, active, class: className, ...restProps }: Props = $props();
+
+  const context = getContext<SidebarCtxType>("sidebarContext") ?? {};
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+
+  let sidebarUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    sidebarUrl = value;
+  });
+  let activeItem = $state();
+
+  // $effect(() => {
+  //   activeItem = sidebarUrl ? href === sidebarUrl : false;
+  // });
+  $effect(() => {
+    // Prioritize the explicit 'active' prop if provided
+    activeItem = active !== undefined ? active : sidebarUrl ? href === sidebarUrl : false;
+  });
+
+  // let aCls = $derived((activeItem ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
+  let aCls = $derived((activeItem ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
+</script>
+
+<li class={className}>
+  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={twMerge(aCls, aClass)}>
+    {#if iconSlot}
+      {@render iconSlot()}
+    {/if}
+    <span class={spanClass}>{label}</span>
+    {#if subtext}
+      {@render subtext()}
+    {/if}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: iconSlot: any;
+@props:subtext: any;
+@props:href: any;
+@props:label: any;
+@props:spanClass: any = "ms-3";
+@props:activeClass: any;
+@props:nonActiveClass: any;
+@props:aClass: any;
+@props:active: any;
+@props:class: string;
+-->

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

@@ -0,0 +1,18 @@
+import { type SidebarItemProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: iconSlot: any;
+ * @props:subtext: any;
+ * @props:href: any;
+ * @props:label: any;
+ * @props:spanClass: any = "ms-3";
+ * @props:activeClass: any;
+ * @props:nonActiveClass: any;
+ * @props:aClass: any;
+ * @props:active: any;
+ * @props:class: string;
+ */
+declare const SidebarItem: import("svelte").Component<Props, {}, "">;
+type SidebarItem = ReturnType<typeof SidebarItem>;
+export default SidebarItem;

package/dist/sidebar/index.d.ts

@@ -0,0 +1,10 @@
+import type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarButtonProps, 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 };

package/dist/sidebar/index.js

@@ -0,0 +1,9 @@
+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 };