odj-svelte-ui 0.1.0

package/dist/rating/Thumbup.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type RatingIconProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: fillPercent: any = 100;
+ * @props:fillColor: any = "#00b500";
+ * @props:strokeColor: any = "#00b500";
+ * @props:size: any = 24;
+ * @props:ariaLabel: any = "thumbup";
+ * @props:iconIndex: any = 0;
+ * @props:groupId: any = "star";
+ * @props:role: any = "img";
+ * @props:svgClass: any;
+ */
+declare const Thumbup: import("svelte").Component<Props, {}, "">;
+type Thumbup = ReturnType<typeof Thumbup>;
+export default Thumbup;

package/dist/rating/index.d.ts

@@ -0,0 +1,12 @@
+import type { AdvancedRatingProps, RatingProps, RatingCommentProps, ReviewProps, ScoreRatingProps, RatingIconProps } from "./type";
+import AdvancedRating from "./AdvancedRating.svelte";
+import Heart from "./Heart.svelte";
+import Rating from "./Rating.svelte";
+import RatingComment from "./RatingComment.svelte";
+import Review from "./Review.svelte";
+import ScoreRating from "./ScoreRating.svelte";
+import Star from "./Star.svelte";
+import Thumbup from "./Thumbup.svelte";
+import CustomIcon from "./CustomIcon.svelte";
+import { advancedrating, rating, review, scorerating } from "./theme";
+export { AdvancedRating, advancedrating, Heart, Rating, rating, RatingComment, Review, review, ScoreRating, scorerating, Star, Thumbup, CustomIcon, type AdvancedRatingProps, type RatingProps, type RatingCommentProps, type ReviewProps, type ScoreRatingProps, type RatingIconProps };

package/dist/rating/index.js

@@ -0,0 +1,11 @@
+import AdvancedRating from "./AdvancedRating.svelte";
+import Heart from "./Heart.svelte";
+import Rating from "./Rating.svelte";
+import RatingComment from "./RatingComment.svelte";
+import Review from "./Review.svelte";
+import ScoreRating from "./ScoreRating.svelte";
+import Star from "./Star.svelte";
+import Thumbup from "./Thumbup.svelte";
+import CustomIcon from "./CustomIcon.svelte";
+import { advancedrating, rating, review, scorerating } from "./theme";
+export { AdvancedRating, advancedrating, Heart, Rating, rating, RatingComment, Review, review, ScoreRating, scorerating, Star, Thumbup, CustomIcon };

package/dist/rating/theme.d.ts

@@ -0,0 +1,284 @@
+export declare const advancedrating: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+    div2: string;
+    div3: string;
+    span2: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+    div2: string;
+    div3: string;
+    span2: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    span: string;
+    div2: string;
+    div3: string;
+    span2: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const rating: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    p: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    p: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    p: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const review: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    article: string;
+    div: string;
+    div2: string;
+    div3: string;
+    img: string;
+    ul: string;
+    li: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    article: string;
+    div: string;
+    div2: string;
+    div3: string;
+    img: string;
+    ul: string;
+    li: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    article: string;
+    div: string;
+    div2: string;
+    div3: string;
+    img: string;
+    ul: string;
+    li: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const scorerating: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    desc3span: string;
+    desc3p: string;
+    link: string;
+    bar: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    desc3span: string;
+    desc3p: string;
+    link: string;
+    bar: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    desc3span: string;
+    desc3p: string;
+    link: string;
+    bar: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;

package/dist/rating/theme.js

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+export const advancedrating = tv({
+    // divClass = 'flex items-center mt-4', spanClass = 'text-sm font-medium text-gray-600 dark:text-gray-500', div2Class = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700', div3Class = 'h-5 bg-yellow-400 rounded', span2Class = 'text-sm font-medium text-gray-600 dark:text-gray-500',
+    slots: {
+        base: "flex items-center mt-4",
+        span: "text-sm font-medium text-gray-600 dark:text-gray-500",
+        div2: "mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700",
+        div3: "h-5 bg-yellow-400 rounded",
+        span2: "text-sm font-medium text-gray-600 dark:text-gray-500"
+    }
+});
+export const rating = tv({
+    slots: {
+        base: "flex items-center",
+        p: "ms-2 text-sm font-bold text-gray-900 dark:text-white"
+    }
+});
+export const review = tv({
+    slots: {
+        article: "md:grid md:grid-cols-3 md:gap-8",
+        div: "mb-6 flex items-center space-x-4 rtl:space-x-reverse",
+        div2: "space-y-1 font-medium dark:text-white",
+        div3: "flex items-center text-sm text-gray-500 dark:text-gray-400",
+        img: "h-10 w-10 rounded-full",
+        ul: "space-y-4 text-sm text-gray-500 dark:text-gray-400",
+        li: "flex items-center"
+    }
+});
+export const scorerating = tv({
+    slots: {
+        desc1: "bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800",
+        desc2: "ms-2 font-medium text-gray-900 dark:text-white",
+        desc3: "mx-2 w-1 h-1 mx-2 bg-gray-900 rounded-full dark:bg-gray-500",
+        desc3span: "text-sm w-24 font-medium text-gray-500 dark:text-gray-400",
+        desc3p: "text-sm w-24 font-medium text-gray-500 dark:text-gray-400",
+        link: "ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500",
+        bar: "bg-primary-600 h-2.5 rounded dark:bg-primary-500"
+    }
+});

