odj-svelte-ui 0.1.1 → 0.2.1

package/dist/forms/radio/theme.d.ts

@@ -61,14 +61,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
             input: string;
         };
     };
-    tinted: {
-        true: {
-            input: string;
-        };
-        false: {
-            input: string;
-        };
-    };
     custom: {
         true: {
             input: string;
@@ -140,14 +132,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
             input: string;
         };
     };
-    tinted: {
-        true: {
-            input: string;
-        };
-        false: {
-            input: string;
-        };
-    };
     custom: {
         true: {
             input: string;
@@ -216,14 +200,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
             input: string;
         };
     };
-    tinted: {
-        true: {
-            input: string;
-        };
-        false: {
-            input: string;
-        };
-    };
     custom: {
         true: {
             input: string;
@@ -292,14 +268,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
             input: string;
         };
     };
-    tinted: {
-        true: {
-            input: string;
-        };
-        false: {
-            input: string;
-        };
-    };
     custom: {
         true: {
             input: string;
@@ -371,14 +339,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
             input: string;
         };
     };
-    tinted: {
-        true: {
-            input: string;
-        };
-        false: {
-            input: string;
-        };
-    };
     custom: {
         true: {
             input: string;
@@ -450,14 +410,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
             input: string;
         };
     };
-    tinted: {
-        true: {
-            input: string;
-        };
-        false: {
-            input: string;
-        };
-    };
     custom: {
         true: {
             input: string;
@@ -526,14 +478,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
             input: string;
         };
     };
