odj-svelte-ui 0.1.0 → 0.2.0

package/dist/table/theme.js

@@ -179,108 +179,108 @@ export const tablebodyrow = tv({
         {
             striped: true,
             color: "default",
-            class: "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700"
+            class: "odd:bg-white even:bg-gray-50 dark:odd:bg-gray-800 dark:even:bg-gray-700"
         },
         {
             striped: true,
             color: "primary",
-            class: "odd:bg-primary-500 even:bg-primary-600 odd:dark:bg-primary-500 even:dark:bg-primary-600"
+            class: "odd:bg-primary-500 even:bg-primary-600 dark:odd:bg-primary-500 dark:even:bg-primary-600"
         },
         {
             striped: true,
             color: "secondary",
-            class: "odd:bg-secondary-500 even:bg-secondary-600 odd:dark:bg-secondary-500 even:dark:bg-secondary-600"
+            class: "odd:bg-secondary-500 even:bg-secondary-600 dark:odd:bg-secondary-500 dark:even:bg-secondary-600"
         },
         {
             striped: true,
             color: "gray",
-            class: "odd:bg-gray-500 even:bg-gray-600 odd:dark:bg-gray-500 even:dark:bg-gray-600"
+            class: "odd:bg-gray-500 even:bg-gray-600 dark:odd:bg-gray-500 dark:even:bg-gray-600"
         },
         // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
         {
             striped: true,
             color: "red",
-            class: "odd:bg-red-500 even:bg-red-600 odd:dark:bg-red-500 even:dark:bg-red-600"
+            class: "odd:bg-red-500 even:bg-red-600 dark:odd:bg-red-500 dark:even:bg-red-600"
         },
         {
             striped: true,
             color: "orange",
-            class: "odd:bg-orange-500 even:bg-orange-600 odd:dark:bg-orange-500 even:dark:bg-orange-600"
+            class: "odd:bg-orange-500 even:bg-orange-600 dark:odd:bg-orange-500 dark:even:bg-orange-600"
         },
         {
             striped: true,
             color: "amber",
-            class: "odd:bg-amber-500 even:bg-amber-600 odd:dark:bg-amber-500 even:dark:bg-amber-600"
+            class: "odd:bg-amber-500 even:bg-amber-600 dark:odd:bg-amber-500 dark:even:bg-amber-600"
         },
         {
             striped: true,
             color: "yellow",
-            class: "odd:bg-yellow-500 even:bg-yellow-600 odd:dark:bg-yellow-500 even:dark:bg-yellow-600"
+            class: "odd:bg-yellow-500 even:bg-yellow-600 dark:odd:bg-yellow-500 dark:even:bg-yellow-600"
         },
         {
             striped: true,
             color: "lime",
-            class: "odd:bg-lime-500 even:bg-lime-600 odd:dark:bg-lime-500 even:dark:bg-lime-600"
+            class: "odd:bg-lime-500 even:bg-lime-600 dark:odd:bg-lime-500 dark:even:bg-lime-600"
         },
         {
             striped: true,
             color: "green",
-            class: "odd:bg-green-500 even:bg-green-600 odd:dark:bg-green-500 even:dark:bg-green-600"
+            class: "odd:bg-green-500 even:bg-green-600 dark:odd:bg-green-500 dark:even:bg-green-600"
         },
         {
             striped: true,
             color: "emerald",
-            class: "odd:bg-emerald-500 even:bg-emerald-600 odd:dark:bg-emerald-500 even:dark:bg-emerald-600"
+            class: "odd:bg-emerald-500 even:bg-emerald-600 dark:odd:bg-emerald-500 dark:even:bg-emerald-600"
         },
         {
             striped: true,
             color: "teal",
-            class: "odd:bg-teal-500 even:bg-teal-600 odd:dark:bg-teal-500 even:dark:bg-teal-600"
+            class: "odd:bg-teal-500 even:bg-teal-600 dark:odd:bg-teal-500 dark:even:bg-teal-600"
         },
         {
             striped: true,
             color: "cyan",
-            class: "odd:bg-cyan-500 even:bg-cyan-600 odd:dark:bg-cyan-500 even:dark:bg-cyan-600"
+            class: "odd:bg-cyan-500 even:bg-cyan-600 dark:odd:bg-cyan-500 dark:even:bg-cyan-600"
         },
         {
             striped: true,
             color: "sky",
-            class: "odd:bg-sky-500 even:bg-sky-600 odd:dark:bg-sky-500 even:dark:bg-sky-600"
+            class: "odd:bg-sky-500 even:bg-sky-600 dark:odd:bg-sky-500 dark:even:bg-sky-600"
         },
         {
             striped: true,
             color: "blue",
-            class: "odd:bg-blue-500 even:bg-blue-600 odd:dark:bg-blue-500 even:dark:bg-blue-600"
+            class: "odd:bg-blue-500 even:bg-blue-600 dark:odd:bg-blue-500 dark:even:bg-blue-600"
         },
         {
             striped: true,
             color: "indigo",
-            class: "odd:bg-indigo-500 even:bg-indigo-600 odd:dark:bg-indigo-500 even:dark:bg-indigo-600"
+            class: "odd:bg-indigo-500 even:bg-indigo-600 dark:odd:bg-indigo-500 dark:even:bg-indigo-600"
         },
         {
             striped: true,
             color: "violet",
-            class: "odd:bg-violet-500 even:bg-violet-600 odd:dark:bg-violet-500 even:dark:bg-violet-600"
+            class: "odd:bg-violet-500 even:bg-violet-600 dark:odd:bg-violet-500 dark:even:bg-violet-600"
         },
         {
             striped: true,
             color: "purple",
-            class: "odd:bg-purple-500 even:bg-purple-600 odd:dark:bg-purple-500 even:dark:bg-purple-600"
+            class: "odd:bg-purple-500 even:bg-purple-600 dark:odd:bg-purple-500 dark:even:bg-purple-600"
         },
         {
             striped: true,
             color: "fuchsia",
-            class: "odd:bg-fuchsia-500 even:bg-fuchsia-600 odd:dark:bg-fuchsia-500 even:dark:bg-fuchsia-600"
+            class: "odd:bg-fuchsia-500 even:bg-fuchsia-600 dark:odd:bg-fuchsia-500 dark:even:bg-fuchsia-600"
         },
         {
             striped: true,
             color: "pink",
-            class: "odd:bg-pink-500 even:bg-pink-600 odd:dark:bg-pink-500 even:dark:bg-pink-600"
+            class: "odd:bg-pink-500 even:bg-pink-600 dark:odd:bg-pink-500 dark:even:bg-pink-600"
         },
         {
             striped: true,
             color: "rose",
-            class: "odd:bg-rose-500 even:bg-rose-600 odd:dark:bg-rose-500 even:dark:bg-rose-600"
+            class: "odd:bg-rose-500 even:bg-rose-600 dark:odd:bg-rose-500 dark:even:bg-rose-600"
         }
     ]
 });

