odj-svelte-ui 0.1.0 → 0.1.1

package/dist/forms/input/theme.js

@@ -4,7 +4,8 @@ export const input = tv({
         base: "relative w-full",
         input: "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right",
         left: "flex absolute inset-y-0 items-center text-light-surface-500 dark:text-dark-surface-400 pointer-events-none start-0 ps-2.5",
-        right: "flex absolute inset-y-0 items-center text-light-surface-500 dark:text-dark-surface-400 end-0 p-2.5"
+        right: "flex absolute inset-y-0 items-center text-light-surface-500 dark:text-dark-surface-400 end-0 p-2.5",
+        searchInputXButton: "hidden"
     },
     variants: {
         size: {
@@ -14,70 +15,92 @@ export const input = tv({
         },
         color: {
             default: {
-                input: "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 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"
+                input: "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 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",
+                searchInputXButton: "text-primary-600 dark:text-primary-500"
             },
             tinted: {
-                input: "border border-neutral-300 dark:border-neutral-500 bg-light-surface-50 text-neutral-900 dark:bg-dark-surface-600 dark:text-white dark:placeholder-dark-surface-400 outline-none focus:ring-1"
+                input: "border border-neutral-300 dark:border-neutral-500 bg-light-surface-50 text-neutral-900 dark:bg-dark-surface-600 dark:text-white dark:placeholder-dark-surface-400 outline-none focus:ring-1",
+                searchInputXButton: "text-light-surface-600 dark:text-dark-surface-500"
             },
             primary: {
-                input: "border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-primary-600 dark:text-primary-500"
             },
             secondary: {
-                input: "border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-secondary-600 dark:text-secondary-500"
             },
             green: {
-                input: "border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-green-600 dark:text-green-500"
             },
             emerald: {
-                input: "border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-emerald-600 dark:text-emerald-500"
             },
             red: {
-                input: "border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-red-600 dark:text-red-500"
             },
             blue: {
-                input: "border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-blue-600 dark:text-blue-500"
             },
             yellow: {
-                input: "border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-yellow-600 dark:text-yellow-500"
             },
             orange: {
-                input: "border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-orange-600 dark:text-orange-500"
             },
             gray: {
-                input: "border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-light-surface-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-dark-surface-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-light-surface-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-dark-surface-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-gray-600 dark:text-gray-500"
             },
             teal: {
-                input: "border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-teal-600 dark:text-teal-500"
             },
             cyan: {
-                input: "border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-cyan-600 dark:text-cyan-500"
             },
             sky: {
-                input: "border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-sky-600 dark:text-sky-500"
             },
             indigo: {
-                input: "border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-indigo-600 dark:text-indigo-500"
             },
             lime: {
-                input: "border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-lime-600 dark:text-lime-500"
             },
             amber: {
-                input: "border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-amber-600 dark:text-amber-500"
             },
             violet: {
-                input: "border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-violet-600 dark:text-violet-500"
             },
             purple: {
-                input: "border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-purple-600 dark:text-purple-500"
             },
             fuchsia: {
-                input: "border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-fuchsia-600 dark:text-fuchsia-500"
             },
             pink: {
-                input: "border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-pink-600 dark:text-pink-500"
             },
             rose: {
-                input: "border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-dark-surface-700 outline-none focus:ring-1"
+                input: "border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                searchInputXButton: "text-rose-600 dark:text-rose-500"
             }
         },
         group: {

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

@@ -16,5 +16,6 @@ interface InputProps<T extends InputValue = string> extends Omit<HTMLInputAttrib
     classRight?: string;
     class?: string;
     divClass?: string;
+    classSearchInputXButton?: string;
 }
 export { type InputProps, type InputValue };

package/dist/forms/textarea/Textarea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { type TextareaProps as Props, textarea } from ".";
 
-  let { header, footer, value = $bindable(), divClass, innerClass, headerClass, footerClass, disabled, class: className, cols, ...restProps }: Props = $props();
+  let { header, footer, value = $bindable(), divClass, innerClass, headerClass, footerClass, disabled, class: className, cols, autoexpand = false, maxRows = 15, ...restProps }: Props = $props();
 
   let hasHeader = !!header;
   let hasFooter = !!footer;
@@ -13,7 +13,63 @@
   }
 
   const { base, wrapper, innerWrapper, headerCls, footerCls } = $derived(textarea({ wrapped, hasHeader, hasFooter, cols: !!cols }));
-  // $inspect('wrapped: ', wrapped);
+  
+  function expandTextarea(this: HTMLTextAreaElement) {
+    if (!autoexpand) return;
+
+    // Get the element
+    const textarea = this;
+
+    // Set required styles for this to function properly.
+    textarea.style.setProperty('resize', 'none');
+    textarea.style.setProperty('min-height', '0');
+    textarea.style.setProperty('max-height', 'none');
+    textarea.style.setProperty('height', 'auto');
+
+    // Set rows attribute to number of lines in content
+
+    // Reset rows attribute to get accurate scrollHeight
+    textarea.setAttribute('rows', '1');
+
+    // Get the computed values object reference
+    const cs = getComputedStyle(textarea);
+
+    // Force content-box for size accurate line-height calculation
+    // Remove scrollbars, lock width (subtract inline padding and inline border widths)
+    // and remove inline padding and borders to keep width consistent (for text wrapping accuracy)
+    const inline_padding = parseFloat(cs['padding-left']) + parseFloat(cs['padding-right']);
+    const inline_border_width = parseFloat(cs['border-left-width']) + parseFloat(cs['border-right-width']);
+    textarea.style.setProperty('overflow', 'hidden', 'important');
+    textarea.style.setProperty('width', (parseFloat(cs['width']) - inline_padding - inline_border_width) + 'px');
+    textarea.style.setProperty('box-sizing', 'content-box');
+    textarea.style.setProperty('padding-inline', '0');
+    textarea.style.setProperty('border-width', '0');
+    
+    // Get the base line height, and top / bottom padding.
+    const block_padding = parseFloat(cs['padding-top']) + parseFloat(cs['padding-bottom']);
+    const line_height =
+      // If line-height is not explicitly set, use the computed height value (ignore padding due to content-box)
+      cs['line-height'] === 'normal' ? parseFloat(cs['height'])
+      // Otherwise (line-height is explicitly set), use the computed line-height value.
+      : parseFloat(cs['line-height']);
+
+    // Get the scroll height (rounding to be safe to ensure cross browser consistency)
+    const scroll_height = Math.round(textarea.scrollHeight);
+
+    // Undo overflow, width, border-width, box-sizing & inline padding overrides
+    textarea.style.removeProperty('width');
+    textarea.style.removeProperty('box-sizing');
+    textarea.style.removeProperty('padding-inline');
+    textarea.style.removeProperty('border-width');
+    textarea.style.removeProperty('overflow');
+
+    // Subtract block_padding from scroll_height and divide that by our line_height to get the row count.
+    // Round to nearest integer as it will always be within ~.1 of the correct whole number.
+    const rows = Math.round((scroll_height - block_padding) / line_height);
+
+    // Set the calculated rows attribute (limited by maxRows)
+    textarea.setAttribute("rows", "" + Math.min(rows, Math.abs(maxRows)));
+  }
 </script>
 
 <div class={wrapper({ class: divClass })}>
@@ -23,7 +79,7 @@
     </div>
   {/if}
   <div class={innerWrapper({ class: innerClass })}>
-    <textarea bind:value {disabled} {...restProps} class={base({ className })}></textarea>
+    <textarea bind:value {disabled} {...restProps} class={base({ className })} oninput={expandTextarea}></textarea>
   </div>
   {#if footer}
     <div class={footerCls({ class: footerClass })}>

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

@@ -10,5 +10,7 @@ interface TextareaProps extends HTMLTextareaAttributes {
     headerClass?: string;
     footerClass?: string;
     cols?: number;
+    autoexpand?: boolean;
+    maxRows?: number;
 }
 export { type TextareaProps };

package/dist/spinner/theme.d.ts

@@ -20,6 +20,9 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         fuchsia: string;
         pink: string;
         rose: string;
+        light: string;
+        dark: string;
+        alternative: string;
     };
     size: {
         "4": string;
@@ -52,6 +55,9 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         fuchsia: string;
         pink: string;
         rose: string;
+        light: string;
+        dark: string;
+        alternative: string;
     };
     size: {
         "4": string;
@@ -84,6 +90,9 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         fuchsia: string;
         pink: string;
         rose: string;
+        light: string;
+        dark: string;
+        alternative: string;
     };
     size: {
         "4": string;
@@ -116,6 +125,9 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         fuchsia: string;
         pink: string;
         rose: string;
+        light: string;
+        dark: string;
+        alternative: string;
     };
     size: {
         "4": string;
@@ -148,6 +160,9 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         fuchsia: string;
         pink: string;
         rose: string;
+        light: string;
+        dark: string;
+        alternative: string;
     };
     size: {
         "4": string;
@@ -180,6 +195,9 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         fuchsia: string;
         pink: string;
         rose: string;
+        light: string;
+        dark: string;
+        alternative: string;
     };
     size: {
         "4": string;
@@ -212,6 +230,9 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         fuchsia: string;
         pink: string;
         rose: string;
+        light: string;
+        dark: string;
+        alternative: string;
     };
     size: {
         "4": string;

package/dist/spinner/theme.js

@@ -23,7 +23,10 @@ export const spinner = tv({
             purple: "fill-purple-600",
             fuchsia: "fill-fuchsia-600",
             pink: "fill-pink-600",
-            rose: "fill-rose-600"
+            rose: "fill-rose-600",
+            light: "fill-light-surface-600",
+            dark: "fill-dark-surface-600",
+            alternative: "fill-primary-600 dark:fill-dark-surface-100"
         },
         size: {
             "4": "w-4 h-4",

package/dist/spinner/type.d.ts

@@ -1,5 +1,5 @@
 import type { SVGAttributes } from "svelte/elements";
-type ColorType = "primary" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "orange" | "amber" | "lime" | "emerald" | "teal" | "cyan" | "sky" | "violet" | "fuchsia" | "rose" | "secondary" | undefined;
+type ColorType = "primary" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "orange" | "amber" | "lime" | "emerald" | "teal" | "cyan" | "sky" | "violet" | "fuchsia" | "rose" | "secondary" | "dark" | "alternative" | "light" | undefined;
 type SizeType = "8" | "4" | "5" | "6" | "10" | "12" | "16" | undefined;
 interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
     color?: ColorType;

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "odj-svelte-ui",
   "author": "orbitadajogatina",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "This is a fork from Flowbite Svelte 5 with Runes. I just made some changes that fits better my taste.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint && bun link",
+    "package": "svelte-kit sync && svelte-package && publint",
     "prepublishOnly": "npm run package",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",