-    tinted: {
-        true: {
-            input: string;
-        };
-        false: {
-            input: string;
-        };
-    };
     custom: {
         true: {
             input: string;

package/dist/forms/radio/theme.js

@@ -1,75 +1,71 @@
 import { tv } from "tailwind-variants";
 export const radio = tv({
     slots: {
-        input: "relative flex items-center w-4 h-4 bg-light-surface-100 border-light-surface-300 dark:bg-dark-surface-100 dark:border-dark-surface-300 dark:ring-offset-dark-surface-800 focus:ring-2 mr-2",
-        label: "flex items-center"
+        input: "mr-2 my-auto appearance-none size-4 shrink-0 cursor-default rounded-full transition-all 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 checked:border-5 checked:bg-white 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: {
-                input: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+                input: "checked:border-primary-600 hover:checked:border-primary-600"
             },
             secondary: {
-                input: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+                input: "checked:border-secondary-600 hover:checked:border-secondary-600"
             },
             gray: {
-                input: "text-gray-600 focus:ring-gray-500 dark:focus:ring-gray-600"
+                input: "checked:border-gray-600 hover:checked:border-gray-600"
             },
-            red: { input: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600" },
+            red: { input: "checked:border-red-600 hover:checked:border-red-600" },
             orange: {
-                input: "text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600"
+                input: "checked:border-orange-500 hover:checked:border-orange-500"
             },
             amber: {
-                input: "text-amber-600 focus:ring-amber-500 dark:focus:ring-amber-600"
+                input: "checked:border-amber-600 hover:checked:border-amber-600"
             },
             yellow: {
-                input: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600"
+                input: "checked:border-yellow-400 hover:checked:border-yellow-400"
             },
             lime: {
-                input: "text-lime-600 focus:ring-lime-500 dark:focus:ring-lime-600"
+                input: "checked:border-lime-600 hover:checked:border-lime-600"
             },
             green: {
-                input: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600"
+                input: "checked:border-green-600 hover:checked:border-green-600"
             },
             emerald: {
-                input: "text-emerald-600 focus:ring-emerald-500 dark:focus:ring-emerald-600"
+                input: "checked:border-emerald-600 hover:checked:border-emerald-600"
             },
             teal: {
-                input: "text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600"
+                input: "checked:border-teal-600 hover:checked:border-teal-600"
             },
             cyan: {
-                input: "text-cyan-600 focus:ring-cyan-500 dark:focus:ring-cyan-600"
+                input: "checked:border-cyan-600 hover:checked:border-cyan-600"
             },
-            sky: { input: "text-sky-600 focus:ring-sky-500 dark:focus:ring-sky-600" },
+            sky: { input: "checked:border-sky-600 hover:checked:border-sky-600" },
             blue: {
-                input: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
+                input: "checked:border-blue-600 hover:checked:border-blue-600"
             },
             indigo: {
-                input: "text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600"
+                input: "checked:border-indigo-600 hover:checked:border-indigo-600"
             },
             violet: {
-                input: "text-violet-600 focus:ring-violet-500 dark:focus:ring-violet-600"
+                input: "checked:border-violet-600 hover:checked:border-violet-600"
             },
             purple: {
-                input: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600"
+                input: "checked:border-purple-600 hover:checked:border-purple-600"
             },
             fuchsia: {
-                input: "text-fuchsia-600 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-600"
+                input: "checked:border-fuchsia-600 hover:checked:border-fuchsia-600"
             },
             pink: {
-                input: "text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600"
+                input: "checked:border-pink-600 hover:checked:border-pink-600"
             },
             rose: {
-                input: "text-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600"
+                input: "checked:border-rose-600 hover:checked:border-rose-600"
             }
         },
-        tinted: {
-            true: { input: "dark:bg-dark-surface-600 dark:border-dark-surface-500" },
-            false: { input: "dark:bg-dark-surface-700 dark:border-dark-surface-600" }
-        },
         custom: {
-            true: { input: "!sr-only peer" }
+            true: { input: "sr-only! peer" }
         }
     },
     defaultVariants: {

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

@@ -11,5 +11,6 @@ interface RadioProps<T> extends HTMLInputAttributes {
     labelClass?: string;
     hidden?: boolean;
     custom?: boolean;
+    disabled?: boolean;
 }
 export { type RadioProps, type RadioColorType };

package/dist/forms/select/theme.d.ts

@@ -8,7 +8,7 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "block w-full", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "block w-full disabled:cursor-not-allowed disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
     underline: {
         true: string;
         false: string;
@@ -48,7 +48,7 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "block w-full", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "block w-full disabled:cursor-not-allowed disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
     underline: {
         true: string;
         false: string;

package/dist/forms/select/theme.js

@@ -1,11 +1,11 @@
 import { tv } from "tailwind-variants";
-// block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right text-sm p-2.5 border border-light-surface-300 dark:border-dark-surface-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 outline-none focus:ring-1 rounded-lg
+// block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right text-sm p-2.5 border border-light-surface-300 dark:border-dark-surface-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 outline-hidden focus:ring-1 rounded-lg
 export const select = tv({
-    base: "block w-full",
+    base: "block w-full disabled:cursor-not-allowed disabled:opacity-50",
     variants: {
         underline: {
-            true: "text-light-surface-500 bg-transparent border-0 border-b-2 border-light-surface-200 appearance-none dark:text-dark-surface-400 dark:border-dark-surface-700 focus:outline-none focus:ring-0 focus:border-light-surface-200 peer !px-0",
-            false: "text-light-surface-900 bg-light-surface-50 border border-light-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-dark-surface-700 dark:border-dark-surface-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:placeholder-dark-surface-400 required:invalid:text-dark-surface-400 outline-none focus:ring-1"
+            true: "text-light-surface-500 bg-transparent border-0 border-b-2 border-light-surface-200 appearance-none dark:text-dark-surface-400 dark:border-dark-surface-700 focus:outline-hidden focus:ring-0 focus:border-light-surface-200 peer px-0!",
+            false: "text-light-surface-900 bg-light-surface-50 border border-light-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-dark-surface-700 dark:border-dark-surface-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:placeholder-dark-surface-400 required:invalid:text-dark-surface-400 outline-hidden focus:ring-1"
         },
         size: {
             sm: "text-sm p-2",

package/dist/forms/textarea/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const textarea = tv({
     slots: {
-        base: "block text-sm bg-inherit dark:bg-inherit focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        base: "block text-sm bg-inherit dark:bg-inherit focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
         wrapper: "",
         innerWrapper: "",
         headerCls: "py-2 px-3 border-light-surface-200 dark:border-dark-surface-500",

package/dist/forms/toggle/theme.js

@@ -1,9 +1,9 @@
 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 rtl:peer-checked: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 dark:bg-gray-700 dark:border-gray-600 sr-only peer"
+        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"
     },
     variants: {
         disabled: {
@@ -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/gallery/theme.d.ts

@@ -1,15 +1,15 @@
 declare const gallery: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -17,16 +17,16 @@ declare const gallery: import("tailwind-variants").TVReturnType<{
     div: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -37,9 +37,9 @@ declare const gallery: import("tailwind-variants").TVReturnType<{
     div: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            image?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            image?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/indicator/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 const indicator = tv({
     slots: {
-        base: "flex-shrink-0"
+        base: "shrink-0"
     },
     variants: {
         color: {
@@ -35,7 +35,7 @@ const indicator = tv({
             xl: { base: "w-6 h-6" }
         },
         cornerStyle: {
-            rounded: { base: "rounded" },
+            rounded: { base: "rounded-sm" },
             circular: { base: "rounded-full" }
         },
         border: {

package/dist/list-group/theme.js

@@ -44,7 +44,7 @@ export const listGroupItem = tv({
         {
             active: true,
             state: "normal",
-            class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
+            class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
         }
     ]
 });

package/dist/mega-menu/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const megamenu = tv({
     slots: {
         base: "w-full border rounded-lg",
-        div: "flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2",
+        div: "flex flex-col md:flex-row p-4 max-w-(--breakpoint-md) justify-center mx-auto mt-2",
         ul: "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max grid-cols-2 md:grid-cols-3 text-sm font-medium",
         footerDiv: "md:w-1/3 mt-4 md:mt-0"
     },

package/dist/modal/theme.js

@@ -4,7 +4,7 @@ export const modal = tv({
         base: "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex pointer-events-none",
         div: "flex relative w-full max-h-full",
         content: "w-full text-light-surface-800 dark:text-dark-surface-300 bg-white dark:bg-dark-surface-800 pointer-events-auto",
-        backdrop: "fixed inset-0 z-50 bg-light-surface-900 bg-opacity-50 dark:bg-opacity-80 pointer-events-auto",
+        backdrop: "fixed inset-0 z-50 bg-light-surface-900/50 dark:bg-light-surface-900/80 pointer-events-auto",
         header: "flex justify-between items-center pt-4 px-4 rounded-t-xl",
         footer: "flex items-center p-4 space-x-3 rtl:space-x-reverse rounded-b-xl border-t border-light-surface-300 dark:border-dark-surface-600 ",
         body: "p-4 space-y-4 flex-1 overflow-y-auto overscroll-contain",
@@ -36,7 +36,7 @@ export const modal = tv({
             xl: { div: "max-w-7xl" }
         },
         backdrop: {
-            true: { backdrop: "bg-light-surface-900 dark:bg-dark-surface-900 bg-opacity-75" }
+            true: { backdrop: "bg-light-surface-900/75 dark:bg-dark-surface-900/75" }
         },
         rounded: {
             true: { content: "rounded-xl" }

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;
@@ -345,16 +345,16 @@ export declare const navUl: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 export declare const navbrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -362,16 +362,16 @@ export declare const navbrand: import("tailwind-variants").TVReturnType<{
     span: 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;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -382,9 +382,9 @@ export declare const navbrand: import("tailwind-variants").TVReturnType<{
     span: 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;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
@@ -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-none 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-none 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;