odj-svelte-ui 0.2.0 → 0.2.2

package/dist/dropdown/type.d.ts

@@ -1,18 +1,23 @@
 import type { Snippet } from "svelte";
 import type { ParamsType, TransitionFunc } from "../types";
 import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | undefined;
 interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
-    dropdownStatus: boolean;
-    closeDropdown?: () => void;
+    open: boolean;
+    triggeredBy: string;
+    position?: Placement;
+    offset?: number;
     divClass?: string;
     footerClass?: string;
     headerClass?: string;
     ulClass?: string;
-    backdropClass?: string;
-    params?: ParamsType;
-    transition?: TransitionFunc;
+    transitionIn?: TransitionFunc;
+    transitionInParams?: ParamsType;
+    transitionOut?: TransitionFunc;
+    transitionOutParams?: ParamsType;
     activeUrl?: string;
+    lock?: boolean;
 }
 interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
     class?: string;
@@ -29,6 +34,7 @@ interface DropdownLiProps extends HTMLAnchorAttributes {
     href?: string;
     activeClass?: string;
     liClass?: string;
+    custom?: boolean;
 }
 interface DropdownUlProps extends HTMLAttributes<HTMLUListElement> {
     children: Snippet;

package/dist/forms/checkbox/Checkbox.svelte

@@ -2,24 +2,53 @@
   import Label from "../label/Label.svelte";
   import { type CheckboxProps as Props, checkbox } from ".";
 
-  let { children, aria_describedby, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), classLabel, indeterminate, class: className, ...restProps }: Props = $props();
+  let { children, aria_describedby, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), classLabel, indeterminate, class: className, disabled = false, ...restProps }: Props = $props();
 
   const { base, label } = $derived(checkbox({ color, tinted, custom, rounded, inline }));
 </script>
 