package/dist/rating/type.d.ts

@@ -0,0 +1,109 @@
+import type { Snippet, Component } from "svelte";
+import type { SVGAttributes, HTMLAttributes } from "svelte/elements";
+type RatingItem = {
+    label: string | null | undefined;
+    rating: number;
+};
+interface AdvancedRatingProps {
+    rating?: Snippet;
+    globalText?: Snippet;
+    ratings: RatingItem[];
+    divClass?: string;
+    spanClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    span2Class?: string;
+    unit?: string;
+}
+interface RatingProps {
+    children?: Snippet;
+    text?: Snippet;
+    divClass?: string;
+    size?: number;
+    total?: number;
+    rating?: number;
+    Icon?: Component;
+    count?: boolean;
+    pClass?: string;
+}
+interface RatingCommentProps {
+    children: Snippet;
+    evaluation?: Snippet;
+    helpfullink?: string;
+    abuselink?: string;
+    comment: {
+        id?: string;
+        user: {
+            name?: string;
+            img: {
+                src: string | undefined | null;
+                alt?: string;
+            };
+            joined?: string;
+        };
+        total?: number;
+        rating: number;
+        heading?: string;
+        address?: string;
+        datetime?: string;
+    };
+}
+type ReviewType = {
+    name?: string;
+    imgSrc?: string;
+    imgAlt?: string;
+    address?: string;
+    reviewDate?: string;
+    title?: string;
+    rating?: number;
+    item1?: string;
+    item2?: string;
+    item3?: string;
+};
+interface ReviewProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    address?: Snippet;
+    item1?: Snippet;
+    item2?: Snippet;
+    item3?: Snippet;
+    review?: ReviewType;
+    articleClass?: string;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    imgClass?: string;
+    ulClass?: string;
+    liClass?: string;
+}
+interface ScoreRatingProps {
+    ratings?: {
+        label: string | undefined | null;
+        rating: number;
+    }[];
+    ratings2?: {
+        label: string | undefined | null;
+        rating: number;
+    }[];
+    headerLabel?: {
+        desc1?: string;
+        desc2?: string;
+        desc3?: string;
+        link?: {
+            label: string | undefined | null;
+            url: string;
+        };
+    };
+}
+interface RatingIconProps extends SVGAttributes<SVGSVGElement> {
+    fillPercent?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    size?: number;
+    ariaLabel?: string;
+    role?: string;
+    svgClass?: string;
+    iconIndex?: number;
+    groupId?: string;
+    pathd?: string;
+}
+export type { AdvancedRatingProps, RatingProps, RatingCommentProps, ReviewProps, ScoreRatingProps, RatingIconProps };

package/dist/rating/type.js

@@ -0,0 +1 @@
+export {};

package/dist/sidebar/Sidebar.svelte

@@ -0,0 +1,95 @@
+<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);
+
+  const activeUrlStore = writable("");
+  setContext("activeUrl", activeUrlStore);
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
+
+  function checkScreenSize() {
+    isLargeScreen = window.innerWidth >= breakpointValues[breakpoint];
+  }
+
+  const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop }));
+
+  let sidebarCtx: SidebarCtxType = {
+    get closeSidebar() {
+      return closeSidebar;
+    },
+    get activeClass() {
+      return active({ class: activeClass });
+    },
+    get nonActiveClass() {
+      return nonactive({ class: nonActiveClass });
+    },
+    isSingle
+  };
+
+  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}
+
+<!--
+@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;
+@props:activeClass: any;
+@props:activeUrl: any = "";
+@props:class: string;
+-->

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

@@ -0,0 +1,25 @@
+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;
+ * @props:activeClass: any;
+ * @props:activeUrl: any = "";
+ * @props:class: string;
+ */
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/sidebar/SidebarBrand.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { type SidebarBrandProps as Props, sitebarbrand } from ".";
+
+  let { children, site, imgClass, spanClass, class: className, ...restProps }: Props = $props();
+
+  const { base, img, span } = $derived(sitebarbrand());
+</script>
+
+<a {...restProps} href={site?.href ? site.href : "/"} class={base({ className })}>
+  {#if site}
+    <img src={site.img} class={img({ class: imgClass })} alt={site.name} />
+    <span class={span({ class: spanClass })}>{site.name}</span>
+  {:else if children}
+    {@render children()}
+  {/if}
+</a>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:site: any;
+@props:imgClass: any;
+@props:spanClass: any;
+@props:class: string;
+-->

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

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

package/dist/sidebar/SidebarButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { type SidebarButtonProps as Props, sidebarbutton } from ".";
+  let { breakpoint = "md", class: className, ...restProps }: Props = $props();
+
+  const base = $derived(sidebarbutton({ breakpoint, className }));
+</script>
+
+<button {...restProps} type="button" class={base}>
+  <span class="sr-only">Open sidebar</span>
+  <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+  </svg>
+</button>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: breakpoint: any = "md";
+@props:class: string;
+-->

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

@@ -0,0 +1,10 @@
+import { type SidebarButtonProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: breakpoint: any = "md";
+ * @props:class: string;
+ */
+declare const SidebarButton: import("svelte").Component<Props, {}, "">;
+type SidebarButton = ReturnType<typeof SidebarButton>;
+export default SidebarButton;