odj-svelte-ui 0.2.0 → 0.2.2

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,

package/dist/tooltip/Tooltip.svelte

@@ -1,43 +1,34 @@
 <script lang="ts">
   import { tooltip } from "./theme";
   import type { TooltipProps } from ".";
-  import {
-    FloatingArrow,
-    arrow,
-    autoUpdate,
-    flip,
-    offset as floatingUIOffset,
-    useDismiss,
-    useFloating,
-    useHover,
-    useInteractions,
-    useRole,
-  } from "@skeletonlabs/floating-ui-svelte";
+  import { FloatingArrow, arrow, autoUpdate, flip, offset as floatingUIOffset, useDismiss, useFloating, useHover, useInteractions, useRole } from "@skeletonlabs/floating-ui-svelte";
   import { fade } from "svelte/transition";
 
-  let { children, color = "default", arrow: showArrow = false, offset = 8, triggeredBy, position = "top", class: className, arrowClass, open = $bindable(false), transition = fade, transitionOptions = { duration: 200 }, ...restProps }: TooltipProps = $props();
+  let { children, color = "default", arrow: showArrow = false, offset = 8, triggeredBy, position: placement = "top", class: className, arrowClass, open = $bindable(false), transition = fade, transitionOptions = { duration: 200 }, ...restProps }: TooltipProps = $props();
 
   let arrowElement: HTMLElement | null = $state(null);
 
   let { base, arrowBase } = $derived(tooltip({ color }));
-  
+
   // State
   let elemArrow: HTMLElement | null = $state(null);
 
   // Use Floating
-  let floating = $derived(useFloating({
-    whileElementsMounted: autoUpdate,
-    get open() {
-      return open;
-    },
-    onOpenChange: (v) => {
-      open = v;
-    },
-    placement: position,
-    get middleware() {
-      return [floatingUIOffset(offset), flip(), elemArrow && arrow({ element: elemArrow })];
-    },
-  }));
+  let floating = $derived(
+    useFloating({
+      whileElementsMounted: autoUpdate,
+      get open() {
+        return open;
+      },
+      onOpenChange: (v) => {
+        open = v;
+      },
+      placement,
+      get middleware() {
+        return [floatingUIOffset(offset), flip(), elemArrow && arrow({ element: elemArrow })];
+      }
+    })
+  );
 
   // Interactions
   let role = $derived(useRole(floating.context, { role: "tooltip" }));
@@ -48,22 +39,22 @@
   // Get elements
   $effect(() => {
     let triggerElement = document.querySelector(triggeredBy);
-    if (!triggerElement) return; 
+    if (!triggerElement) return;
 
     floating.elements.reference = triggerElement;
-    
+
     // Assign the props to the element
     Object.entries(interactions.getReferenceProps()).forEach(([key, value]) => {
-      triggerElement[key] = value;
+      (triggerElement as any)[key] = value;
     });
-  })
+  });
 </script>
 
 {#if open}
   <div role="tooltip" bind:this={floating.elements.floating} style={floating.floatingStyles} {...interactions.getFloatingProps()} transition:transition={transitionOptions} {...restProps} class={base({ className })}>
     {@render children()}
     {#if showArrow}
-      <FloatingArrow bind:ref={arrowElement} context={floating.context} class={arrowBase({className: arrowClass})}/>
+      <FloatingArrow bind:ref={arrowElement} context={floating.context} class={arrowBase({ className: arrowClass })} />
     {/if}
   </div>
 {/if}
@@ -75,7 +66,7 @@
 @props:children: any;
 @props:color: any = "default";
 @props:arrow: any = false;
-@props:offset: any = 8;
+@props:offset: number = 8;
 @props:triggeredBy: any;
 @props:position: string = "top";
 @props:class: string;
@@ -83,4 +74,4 @@
 @props:open: boolean = false;
 @props:transition: any = "fade";
 @props:transitionOptions: object = { duration: 200 };
--->
+-->

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -5,7 +5,7 @@ import type { TooltipProps } from ".";
  * @props:children: any;
  * @props:color: any = "default";
  * @props:arrow: any = false;
- * @props:offset: any = 8;
+ * @props:offset: number = 8;
  * @props:triggeredBy: any;
  * @props:position: string = "top";
  * @props:class: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "odj-svelte-ui",
   "author": "orbitadajogatina",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "This is a fork from Flowbite Svelte 5 with Runes. I just made some changes that fits better my taste.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -436,10 +436,6 @@
       "types": "./dist/sidebar/SidebarBrand.svelte.d.ts",
       "svelte": "./dist/sidebar/SidebarBrand.svelte"
     },
-    "./SidebarButton.svelte": {
-      "types": "./dist/sidebar/SidebarButton.svelte.d.ts",
-      "svelte": "./dist/sidebar/SidebarButton.svelte"
-    },
     "./SidebarCta.svelte": {
       "types": "./dist/sidebar/SidebarCta.svelte.d.ts",
       "svelte": "./dist/sidebar/SidebarCta.svelte"

package/dist/sidebar/SidebarButton.svelte

@@ -1,21 +0,0 @@
-<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

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