+<style> 
+  [type="checkbox"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
+    background-color: currentColor;
+    border-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 0.55em 0.55em;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .dark [type="radio"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    background-size: 1em 1em;
+  }
+
+  [type="checkbox"]:indeterminate {
+    background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
+    background-color: currentColor;
+    border-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 0.55em 0.55em;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+</style>
+
 {#if choices.length > 0}
   {#each choices as { value, checkboxLabel }, i}
-    <Label class={label({ class: classLabel })} for={`checkbox-${i}`}>
+    <Label class={label({ class: classLabel })} for={`checkbox-${i}`} {disabled}>
       {checkboxLabel}
-      <input id={`checkbox-${i}`} type="checkbox" {value} bind:group {...restProps} class={base({ class: className })} />
+      <input id={`checkbox-${i}`} type="checkbox" {value} bind:group {disabled} {...restProps} class={base({ class: className })} />
       {#if children}
         {@render children()}
       {/if}
     </Label>
   {/each}
 {:else}
-  <Label class={label({ class: classLabel })}>
-    <input type="checkbox" bind:checked aria-describedby={aria_describedby} {indeterminate} {...restProps} class={base({ class: className })} />
+  <Label class={label({ class: classLabel })} {disabled}>
+    <input type="checkbox" bind:checked aria-describedby={aria_describedby} {indeterminate} {disabled} {...restProps} class={base({ class: className })} />
     {#if children}
       {@render children()}
     {/if}

package/dist/forms/checkbox/theme.js

@@ -1,76 +1,78 @@
 import { tv } from "tailwind-variants";
+// peer inline-flex size-[25px] items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40
+// w-4 h-4 bg-light-surface-100 border-light-surface-300 dark:ring-offset-dark-surface-800 focus-visible:ring-2 me-2 rounded-sm
 export const checkbox = tv({
     slots: {
-        base: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded-sm",
-        label: ""
+        base: "mr-2 my-auto appearance-none size-4 shrink-0 cursor-default rounded-sm transition-colors duration-150 bg-light-surface-100 dark:bg-dark-surface-700 border border-light-surface-300 dark:border-dark-surface-600 hover:border-light-surface-400 focus-visible:ring-2 focus-visible:ring-white outline-hidden disabled:opacity-50",
+        label: "flex items-center disabled:opacity-50 transition-all duration-150"
     },
     variants: {
         color: {
             // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
             primary: {
-                base: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+                base: "text-primary-600"
             },
             secondary: {
-                base: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+                base: "text-secondary-600"
             },
             gray: {
-                base: "text-gray-600 focus:ring-gray-600 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                base: "text-gray-600"
             },
             red: {
-                base: "text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600"
+                base: "text-red-600"
             },
             orange: {
-                base: "text-orange-600 focus:ring-orange-600 dark:ring-offset-orange-600 dark:focus:ring-orange-600"
+                base: "text-orange-600"
             },
             amber: {
-                base: "text-amber-600 focus:ring-amber-600 dark:ring-offset-amber-600 dark:focus:ring-amber-600"
+                base: "text-amber-600"
             },
             yellow: {
-                base: "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400"
+                base: "text-yellow-400"
             },
             lime: {
-                base: "text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700"
+                base: "text-lime-700"
             },
             green: {
-                base: "text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600"
+                base: "text-green-600"
             },
             emerald: {
-                base: "text-emerald-600 focus:ring-emerald-600 dark:ring-offset-emerald-600 dark:focus:ring-emerald-600"
+                base: "text-emerald-600"
             },
             teal: {
-                base: "text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600"
+                base: "text-teal-600"
             },
             cyan: {
-                base: "text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600"
+                base: "text-cyan-600"
             },
             sky: {
-                base: "text-sky-600 focus:ring-sky-600 dark:ring-offset-sky-600 dark:focus:ring-sky-600"
+                base: "text-sky-600"
             },
             blue: {
-                base: "text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700"
+                base: "text-blue-700"
             },
             indigo: {
-                base: "text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700"
+                base: "text-indigo-700"
             },
             violet: {
-                base: "text-violet-600 focus:ring-violet-600 dark:ring-offset-violet-600 dark:focus:ring-violet-600"
+                base: "text-violet-600"
             },
             purple: {
-                base: "text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600"
+                base: "text-purple-600"
             },
             fuchsia: {
-                base: "text-fuchsia-600 focus:ring-fuchsia-600 dark:ring-offset-fuchsia-600 dark:focus:ring-fuchsia-600"
+                base: "text-fuchsia-600"
             },
             pink: {
-                base: "text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600"
+                base: "text-pink-600"
             },
             rose: {
-                base: "text-rose-600 focus:ring-rose-600 dark:ring-offset-rose-600 dark:focus:ring-rose-600"
+                base: "text-rose-600"
             }
         },
         tinted: {
-            true: { base: "dark:bg-gray-600 dark:border-gray-500" },
-            false: { base: "dark:bg-gray-700 dark:border-gray-600" }
+            true: { base: "dark:bg-light-surface-600 dark:border-dark-surface-500" },
+            false: { base: "dark:bg-light-surface-700 dark:border-dark-surface-600" }
         },
         custom: {
             true: { base: "sr-only peer" }

package/dist/forms/checkbox/type.d.ts

@@ -18,6 +18,7 @@ interface CheckboxProps extends HTMLInputAttributes {
     choices?: CheckboxItem[];
     classLabel?: string;
     indeterminate?: boolean;
+    disabled?: boolean;
     class?: string;
 }
 export { type CheckboxProps, type CheckboxItem, type ColorType };

package/dist/forms/toggle/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const toggle = tv({
     slots: {
-        span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative ",
+        span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus-visible:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative cursor-pointer",
         label: "flex items-center",
         input: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 sr-only peer"
     },
@@ -16,64 +16,64 @@ export const toggle = tv({
         color: {
             // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
             primary: {
-                span: "peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600"
+                span: "peer-focus-visible:ring-primary-300 dark:peer-focus-visible:ring-primary-800 peer-checked:bg-primary-600"
             },
             secondary: {
-                span: "peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600"
+                span: "peer-focus-visible:ring-secondary-300 dark:peer-focus-visible:ring-secondary-800 peer-checked:bg-secondary-600"
             },
             gray: {
-                span: "peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:bg-gray-500"
+                span: "peer-focus-visible:ring-gray-300 dark:peer-focus-visible:ring-gray-800 peer-checked:bg-gray-500"
             },
             red: {
-                span: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600"
+                span: "peer-focus-visible:ring-red-300 dark:peer-focus-visible:ring-red-800 peer-checked:bg-red-600"
             },
             orange: {
-                span: "peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500"
+                span: "peer-focus-visible:ring-orange-300 dark:peer-focus-visible:ring-orange-800 peer-checked:bg-orange-500"
             },
             amber: {
-                span: "peer-focus:ring-amber-300 dark:peer-focus:ring-amber-800 peer-checked:bg-amber-600"
+                span: "peer-focus-visible:ring-amber-300 dark:peer-focus-visible:ring-amber-800 peer-checked:bg-amber-600"
             },
             yellow: {
-                span: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400"
+                span: "peer-focus-visible:ring-yellow-300 dark:peer-focus-visible:ring-yellow-800 peer-checked:bg-yellow-400"
             },
             lime: {
-                span: "peer-focus:ring-lime-300 dark:peer-focus:ring-lime-800 peer-checked:bg-lime-500"
+                span: "peer-focus-visible:ring-lime-300 dark:peer-focus-visible:ring-lime-800 peer-checked:bg-lime-500"
             },
             green: {
-                span: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600"
+                span: "peer-focus-visible:ring-green-300 dark:peer-focus-visible:ring-green-800 peer-checked:bg-green-600"
             },
             emerald: {
-                span: "peer-focus:ring-emerald-300 dark:peer-focus:ring-emerald-800 peer-checked:bg-emerald-600"
+                span: "peer-focus-visible:ring-emerald-300 dark:peer-focus-visible:ring-emerald-800 peer-checked:bg-emerald-600"
             },
             teal: {
-                span: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600"
+                span: "peer-focus-visible:ring-teal-300 dark:peer-focus-visible:ring-teal-800 peer-checked:bg-teal-600"
             },
             cyan: {
-                span: "peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600"
+                span: "peer-focus-visible:ring-cyan-300 dark:peer-focus-visible:ring-cyan-800 peer-checked:bg-cyan-600"
             },
             sky: {
-                span: "peer-focus:ring-sky-300 dark:peer-focus:ring-sky-800 peer-checked:bg-sky-600"
+                span: "peer-focus-visible:ring-sky-300 dark:peer-focus-visible:ring-sky-800 peer-checked:bg-sky-600"
             },
             blue: {
-                span: "peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600"
+                span: "peer-focus-visible:ring-blue-300 dark:peer-focus-visible:ring-blue-800 peer-checked:bg-blue-600"
             },
             indigo: {
-                span: "peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600"
+                span: "peer-focus-visible:ring-indigo-300 dark:peer-focus-visible:ring-indigo-800 peer-checked:bg-indigo-600"
             },
             violet: {
-                span: "peer-focus:ring-violet-300 dark:peer-focus:ring-violet-800 peer-checked:bg-violet-600"
+                span: "peer-focus-visible:ring-violet-300 dark:peer-focus-visible:ring-violet-800 peer-checked:bg-violet-600"
             },
             purple: {
-                span: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600"
+                span: "peer-focus-visible:ring-purple-300 dark:peer-focus-visible:ring-purple-800 peer-checked:bg-purple-600"
             },
             fuchsia: {
-                span: "peer-focus:ring-fuchsia-300 dark:peer-focus:ring-fuchsia-800 peer-checked:bg-fuchsia-600"
+                span: "peer-focus-visible:ring-fuchsia-300 dark:peer-focus-visible:ring-fuchsia-800 peer-checked:bg-fuchsia-600"
             },
             pink: {
-                span: "peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600"
+                span: "peer-focus-visible:ring-pink-300 dark:peer-focus-visible:ring-pink-800 peer-checked:bg-pink-600"
             },
             rose: {
-                span: "peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 peer-checked:bg-rose-600"
+                span: "peer-focus-visible:ring-rose-300 dark:peer-focus-visible:ring-rose-800 peer-checked:bg-rose-600"
             }
         },
         size: {
@@ -84,7 +84,7 @@ export const toggle = tv({
                 span: "w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5"
             },
             large: {
-                span: "w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6"
+                span: "w-13 h-7 after:top-0.5 after:start-[2px] after:h-6 after:w-6"
             }
         }
     },

package/dist/nav/Navbar.svelte

@@ -35,17 +35,19 @@
 
 <nav {...restProps} class={base({ class: navClass })} use:clickOutside={closeNav}>
   <div class={container({ class: divClass })}>
-    {#if brand}
-      {@render brand()}
-    {/if}
-    {#if hamburgerMenu}
-      <button onclick={toggleNav} type="button" class={toggleButton({ class: btnClass })}>
-        <span class="sr-only">Open main menu</span>
-        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
-        </svg>
-      </button>
-    {/if}
+		<div class="flex flex-row items-center">
+      {#if hamburgerMenu}
+        <button onclick={toggleNav} type="button" class={toggleButton({ class: btnClass })}>
+          <span class="sr-only">Open main menu</span>
+          <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+          </svg>
+        </button>
+      {/if}
+      {#if brand}
+        {@render brand()}
+      {/if}
+    </div>
     {#if navSlotBlock}
       {@render navSlotBlock()}
     {/if}

package/dist/nav/theme.d.ts

@@ -300,7 +300,7 @@ export declare const navUl: import("tailwind-variants").TVReturnType<{
         xl: string;
         xxl: string;
     };
-}, undefined, "font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "bg-light-surface-200 dark:bg-dark-surface-800 text-light-surface-700 dark:text-dark-surface-400 rounded-xl border border-light-surface-300 dark:border-dark-surface-700 divide-light-surface-100 dark:divide-dark-surface-700 flex flex-col gap-2 p-2 mt-2 rtl:space-x-reverse", import("tailwind-variants/dist/config").TVConfig<{
     breakPoint: {
         md: string;
         lg: string;
@@ -328,7 +328,7 @@ export declare const navUl: import("tailwind-variants").TVReturnType<{
         xl: string;
         xxl: string;
     };
-}, undefined, "font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "bg-light-surface-200 dark:bg-dark-surface-800 text-light-surface-700 dark:text-dark-surface-400 rounded-xl border border-light-surface-300 dark:border-dark-surface-700 divide-light-surface-100 dark:divide-dark-surface-700 flex flex-col gap-2 p-2 mt-2 rtl:space-x-reverse", import("tailwind-variants/dist/config").TVConfig<{
     breakPoint: {
         md: string;
         lg: string;
@@ -543,7 +543,7 @@ export declare const navcontainer: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "mx-auto flex flex-wrap justify-between items-center", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "mx-0 flex flex-wrap justify-between items-center max-w-none", import("tailwind-variants/dist/config").TVConfig<{
     fluid: {
         true: string;
         false: string;
@@ -563,7 +563,7 @@ export declare const navcontainer: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "mx-auto flex flex-wrap justify-between items-center", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "mx-0 flex flex-wrap justify-between items-center max-w-none", import("tailwind-variants/dist/config").TVConfig<{
     fluid: {
         true: string;
         false: string;
@@ -581,7 +581,7 @@ export declare const navhamburger: import("tailwind-variants").TVReturnType<{
         xl: string;
         xxl: string;
     };
-}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 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", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-light-surface-500 hover:bg-light-surface-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-light-surface-200 dark:text-dark-surface-400 dark:hover:bg-dark-surface-700 dark:focus-visible:ring-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<{
     breakPoint: {
         md: string;
         lg: string;
@@ -609,7 +609,7 @@ export declare const navhamburger: import("tailwind-variants").TVReturnType<{
         xl: string;
         xxl: string;
     };
-}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 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", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-light-surface-500 hover:bg-light-surface-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-light-surface-200 dark:text-dark-surface-400 dark:hover:bg-dark-surface-700 dark:focus-visible:ring-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<{
     breakPoint: {
         md: string;
         lg: string;

package/dist/nav/theme.js

@@ -1,12 +1,12 @@
 import { tv } from "tailwind-variants";
 export const navbar = tv({
     slots: {
-        base: "bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full",
+        base: "z-50 bg-light-surface-100/80 dark:bg-dark-surface-900/80 backdrop-blur-lg text-light-surface-700 dark:text-dark-surface-400 border-light-surface-300 dark:border-dark-surface-600 border-b px-2 sm:px-4 py-2.5 w-full",
         container: "mx-auto flex flex-wrap items-center justify-between",
-        toggleButton: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 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",
+        toggleButton: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 mr-2 text-sm focus:outline-hidden text-light-surface-500 focus-visible:ring-light-surface-400 dark:focus-visible:ring-dark-surface-400 active:bg-light-surface-300 dark:active:bg-dark-surface-700/30 hover:bg-light-surface-200 dark:hover:bg-dark-surface-700/40 dark:hover:text-dark-surface-400",
         menuContainer: "w-full",
         activeLink: "block py-2 px-3 text-white bg-primary-700 rounded-sm dark:text-white",
-        inactiveLink: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+        inactiveLink: "block py-2 px-3 text-light-surface-900 rounded-sm hover:bg-light-surface-100 dark:text-white dark:hover:bg-dark-surface-700 dark:hover:text-white"
     },
     variants: {
         fluid: {
@@ -55,13 +55,13 @@ export const navbar = tv({
     }
 });
 export const navUl = tv({
-    base: "font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700",
+    base: "bg-light-surface-200 dark:bg-dark-surface-800 text-light-surface-700 dark:text-dark-surface-400 rounded-xl border border-light-surface-300 dark:border-dark-surface-700 divide-light-surface-100 dark:divide-dark-surface-700 flex flex-col gap-2 p-2 mt-2 rtl:space-x-reverse",
     variants: {
         breakPoint: {
-            md: "md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 md:dark:bg-gray-900",
-            lg: "lg:mt-0 lg:flex-row lg:space-x-8 lg:border-0 lg:p-0 lg:dark:bg-gray-900",
-            xl: "xl:mt-0 xl:flex-row xl:space-x-8 xl:border-0 lg:p-0 xl:dark:bg-gray-900",
-            xxl: "2xl:mt-0 2xl:flex-row 2xl:space-x-8 2xl:border-0 2xl:p-0 2xl:dark:bg-gray-900"
+            md: "dark:md:bg-transparent md:bg-transparent md:text-sm md:font-medium md:border-0 md:mt-0 md:flex-row md:items-center md:gap-8 md:p-0",
+            lg: "dark:lg:bg-transparent lg:bg-transparent lg:text-sm lg:font-medium lg:border-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-8 lg:p-0",
+            xl: "dark:xl:bg-transparent xl:bg-transparent xl:text-sm xl:font-medium xl:border-0 xl:mt-0 xl:flex-row xl:items-center xl:gap-8 lg:p-0",
+            xxl: "dark:2xl:bg-transparent 2xl:bg-transparent 2xl:text-sm 2xl:font-medium 2xl:border-0 2xl:mt-0 2xl:flex-row 2xl:items-center 2xl:gap-8 2xl:p-0"
         }
     }
 });
@@ -74,26 +74,26 @@ export const navbrand = tv({
 export const navLi = tv({
     slots: {
         base: "list-none",
-        link: "block py-2 pl-3 pr-4 text-gray-900 rounded-sm hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+        link: "block py-2 px-4 rounded-lg text-light-surface-700 hover:text-light-surface-800 dark:text-dark-surface-400 dark:hover:text-white hover:bg-light-surface-50 dark:hover:bg-dark-surface-700 transition-all"
     },
     variants: {
         active: {
             true: {
-                link: "bg-primary-700 text-white"
+                link: "bg-primary-700 hover:bg-primary-800 dark:hover:bg-primary-800 text-white hover:text-white dark:text-white"
             }
         },
         breakPoint: {
             md: {
-                link: "md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 md:dark:hover:text-primary-500 md:dark:hover:bg-transparent"
+                link: "md:p-0 md:hover:text-dark-surface-900 md:dark:hover:text-white md:hover:bg-transparent md:dark:hover:bg-transparent md:border-0"
             },
             lg: {
-                link: "lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 lg:dark:hover:text-primary-500 lg:dark:hover:bg-transparent"
+                link: "lg:p-0 lg:hover:text-dark-surface-900 lg:dark:hover:text-white lg:hover:bg-transparent lg:dark:hover:bg-transparent lg:border-0"
             },
             xl: {
-                link: "xl:hover:bg-transparent xl:border-0 xl:hover:text-primary-700 xl:p-0 xl:dark:hover:text-primary-500 xl:dark:hover:bg-transparent"
+                link: "xl:p-0 xl:hover:text-dark-surface-900 xl:dark:hover:text-white xl:hover:bg-transparent xl:dark:hover:bg-transparent xl:border-0"
             },
             xxl: {
-                link: "2xl:hover:bg-transparent 2xl:border-0 2xl:hover:text-primary-700 2xl:p-0 2xl:dark:hover:text-primary-500 2xl:dark:hover:bg-transparent"
+                link: "2xl:p-0 2xl:hover:text-dark-surface-900 2xl:dark:hover:text-white 2xl:hover:bg-transparent 2xl:dark:hover:bg-transparent 2xl:border-0"
             }
         }
     },
@@ -102,28 +102,28 @@ export const navLi = tv({
             active: true,
             breakPoint: "md",
             class: {
-                link: "md:bg-transparent md:text-primary-700 md:p-0 md:dark:text-primary-500"
+                link: "md:bg-transparent md:text-primary-700 md:dark:text-primary-600 md:hover:text-primary-900 md:dark:hover:text-primary-500 md:font-medium md:p-0"
             }
         },
         {
             active: true,
             breakPoint: "lg",
             class: {
-                link: "lg:bg-transparent lg:text-primary-700 lg:p-0 lg:dark:text-primary-500"
+                link: "lg:bg-transparent lg:text-primary-700 lg:dark:text-primary-600 lg:hover:text-primary-900 lg:dark:hover:text-primary-500 lg:font-medium lg:p-0"
             }
         },
         {
             active: true,
             breakPoint: "xl",
             class: {
-                link: "xl:bg-transparent xl:text-primary-700 xl:p-0 xl:dark:text-primary-500"
+                link: "xl:bg-transparent xl:text-primary-700 xl:dark:text-primary-600 xl:hover:text-primary-900 xl:dark:hover:text-primary-500 xl:font-medium xl:p-0"
             }
         },
         {
             active: true,
             breakPoint: "xxl",
             class: {
-                link: "2xl:bg-transparent 2xl:text-primary-700 2xl:p-0 2xl:dark:text-primary-500"
+                link: "2xl:bg-transparent 2xl:text-primary-700 2xl:dark:text-primary-6002 xl:hover:text-primary-900 2xl:dark:hover:text-primary-500 2xl:font-medium 2xl:p-0"
             }
         }
     ],
@@ -133,7 +133,7 @@ export const navLi = tv({
     }
 });
 export const navcontainer = tv({
-    base: "mx-auto flex flex-wrap justify-between items-center",
+    base: "mx-0 flex flex-wrap justify-between items-center max-w-none",
     variants: {
         fluid: {
             true: "w-full",
@@ -142,7 +142,7 @@ export const navcontainer = tv({
     }
 });
 export const navhamburger = tv({
-    base: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 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",
+    base: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-light-surface-500 hover:bg-light-surface-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-light-surface-200 dark:text-dark-surface-400 dark:hover:bg-dark-surface-700 dark:focus-visible:ring-dark-surface-600",
     variants: {
         breakPoint: {
             md: "md:hidden",

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;