odj-svelte-ui 0.2.0 → 0.2.2

package/README.md

@@ -15,14 +15,23 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
   - `Textarea` is fixed;
   - `Pagination` respect max-width;
   - `Modal` title has a better size, improved default animations with control of backdrop's animations and removed the outdated divider;
-  - `Label` now has `space-y-1` by default, a new default color and the `disabled` prop;
   - `Input:Search` has a better X button for Chromium browsers;
   - `Radio` has a new design and it's animated;
+  - `Header` has blur, some small design tweaks and a fixed design for the menu on mobile;
+  - `Dropdown` is more modern;
+  - `Avatar` has better borders;
+  - `Sidebar` has better hover colors and some other design tweaks, like border radius;
 - `Tabs` styles are fixed and introduced underline animations and a complete modern redesign for "Full" style;
 - The `Tooltip` component received a rework;
 - `Modal` has <kbd>Esc</kbd> to close again;
 - `Button` has now a built-in loading state and can be controlled by the `loading` prop;
+- `Label` now has `space-y-1` by default, a new default color and the `disabled` prop;
 - `Textarea` can autoexpand as user type, control this by `autoexpand` and `maxRows` props;
+- `Dropdown` now locks the page scroll and you can enable this default behaviour setting `lock` to `true`. Also, it uses a new strategy instead of `uiHelpers`;
+- `Avatar` supports a `fallback` snippet to show when the image is loading or can't be loaded;
+- `Sidebar` can not be opened or closed anymore. If you want this behaviour, this component should be inside the `Drawer` component. On mobile, `Sidebar` will look like tabs;
+- `SidebarButton` has been removed. Please use the `Drawer` component to maintain the old sidebar behaviour;
+
 
 ## Installation
 

package/dist/avatar/Avatar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { Indicator } from "..";
-  import { type AvatarProps as Props, avatar } from ".";
+  import { onMount } from "svelte";
+  import { type AvatarProps as Props, avatar, fallback as fallbackTheme } from ".";
 
-  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: Props = $props();
+  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, fallback, fallbackClass: fallbackClassName, ...restProps }: Props = $props();
 
-  dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
+  dot = dot && { placement: "top-right", color: "red", size: "lg", ...dot };
 
   let avatarClass = $derived(
     avatar({
@@ -15,12 +16,43 @@
       className
     })
   );