package/dist/tabs/Tabs.svelte

@@ -2,6 +2,7 @@
   import { writable, get } from "svelte/store";
   import { setContext } from "svelte";
   import { type TabsProps as Props, type TabCtxType, tabs } from ".";
+  import { onMount, onDestroy } from "svelte";
 
   let { children, tabStyle = "none", ulClass, contentClass, sliderClass, divider = true, ...restProps }: Props = $props();
 
@@ -43,15 +44,33 @@
   }
 
   $effect(() => {
-    ctx.currentTab.subscribe((id) => {
+    const unsubscribe = ctx.currentTab.subscribe((id) => {
       updateUnderlineSlider(id);
     });
+
+    return unsubscribe;
+  });
+
+  onMount(() => {
+    const observer = new ResizeObserver(() => {
+      updateUnderlineSlider(get(ctx.currentTab));
+    });
+
+    const container = document.querySelector("#tabs-" + panelId);
+    if (container) {
+      observer.observe(container);
+    }
+
+    onDestroy(() => {
+      observer.disconnect();
+    });
   });
+  
 </script>
 
-<svelte:window onresize={() => updateUnderlineSlider(get(ctx.currentTab))}/>
+<!-- <svelte:window onresize={() => updateUnderlineSlider(get(ctx.currentTab))}/> -->
 
-<ul {...restProps} class={base({ class: ulClass })}>
+<ul id="tabs-{panelId}" {...restProps} class={base({ class: ulClass })}>
   {@render children()}
   {#if ['underline', 'full'].includes(tabStyle)}
     <li class={slider({ class: sliderClass })} id="slider-{panelId}" role="presentation"></li>

package/dist/tabs/theme.js

@@ -24,7 +24,7 @@ export const tabs = tv({
                 base: "-mb-px relative",
                 active: "text-primary-600 dark:text-primary-500 bg-transparent hover:border-light-surface-300 border-b-2 border-transparent",
                 inactive: "hover:text-light-surface-700 dark:hover:text-dark-surface-300 text-light-surface-500 dark:text-dark-surface-400 bg-transparent hover:border-light-surface-300 border-b-2 border-transparent",
-                slider: "absolute bottom-0 transition-all duration-200 border-b-2 border-primary-600 dark:border-primary-500 !m-0 z-10"
+                slider: "absolute bottom-0 transition-all duration-200 border-b-2 border-primary-600 dark:border-primary-500 m-0! z-10"
             },
             none: {
                 active: "dark:bg-dark-surface-800 dark:text-primary-500",

package/dist/theme/Theme.svelte.d.ts

@@ -1,7 +1,8 @@
 import { type Snippet } from "svelte";
-declare const Theme: import("svelte").Component<{
+interface Props {
     children: Snippet;
     theme?: Record<string, any>;
-}, {}, "">;
+}
+declare const Theme: import("svelte").Component<Props, {}, "">;
 type Theme = ReturnType<typeof Theme>;
 export default Theme;

package/dist/timeline/theme.d.ts

@@ -1,28 +1,28 @@
 export declare const activity: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative border-s border-gray-200 dark:border-gray-700", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative border-s border-gray-200 dark:border-gray-700", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export declare const activityitem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
+            li?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
+            li?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -36,28 +36,28 @@ export declare const activityitem: import("tailwind-variants").TVReturnType<{
     text: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
+            li?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
+            li?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -80,32 +80,32 @@ export declare const activityitem: import("tailwind-variants").TVReturnType<{
     text: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            text?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
+            li?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
 export declare const group: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            ol?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            ol?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            ol?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            ol?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -114,18 +114,18 @@ export declare const group: import("tailwind-variants").TVReturnType<{
     ol: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            ol?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            ol?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            ol?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            ol?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -138,31 +138,31 @@ export declare const group: import("tailwind-variants").TVReturnType<{
     ol: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            div?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
-            ol?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            div?: import("tailwind-variants").ClassValue;
+            time?: import("tailwind-variants").ClassValue;
+            ol?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
 export declare const groupitem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            a?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            a?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            a?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            a?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -173,22 +173,22 @@ export declare const groupitem: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            a?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            a?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            a?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            a?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -205,12 +205,12 @@ export declare const groupitem: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            title?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            a?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
+            a?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/timeline/theme.js

@@ -7,7 +7,7 @@ export const activityitem = tv({
         li: "mb-10 ms-6",
         span: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900",
         img: "rounded-full shadow-lg",
-        outerDiv: "p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600",
+        outerDiv: "p-4 bg-white rounded-lg border border-gray-200 shadow-xs dark:bg-gray-700 dark:border-gray-600",
         innerDiv: "justify-between items-center mb-3 sm:flex",
         time: "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0",
         title: "text-sm font-normal text-gray-500 lex dark:text-gray-300",

package/dist/toast/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const toast = tv({
     slots: {
-        base: "flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 gap-3",
+        base: "flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3",
         icon: "w-8 h-8 inline-flex items-center justify-center shrink-0 rounded-lg",
         content: "w-full text-sm font-normal",
         close: "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"

package/dist/toolbar/ToolbarButton.svelte

@@ -29,13 +29,13 @@
   // };
 
   // const sizing = {
-  //   xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5',
-  //   sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+  //   xs: 'm-0.5 rounded-xs focus:ring-1 p-0.5',
+  //   sm: 'm-0.5 rounded-sm focus:ring-1 p-0.5',
   //   md: 'm-0.5 rounded-lg focus:ring-2 p-1.5',
   //   lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
   // };
 
-  // let buttonClass: string = twMerge('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' && (background ? 'dark:hover:bg-gray-600' : 'dark:hover:bg-gray-700'), className);
+  // let buttonClass: string = twMerge('focus:outline-hidden whitespace-normal', sizing[size], colors[color], color === 'default' && (background ? 'dark:hover:bg-gray-600' : 'dark:hover:bg-gray-700'), className);
 </script>
 
 {#if href}

package/dist/toolbar/theme.d.ts

@@ -285,7 +285,7 @@ export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "focus:outline-none whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "focus:outline-hidden whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
     color: {
         dark: string;
         gray: string;
@@ -381,7 +381,7 @@ export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "focus:outline-none whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "focus:outline-hidden whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
     color: {
         dark: string;
         gray: string;

package/dist/toolbar/theme.js

@@ -63,7 +63,7 @@ export const toolbarGroup = tv({
     ]
 });
 export const toolbarButton = tv({
-    base: "focus:outline-none whitespace-normal",
+    base: "focus:outline-hidden whitespace-normal",
     variants: {
         color: {
             dark: "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600",
@@ -79,8 +79,8 @@ export const toolbarButton = tv({
             default: "focus:ring-gray-400 hover:bg-gray-100"
         },
         size: {
-            xs: "m-0.5 rounded-sm focus:ring-1 p-0.5",
-            sm: "m-0.5 rounded focus:ring-1 p-0.5",
+            xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
+            sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
             md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
             lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
         },

package/dist/typography/img/theme.js

@@ -25,7 +25,7 @@ export const img = tv({
             grayscale: {
                 base: "cursor-pointer rounded-lg grayscale filter transition-all duration-300 hover:grayscale-0"
             },
-            blur: { base: "blur-sm transition-all duration-300 hover:blur-none" },
+            blur: { base: "blur-xs transition-all duration-300 hover:blur-none" },
             invert: {
                 base: "invert filter transition-all duration-300 hover:invert-0"
             },
@@ -43,8 +43,8 @@ export const img = tv({
             }
         },
         shadow: {
-            sm: { base: "shadow-sm" },
-            regular: { base: "shadow" },
+            sm: { base: "shadow-xs" },
+            regular: { base: "shadow-sm" },
             md: { base: "shadow-md" },
             lg: { base: "shadow-lg" },
             xl: { base: "shadow-xl" },
@@ -53,8 +53,8 @@ export const img = tv({
             none: { base: "shadow-none" }
         },
         rounded: {
-            sm: { base: "rounded-sm" },
-            regular: { base: "rounded" },
+            sm: { base: "rounded-xs" },
+            regular: { base: "rounded-sm" },
             md: { base: "rounded-md" },
             lg: { base: "rounded-lg" },
             xl: { base: "rounded-xl" },

package/dist/typography/mark/theme.d.ts

@@ -1 +1 @@
-export declare const mark: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const mark: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/typography/mark/theme.js

@@ -1,4 +1,4 @@
 import { tv } from "tailwind-variants";
 export const mark = tv({
-    base: "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded"
+    base: "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded-sm"
 });

package/dist/typography/span/theme.js

@@ -14,18 +14,18 @@ export const span = tv({
             true: "uppercase"
         },
         gradient: {
-            skyToEmerald: "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400",
-            purpleToBlue: "text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500",
-            pinkToOrange: "text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-orange-400",
-            tealToLime: "text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-lime-300",
-            redToYellow: "text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-yellow-500",
-            indigoToCyan: "text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-cyan-400",
-            fuchsiaToRose: "text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 to-rose-500",
-            amberToEmerald: "text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-emerald-500",
-            violetToRed: "text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-red-500",
-            blueToGreen: "text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-teal-500 to-green-400",
-            orangeToPurple: "text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-pink-500 to-purple-500",
-            yellowToRed: "text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-indigo-400 to-red-600",
+            skyToEmerald: "text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400",
+            purpleToBlue: "text-transparent bg-clip-text bg-linear-to-r from-purple-500 to-blue-500",
+            pinkToOrange: "text-transparent bg-clip-text bg-linear-to-r from-pink-500 to-orange-400",
+            tealToLime: "text-transparent bg-clip-text bg-linear-to-r from-teal-400 to-lime-300",
+            redToYellow: "text-transparent bg-clip-text bg-linear-to-r from-red-600 to-yellow-500",
+            indigoToCyan: "text-transparent bg-clip-text bg-linear-to-r from-indigo-600 to-cyan-400",
+            fuchsiaToRose: "text-transparent bg-clip-text bg-linear-to-r from-fuchsia-500 to-rose-500",
+            amberToEmerald: "text-transparent bg-clip-text bg-linear-to-r from-amber-400 to-emerald-500",
+            violetToRed: "text-transparent bg-clip-text bg-linear-to-r from-violet-600 to-red-500",
+            blueToGreen: "text-transparent bg-clip-text bg-linear-to-r from-blue-400 via-teal-500 to-green-400",
+            orangeToPurple: "text-transparent bg-clip-text bg-linear-to-r from-orange-400 via-pink-500 to-purple-500",
+            yellowToRed: "text-transparent bg-clip-text bg-linear-to-r from-yellow-200 via-indigo-400 to-red-600",
             none: ""
         },
         highlight: {