+  let fallbackClass = $derived(
+    fallbackTheme({
+      cornerStyle,
+      border,
+      stacked,
+      size,
+      className: fallbackClassName
+    })
+  );
+
+  let imageState: "loading" | "loaded" | "error" = $state("loading");
+  onMount(() => {
+    const img = new Image();
+    if (!src) return;
+
+    img.src = src;
+    imageState = "loading";
+
+    img.onload = () => {
+      imageState = "loaded";
+    };
+    img.onerror = () => {
+      imageState = "error";
+    };
+  });
 </script>
 
 {#if !src || !!href || children || dot}
   <svelte:element this={href ? "a" : "div"} role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
     {#if src}
-      <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
+      {#if fallback && imageState !== "loaded"}
+        <div class={fallbackClass}>
+          {@render fallback()}
+        </div>
+      {:else}
+        <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
+      {/if}
     {:else if children}
       {@render children()}
     {:else}
@@ -32,6 +64,10 @@
       <Indicator border offset={cornerStyle === "circular" ? true : false} {...dot} />
     {/if}
   </svelte:element>
+{:else if fallback && imageState !== "loaded"}
+  <div class={fallbackClass}>
+    {@render fallback()}
+  </div>
 {:else}
   <img {alt} {src} {...restProps} class={avatarClass} />
 {/if}
@@ -40,7 +76,8 @@
 @component
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
-@props: children: any;
+@props:children: any;
+@props:fallback: any;
 @props:src: any;
 @props:href: any;
 @props:target: any;
@@ -49,6 +86,7 @@
 @props:stacked: any = false;
 @props:dot: any;
 @props:class: string;
+@props:fallbackClass: string;
 @props:alt: any;
 @props:size: any = "md";
 @props:onclick: any;

package/dist/avatar/Avatar.svelte.d.ts

@@ -2,7 +2,8 @@ import { type AvatarProps as Props } from ".";
 /**
  * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
  * ## Props
- * @props: children: any;
+ * @props:children: any;
+ * @props:fallback: any;
  * @props:src: any;
  * @props:href: any;
  * @props:target: any;
@@ -11,6 +12,7 @@ import { type AvatarProps as Props } from ".";
  * @props:stacked: any = false;
  * @props:dot: any;
  * @props:class: string;
+ * @props:fallbackClass: string;
  * @props:alt: any;
  * @props:size: any = "md";
  * @props:onclick: any;

package/dist/avatar/index.d.ts

@@ -1,4 +1,4 @@
 import type { AvatarProps } from "./type";
 import Avatar from "./Avatar.svelte";
-import { avatar } from "./theme";
-export { Avatar, avatar, type AvatarProps };
+import { avatar, fallback } from "./theme";
+export { Avatar, avatar, fallback, type AvatarProps };

package/dist/avatar/index.js

@@ -1,3 +1,3 @@
 import Avatar from "./Avatar.svelte";
-import { avatar } from "./theme";
-export { Avatar, avatar };
+import { avatar, fallback } from "./theme";
+export { Avatar, avatar, fallback };

package/dist/avatar/theme.d.ts

@@ -18,7 +18,7 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -98,7 +98,7 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -139,4 +139,145 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         xl: string;
     };
 }>, unknown, unknown, undefined>>;
-export { avatar };
+declare const fallback: import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config").TVConfig<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config").TVConfig<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, unknown, unknown, undefined>>;
+export { avatar, fallback };

package/dist/avatar/theme.js

@@ -1,17 +1,17 @@
 import { tv } from "tailwind-variants";
 const avatar = tv({
-    base: "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300",
+    base: "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300",
     variants: {
         cornerStyle: {
             rounded: "rounded-sm",
             circular: "rounded-full"
         },
         border: {
-            true: "p-1 ring-2 ring-gray-300 dark:ring-gray-500",
+            true: "border-2 border-light-surface-300 dark:border-dark-surface-500",
             false: ""
         },
         stacked: {
-            true: "border-2 -ms-4 border-white dark:border-gray-800",
+            true: "border-2 -ms-4 border-white dark:border-dark-surface-800",
             false: ""
         },
         size: {
@@ -29,4 +29,34 @@ const avatar = tv({
         size: "md"
     }
 });
-export { avatar };
+const fallback = tv({
+    base: "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase",
+    variants: {
+        cornerStyle: {
+            rounded: "rounded-sm",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "border-2 border-light-surface-300 dark:border-dark-surface-500",
+            false: ""
+        },
+        stacked: {
+            true: "border-2 -ms-4 border-white dark:border-dark-surface-800",
+            false: ""
+        },
+        size: {
+            xs: "w-6 h-6",
+            sm: "w-8 h-8",
+            md: "w-10 h-10",
+            lg: "w-20 h-20",
+            xl: "w-36 h-36"
+        }
+    },
+    defaultVariants: {
+        cornerStyle: "circular",
+        border: false,
+        stacked: false,
+        size: "md"
+    }
+});
+export { avatar, fallback };

package/dist/avatar/type.d.ts

@@ -12,5 +12,7 @@ interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     onclick?: () => void;
     border?: boolean;
+    fallback?: Snippet;
+    fallbackClass?: string;
 }
 export { type AvatarProps };

package/dist/dropdown/Dropdown.svelte

@@ -1,39 +1,88 @@
 <script lang="ts">
   import { type DropdownProps as Props, dropdown } from "./";
-  import { fly } from "svelte/transition";
-  import type { ParamsType } from "../types";
+  import { autoUpdate, flip, offset as floatingUIOffset, useClick, useDismiss, useFloating, useInteractions, useRole } from "@skeletonlabs/floating-ui-svelte";
+  import { fade, fly } from "svelte/transition";
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
-  let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params, transition = fly, activeUrl = "", ...restProps }: Props = $props();
+  let { children, open = $bindable(false), triggeredBy, position: placement = "bottom", offset = 8, class: className, transitionIn = fade, transitionInParams = { duration: 200 }, transitionOut = fly, transitionOutParams = { y: -5 }, activeUrl = "", lock = false, ...restProps }: Props = $props();
 
-  const { base, backdrop } = $derived(dropdown());
+  const { base } = $derived(dropdown());
+
+  // Use Floating
+  let floating = $derived(
+    useFloating({
+      get open() {
+        return open;
+      },
+      onOpenChange: (v) => {
+        open = v;
+      },
+      whileElementsMounted: autoUpdate,
+      placement,
+      get middleware() {
+        return [floatingUIOffset(offset), flip()];
+      }
+    })
+  );
+
+  // Interactions
+  let role = $derived(useRole(floating.context));
+  let behaviour = $derived(useClick(floating.context));
+  let dismiss = $derived(useDismiss(floating.context));
+  let interactions = $derived(useInteractions([role, behaviour, dismiss]));
+
+  // Get elements
+  $effect(() => {
+    let triggerElement = document.querySelector(triggeredBy);
+    if (!triggerElement) return;
+
+    floating.elements.reference = triggerElement;
+
+    // Assign the props to the element
+    Object.entries(interactions.getReferenceProps()).forEach(([key, value]) => {
+      (triggerElement as any)[key] = value;
+    });
+  });
+
+  // Active URL
   const activeUrlStore = writable("");
   setContext("activeUrl", activeUrlStore);
 
   $effect(() => {
     activeUrlStore.set(activeUrl ?? "");
   });
+
+  // Lock scroll system
+  $effect(() => {
+    if (open && lock) {
+      const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollWidth}px`;
+    } else if (lock) {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+  });
 </script>
 
 <!-- Dropdown menu -->
-{#if dropdownStatus}
-  <div {...restProps} class={base({ class: className })} transition:transition={params as ParamsType}>
+{#if open}
+  <div bind:this={floating.elements.floating} style={floating.floatingStyles} {...interactions.getFloatingProps()} class={base({ class: className })} in:transitionIn={transitionInParams} out:transitionOut={transitionOutParams} {...restProps}>
     {@render children()}
   </div>
-
-  <div role="presentation" class={backdrop({ class: backdropClass })} onclick={closeDropdown}></div>
 {/if}
 
 <!--
 @component
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
-@props: children: any;
-@props:dropdownStatus: any = $bindable();
-@props:closeDropdown: any;
+@props:children: any;
+@props:open: any = $bindable();
+@props:triggeredBy: any;
+@props:position: string;
+@props:offset: number;
 @props:class: string;
-@props:backdropClass: any;
 @props:params: any;
 @props:transition: any = fly;
 @props:activeUrl: any = "";

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -2,15 +2,16 @@ import { type DropdownProps as Props } from "./";
 /**
  * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
  * ## Props
- * @props: children: any;
- * @props:dropdownStatus: any = $bindable();
- * @props:closeDropdown: any;
+ * @props:children: any;
+ * @props:open: any = $bindable();
+ * @props:triggeredBy: any;
+ * @props:position: string;
+ * @props:offset: number;
  * @props:class: string;
- * @props:backdropClass: any;
  * @props:params: any;
  * @props:transition: any = fly;
  * @props:activeUrl: any = "";
  */
-declare const Dropdown: import("svelte").Component<Props, {}, "dropdownStatus">;
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/dropdown/DropdownLi.svelte

@@ -2,12 +2,11 @@
   import { getContext } from "svelte";
   import { type DropdownLiProps as Props, dropdownli } from "./";
 
-  let { aClass, children, href, activeClass, liClass, ...restProps }: Props = $props();
+  let { aClass, children, href, activeClass, liClass, custom = false, ...restProps }: Props = $props();
 
   const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
   let sidebarUrl = $state("");
   activeUrlStore.subscribe((value) => {
-    // console.log('value: ', value)
     sidebarUrl = value;
   });
   let active = $state(false);
@@ -23,8 +22,14 @@
     <a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
       {@render children()}
     </a>
+  {:else if custom}
+    <button {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
+      {@render children()}
+    </button>
   {:else}
-    {@render children()}
+    <a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
+      {@render children()}
+    </a>
   {/if}
 </li>
 
@@ -37,4 +42,5 @@
 @props:href: any;
 @props:activeClass: any;
 @props:liClass: any;
+@props:custom: boolean;
 -->

package/dist/dropdown/DropdownLi.svelte.d.ts

@@ -7,6 +7,7 @@ import { type DropdownLiProps as Props } from "./";
  * @props:href: any;
  * @props:activeClass: any;
  * @props:liClass: any;
+ * @props:custom: boolean;
  */
 declare const DropdownLi: import("svelte").Component<Props, {}, "">;
 type DropdownLi = ReturnType<typeof DropdownLi>;

package/dist/dropdown/theme.d.ts

@@ -2,50 +2,42 @@ export declare const dropdown: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
-    backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     base: string;
-    backdrop: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
-    backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
-export declare const dropdowndivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare const dropdownFooter: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdowndivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownFooter: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "overflow-hidden rounded-b-xl", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "overflow-hidden rounded-b-xl", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export declare const dropdownli: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -91,4 +83,4 @@ export declare const dropdownli: import("tailwind-variants").TVReturnType<{
         };
     };
 } | {}>, unknown, unknown, undefined>>;
-export declare const dropdownul: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownul: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "p-1 flex flex-col", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "p-1 flex flex-col", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/dropdown/theme.js

@@ -1,25 +1,24 @@
 import { tv } from "tailwind-variants";
 export const dropdown = tv({
     slots: {
-        base: "z-10 w-44 mt-2 divide-y divide-gray-300 dark:divide-gray-500 overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-700",
-        backdrop: "fixed top-0 start-0 w-full h-full"
+        base: "z-10 w-max rounded-xl shadow-lg bg-white dark:bg-dark-surface-700 text-light-surface-700 dark:text-dark-surface-200 border border-light-surface-200 dark:border-dark-surface-600 divide-y divide-light-surface-100 dark:divide-dark-surface-600 overflow-hidden"
     }
 });
 export const dropdowndivider = tv({
-    base: "my-1 h-px bg-gray-100 dark:bg-gray-500"
+    base: "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600"
 });
 export const dropdownHeader = tv({
-    base: "px-4 py-3 text-sm text-gray-900 dark:text-white"
+    base: "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white"
 });
 export const dropdownFooter = tv({
-    base: "overflow-hidden rounded-b-lg py-1"
+    base: "overflow-hidden rounded-b-xl"
 });
 export const dropdownli = tv({
     slots: {
-        anchor: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
-        activeAnchor: "block px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+        anchor: "cursor-pointer flex flex-row gap-3 items-center py-2 px-3 rounded-lg text-sm hover:bg-light-surface-200/70 dark:hover:bg-dark-surface-600 hover:text-light-surface-900 dark:hover:text-white",
+        activeAnchor: "cursor-pointer flex flex-row gap-3 items-center py-2 px-3 rounded-lg text-sm bg-primary-700 dark:bg-primary-600 text-white dark:text-white hover:bg-primary-800 dark:hover:bg-primary-700"
     }
 });
 export const dropdownul = tv({
-    base: "py-2 text-sm text-gray-700 dark:text-gray-200"
+    base: "p-1 flex flex-col"
 });