odj-svelte-ui 0.1.0 → 0.2.0

package/dist/{elements → _legacy}/typography/Mark.svelte.d.ts

@@ -21,7 +21,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * ## Props
  * @prop export let color: string = 'text-white dark:bg-blue-500';
  * @prop export let bgColor: string = 'bg-blue-600';
- * @prop export let markClass: string = 'px-2 rounded';
+ * @prop export let markClass: string = 'px-2 rounded-sm';
  */
 declare const Mark: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/{elements → _legacy}/typography/Span.svelte

@@ -9,7 +9,7 @@
   export let highlight: boolean = false;
   export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
   export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-  export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+  export let gradientClass: string = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
 
   let underlineClass = twMerge('underline', decorationClass);
   let classSpan: string = twMerge(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-neutral-900 dark:text-white', highlight && highlightClass, $$props.class);
@@ -31,5 +31,5 @@
 @prop export let highlight: boolean = false;
 @prop export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
 @prop export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-@prop export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+@prop export let gradientClass: string = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
 -->

package/dist/{elements → _legacy}/typography/Span.svelte.d.ts

@@ -27,7 +27,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let highlight: boolean = false;
  * @prop export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
  * @prop export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
- * @prop export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+ * @prop export let gradientClass: string = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
  */
 declare const Span: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/{elements → _legacy}/utils/backdrop.js

@@ -1,6 +1,6 @@
 import { createEventDispatcher } from 'svelte';
 export let open = false;
-const backdropClasses = 'bg-neutral-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+const backdropClasses = 'bg-neutral-900/50 dark:bg-neutral-900/80 fixed inset-0 z-40';
 export let placement;
 // const placement:
 // 		| 'top-left'

package/dist/accordion/theme.js

@@ -14,7 +14,7 @@ export const accordionitem = tv({
         button: "flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b",
         content: "border-b border-gray-200 dark:border-gray-700",
         active: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
-        inactive: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+        inactive: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
     },
     variants: {
         flush: {

package/dist/alert/Alert.svelte

@@ -37,7 +37,7 @@
       {#if closeIcon}
         <button
           type="button"
-          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded-sm p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-hidden focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
           aria-label="Remove badge"
           onclick={() => {
             alertStatus = false;
@@ -73,7 +73,7 @@
 @props:alertStatus: any = $bindable(true);
 @props:closeIcon: any;
 @props:color: any = "primary";
-@props:rounded: any = true;
+@-props:rounded-sm: any = true;
 @props:border: any;
 @props:class: string;
 @props:dismissable: any;

package/dist/alert/Alert.svelte.d.ts

@@ -7,7 +7,7 @@ import { type AlertProps as Props } from ".";
  * @props:alertStatus: any = $bindable(true);
  * @props:closeIcon: any;
  * @props:color: any = "primary";
- * @props:rounded: any = true;
+ * @-props:rounded-sm: any = true;
  * @props:border: any;
  * @props:class: string;
  * @props:dismissable: any;

package/dist/avatar/Avatar.svelte

@@ -20,11 +20,11 @@
 {#if !src || !!href || children || dot}
   <svelte:element this={href ? "a" : "div"} role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
     {#if src}
-      <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded"} />
+      <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
     {:else if children}
       {@render children()}
     {:else}
-      <svg class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <svg class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
       </svg>
     {/if}

package/dist/avatar/theme.js

@@ -3,7 +3,7 @@ const avatar = tv({
     base: "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300",
     variants: {
         cornerStyle: {
-            rounded: "rounded",
+            rounded: "rounded-sm",
             circular: "rounded-full"
         },
         border: {

package/dist/badge/Badge.svelte

@@ -24,7 +24,7 @@
       {#if icon}
         <button
           type="button"
-          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded-sm p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-hidden focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
           aria-label="Remove badge"
           onclick={() => {
             badgeStatus = false;
@@ -64,7 +64,7 @@
 @props:border: any;
 @props:href: any;
 @props:target: any;
-@props:rounded: any;
+@-props:rounded-sm: any;
 @props:transition: any = fade;
 @props:params: any;
 @props:aClass: any;

package/dist/badge/Badge.svelte.d.ts

@@ -12,7 +12,7 @@ import { type BadgeProps as Props } from "./index";
  * @props:border: any;
  * @props:href: any;
  * @props:target: any;
- * @props:rounded: any;
+ * @-props:rounded-sm: any;
  * @props:transition: any = fade;
  * @props:params: any;
  * @props:aClass: any;

package/dist/badge/theme.js

@@ -37,7 +37,7 @@ const badge = tv({
         },
         rounded: {
             true: "rounded-full",
-            false: "rounded"
+            false: "rounded-sm"
         }
     },
     compoundVariants: [

package/dist/banner/theme.js

@@ -24,16 +24,16 @@ const banner = tv({
                 insideDiv: "mx-auto"
             },
             cta: {
-                base: "flex-col md:flex-row w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl start-1/2 top-6",
+                base: "flex-col md:flex-row w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-xs lg:max-w-7xl start-1/2 top-6",
                 insideDiv: "flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0"
             },
             signup: {
                 base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
-                insideDiv: "flex-shrink-0 w-full mx-auto sm:w-auto"
+                insideDiv: "shrink-0 w-full mx-auto sm:w-auto"
             },
             info: {
                 base: "top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50",
-                insideDiv: "flex-shrink-0"
+                insideDiv: "shrink-0"
             }
         },
         color: {

package/dist/bottom-navigation/theme.d.ts

@@ -664,16 +664,16 @@ export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -681,16 +681,16 @@ export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     outerDiv: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -701,9 +701,9 @@ export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     outerDiv: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/buttongroup/theme.d.ts

@@ -4,7 +4,7 @@ declare const buttonGroup: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "inline-flex rounded-lg shadow-sm", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex rounded-lg shadow-xs", import("tailwind-variants/dist/config").TVConfig<{
     size: {
         sm: string;
         md: string;
@@ -28,7 +28,7 @@ declare const buttonGroup: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "inline-flex rounded-lg shadow-sm", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex rounded-lg shadow-xs", import("tailwind-variants/dist/config").TVConfig<{
     size: {
         sm: string;
         md: string;

package/dist/buttongroup/theme.js

@@ -1,6 +1,6 @@
 import { tv } from "tailwind-variants";
 const buttonGroup = tv({
-    base: "inline-flex rounded-lg shadow-sm",
+    base: "inline-flex rounded-lg shadow-xs",
     variants: {
         size: {
             sm: "scale-90",

package/dist/buttons/Button.svelte

@@ -1,26 +1,48 @@
 <script lang="ts">
+  import Spinner from "../spinner/Spinner.svelte";
   import { getContext } from "svelte";
   import type { SizeType } from "../types";
   import { type ButtonProps as Props, button } from ".";
 
   const group: SizeType = getContext("group");
 
-  let { children, pill = false, outline = false, size = group ? "sm" : "md", href, type = "button", color = group ? (outline ? "dark" : "alternative") : "primary", shadow = false, tag = "button", disabled, class: className, ...restProps }: Props = $props();
+  let { children, pill = false, outline = false, size = group ? "sm" : "md", href, type = "button", color = group ? (outline ? "dark" : "alternative") : "primary", shadow = false, tag = "button", disabled, class: className, loading = false, ...restProps }: Props = $props();
 
+  let disabledValueBeforeLoading:boolean|undefined = $state(disabled);
+  $effect(() => { 
+    if (loading) {
+      disabled = true;
+    } else {
+      disabled = disabledValueBeforeLoading;
+    }
+  })
   const base = $derived(button({ color, size, disabled, pill, group: !!group, outline, shadow, className }));
 </script>
 
+{#snippet defaultOrLoadingWrapper()}
+  {#if loading}
+    <div class="w-full text-center relative">
+      <Spinner size="4" {color} class="absolute inset-0 m-auto"/>
+      <div class="invisible">
+        {@render children()}
+      </div>
+    </div>
+  {:else}
+    {@render children()}
+  {/if}
+{/snippet}
+
 {#if href}
   <a {href} {...restProps} class={base} role="button">
-    {@render children()}
+    {@render defaultOrLoadingWrapper()}
   </a>
 {:else if tag === "button"}
   <button {type} {...restProps} class={base} {disabled}>
-    {@render children()}
+    {@render defaultOrLoadingWrapper()}
   </button>
 {:else}
   <svelte:element this={tag} {...restProps} class={base}>
-    {@render children()}
+    {@render defaultOrLoadingWrapper()}
   </svelte:element>
 {/if}
 

package/dist/buttons/theme.js

@@ -38,10 +38,10 @@ export const button = tv({
         },
         group: {
             true: "focus-visible:ring-2 focus-visible:z-10",
-            false: "focus-visible:ring-4 focus-visible:outline-none"
+            false: "focus-visible:ring-4 focus-visible:outline-hidden"
         },
         outline: {
-            true: "border !bg-transparent"
+            true: "border bg-transparent!"
         },
         shadow: {
             true: "shadow-lg"
@@ -182,117 +182,117 @@ export const button = tv({
         {
             outline: true,
             color: "dark",
-            class: "text-dark-surface-900 hover:text-white border border-dark-surface-800 hover:!bg-dark-surface-900 dark:border-dark-surface-600 dark:hover:text-white dark:hover:!bg-dark-surface-600"
+            class: "text-dark-surface-900 hover:text-white border border-dark-surface-800 hover:bg-dark-surface-900! dark:border-dark-surface-600 dark:hover:text-white dark:hover:bg-dark-surface-600!"
         },
         {
             outline: true,
             color: "alternative",
-            class: "text-neutral-900 hover:text-white border border-neutral-800 hover:bg-neutral-900 focus:!bg-neutral-900 dark:border-neutral-600 dark:hover:text-white dark:hover:!bg-neutral-600"
+            class: "text-light-surface-900 hover:text-white border hover:bg-primary-800! dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-600!"
         },
         {
             outline: true,
             color: "light",
-            class: "text-neutral-500 hover:text-neutral-900 bg-white border border-neutral-200 dark:border-neutral-600 dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-50 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+            class: "text-light-surface-900 bg-white dark:border-dark-surface-600 dark:hover:text-white dark:text-dark-surface-400 hover:bg-light-surface-100! dark:hover:bg-dark-surface-600!"
         },
         {
             outline: true,
             color: "primary",
-            class: "text-primary-700 hover:text-white border-primary-700 hover:!bg-primary-800 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:!bg-primary-600"
+            class: "text-primary-700 hover:text-white border-primary-700 hover:bg-primary-800! dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600!"
         },
         {
             outline: true,
             color: "secondary",
-            class: "text-secondary-700 hover:text-white border-secondary-700 hover:!bg-secondary-800 dark:border-secondary-500 dark:text-secondary-500 dark:hover:text-white dark:hover:!bg-secondary-600"
+            class: "text-secondary-700 hover:text-white border-secondary-700 hover:bg-secondary-800! dark:border-secondary-500 dark:text-secondary-500 dark:hover:text-white dark:hover:bg-secondary-600!"
         },
         {
             outline: true,
             color: "gray",
-            class: "text-gray-700 hover:text-white border-gray-700 hover:!bg-gray-800 dark:border-gray-500 dark:text-gray-500 dark:hover:text-white dark:hover:!bg-gray-600"
+            class: "text-gray-700 hover:text-white border-gray-700 hover:bg-gray-800! dark:border-gray-500 dark:text-gray-500 dark:hover:text-white dark:hover:bg-gray-600!"
         },
         {
             outline: true,
             color: "red",
-            class: "text-red-700 hover:text-white border-red-700 hover:!bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:!bg-red-600"
+            class: "text-red-700 hover:text-white border-red-700 hover:bg-red-800! dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600!"
         },
         {
             outline: true,
             color: "orange",
-            class: "text-orange-700 hover:text-white border-orange-700 hover:!bg-orange-800 dark:border-orange-500 dark:text-orange-500 dark:hover:text-white dark:hover:!bg-orange-600"
+            class: "text-orange-700 hover:text-white border-orange-700 hover:bg-orange-800! dark:border-orange-500 dark:text-orange-500 dark:hover:text-white dark:hover:bg-orange-600!"
         },
         {
             outline: true,
             color: "amber",
-            class: "text-amber-700 hover:text-white border-amber-700 hover:!bg-amber-800 dark:border-amber-500 dark:text-amber-500 dark:hover:text-white dark:hover:!bg-amber-600"
+            class: "text-amber-700 hover:text-white border-amber-700 hover:bg-amber-800! dark:border-amber-500 dark:text-amber-500 dark:hover:text-white dark:hover:bg-amber-600!"
         },
         {
             outline: true,
             color: "yellow",
-            class: "text-yellow-700 hover:text-white border-yellow-700 hover:!bg-yellow-800 dark:border-yellow-500 dark:text-yellow-500 dark:hover:text-white dark:hover:!bg-yellow-600"
+            class: "text-yellow-700 hover:text-white border-yellow-700 hover:bg-yellow-800! dark:border-yellow-500 dark:text-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600!"
         },
         {
             outline: true,
             color: "lime",
-            class: "text-lime-700 hover:text-white border-lime-700 hover:!bg-lime-800 dark:border-lime-500 dark:text-lime-500 dark:hover:text-white dark:hover:!bg-lime-600"
+            class: "text-lime-700 hover:text-white border-lime-700 hover:bg-lime-800! dark:border-lime-500 dark:text-lime-500 dark:hover:text-white dark:hover:bg-lime-600!"
         },
         {
             outline: true,
             color: "green",
-            class: "text-green-700 hover:text-white border-green-700 hover:!bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:!bg-green-600"
+            class: "text-green-700 hover:text-white border-green-700 hover:bg-green-800! dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600!"
         },
         {
             outline: true,
             color: "emerald",
-            class: "text-emerald-700 hover:text-white border-emerald-700 hover:!bg-emerald-800 dark:border-emerald-500 dark:text-emerald-500 dark:hover:text-white dark:hover:!bg-emerald-600"
+            class: "text-emerald-700 hover:text-white border-emerald-700 hover:bg-emerald-800! dark:border-emerald-500 dark:text-emerald-500 dark:hover:text-white dark:hover:bg-emerald-600!"
         },
         {
             outline: true,
             color: "teal",
-            class: "text-teal-700 hover:text-white border-teal-700 hover:!bg-teal-800 dark:border-teal-500 dark:text-teal-500 dark:hover:text-white dark:hover:!bg-teal-600"
+            class: "text-teal-700 hover:text-white border-teal-700 hover:bg-teal-800! dark:border-teal-500 dark:text-teal-500 dark:hover:text-white dark:hover:bg-teal-600!"
         },
         {
             outline: true,
             color: "cyan",
-            class: "text-cyan-700 hover:text-white border-cyan-700 hover:!bg-cyan-800 dark:border-cyan-500 dark:text-cyan-500 dark:hover:text-white dark:hover:!bg-cyan-600"
+            class: "text-cyan-700 hover:text-white border-cyan-700 hover:bg-cyan-800! dark:border-cyan-500 dark:text-cyan-500 dark:hover:text-white dark:hover:bg-cyan-600!"
         },
         {
             outline: true,
             color: "sky",
-            class: "text-sky-700 hover:text-white border-sky-700 hover:!bg-sky-800 dark:border-sky-500 dark:text-sky-500 dark:hover:text-white dark:hover:!bg-sky-600"
+            class: "text-sky-700 hover:text-white border-sky-700 hover:bg-sky-800! dark:border-sky-500 dark:text-sky-500 dark:hover:text-white dark:hover:bg-sky-600!"
         },
         {
             outline: true,
             color: "blue",
-            class: "text-blue-700 hover:text-white border-blue-700 hover:!bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:!bg-blue-600"
+            class: "text-blue-700 hover:text-white border-blue-700 hover:bg-blue-800! dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600!"
         },
         {
             outline: true,
             color: "indigo",
-            class: "text-indigo-700 hover:text-white border-indigo-700 hover:!bg-indigo-800 dark:border-indigo-500 dark:text-indigo-500 dark:hover:text-white dark:hover:!bg-indigo-600"
+            class: "text-indigo-700 hover:text-white border-indigo-700 hover:bg-indigo-800! dark:border-indigo-500 dark:text-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600!"
         },
         {
             outline: true,
             color: "violet",
-            class: "text-violet-700 hover:text-white border-violet-700 hover:!bg-violet-800 dark:border-violet-500 dark:text-violet-500 dark:hover:text-white dark:hover:!bg-violet-600"
+            class: "text-violet-700 hover:text-white border-violet-700 hover:bg-violet-800! dark:border-violet-500 dark:text-violet-500 dark:hover:text-white dark:hover:bg-violet-600!"
         },
         {
             outline: true,
             color: "purple",
-            class: "text-purple-700 hover:text-white border-purple-700 hover:!bg-purple-800 dark:border-purple-500 dark:text-purple-500 dark:hover:text-white dark:hover:!bg-purple-600"
+            class: "text-purple-700 hover:text-white border-purple-700 hover:bg-purple-800! dark:border-purple-500 dark:text-purple-500 dark:hover:text-white dark:hover:bg-purple-600!"
         },
         {
             outline: true,
             color: "fuchsia",
-            class: "text-fuchsia-700 hover:text-white border-fuchsia-700 hover:!bg-fuchsia-800 dark:border-fuchsia-500 dark:text-fuchsia-500 dark:hover:text-white dark:hover:!bg-fuchsia-600"
+            class: "text-fuchsia-700 hover:text-white border-fuchsia-700 hover:bg-fuchsia-800! dark:border-fuchsia-500 dark:text-fuchsia-500 dark:hover:text-white dark:hover:bg-fuchsia-600!"
         },
         {
             outline: true,
             color: "pink",
-            class: "text-pink-700 hover:text-white border-pink-700 hover:!bg-pink-800 dark:border-pink-500 dark:text-pink-500 dark:hover:text-white dark:hover:!bg-pink-600"
+            class: "text-pink-700 hover:text-white border-pink-700 hover:bg-pink-800! dark:border-pink-500 dark:text-pink-500 dark:hover:text-white dark:hover:bg-pink-600!"
         },
         {
             outline: true,
             color: "rose",
-            class: "text-rose-700 hover:text-white border-rose-700 hover:!bg-rose-800 dark:border-rose-500 dark:text-rose-500 dark:hover:text-white dark:hover:!bg-rose-600"
+            class: "text-rose-700 hover:text-white border-rose-700 hover:bg-rose-800! dark:border-rose-500 dark:text-rose-500 dark:hover:text-white dark:hover:bg-rose-600!"
         },
         {
             color: "alternative",
@@ -319,17 +319,17 @@ export const button = tv({
         {
             outline: true,
             group: true,
-            class: "[&:not(:first-child)]:-ms-px"
+            class: "not-first:-ms-px"
         },
         {
             color: "alternative",
             group: true,
-            class: "[&:not(:first-child)]:-ms-px"
+            class: "not-first:-ms-px"
         },
         {
             color: "light",
             group: true,
-            class: "[&:not(:first-child)]:-ms-px"
+            class: "not-first:-ms-px"
         },
         {
             group: true,
@@ -355,35 +355,35 @@ export const button = tv({
 });
 export const gradientButton = tv({
     slots: {
-        base: "inline-flex items-center justify-center transition-all duration-75 ease-in text-white bg-gradient-to-r ",
-        outlineWrapper: "inline-flex items-center justify-center w-full !border-0"
+        base: "inline-flex items-center justify-center transition-all duration-75 ease-in text-white bg-linear-to-r ",
+        outlineWrapper: "inline-flex items-center justify-center w-full border-0!"
     },
     variants: {
         color: {
             blue: {
-                base: "from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800"
+                base: "from-blue-500 via-blue-600 to-blue-700 hover:bg-linear-to-br focus:ring-blue-300 dark:focus:ring-blue-800"
             },
             green: {
-                base: "from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800"
+                base: "from-green-400 via-green-500 to-green-600 hover:bg-linear-to-br focus:ring-green-300 dark:focus:ring-green-800"
             },
-            cyan: { base: "text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800" },
-            teal: { base: "text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800" },
-            lime: { base: "text-dark-surface-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800" },
-            red: { base: "text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800" },
-            pink: { base: "text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800" },
-            purple: { base: "text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800" },
-            purpleToBlue: { base: "text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800" },
-            cyanToBlue: { base: "text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800" },
-            greenToBlue: { base: "text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800" },
-            purpleToPink: { base: "text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800" },
-            pinkToOrange: { base: "text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800" },
-            tealToLime: { base: "text-dark-surface-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700" },
-            redToYellow: { base: "text-dark-surface-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400" }
+            cyan: { base: "text-white bg-linear-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-linear-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800" },
+            teal: { base: "text-white bg-linear-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-linear-to-br focus:ring-teal-300 dark:focus:ring-teal-800" },
+            lime: { base: "text-dark-surface-900 bg-linear-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-linear-to-br focus:ring-lime-300 dark:focus:ring-lime-800" },
+            red: { base: "text-white bg-linear-to-r from-red-400 via-red-500 to-red-600 hover:bg-linear-to-br focus:ring-red-300 dark:focus:ring-red-800" },
+            pink: { base: "text-white bg-linear-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-linear-to-br focus:ring-pink-300 dark:focus:ring-pink-800" },
+            purple: { base: "text-white bg-linear-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-linear-to-br focus:ring-purple-300 dark:focus:ring-purple-800" },
+            purpleToBlue: { base: "text-white bg-linear-to-br from-purple-600 to-blue-500 hover:bg-linear-to-bl focus:ring-blue-300 dark:focus:ring-blue-800" },
+            cyanToBlue: { base: "text-white bg-linear-to-r from-cyan-500 to-blue-500 hover:bg-linear-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800" },
+            greenToBlue: { base: "text-white bg-linear-to-br from-green-400 to-blue-600 hover:bg-linear-to-bl focus:ring-green-200 dark:focus:ring-green-800" },
+            purpleToPink: { base: "text-white bg-linear-to-r from-purple-500 to-pink-500 hover:bg-linear-to-l focus:ring-purple-200 dark:focus:ring-purple-800" },
+            pinkToOrange: { base: "text-white bg-linear-to-br from-pink-500 to-orange-400 hover:bg-linear-to-bl focus:ring-pink-200 dark:focus:ring-pink-800" },
+            tealToLime: { base: "text-dark-surface-900 bg-linear-to-r from-teal-200 to-lime-200 hover:bg-linear-to-l focus:ring-lime-200 dark:focus:ring-teal-700" },
+            redToYellow: { base: "text-dark-surface-900 bg-linear-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-linear-to-bl focus:ring-red-100 dark:focus:ring-red-400" }
         },
         outline: {
             true: {
                 base: "p-0.5",
-                outlineWrapper: "bg-white !text-dark-surface-900 dark:bg-dark-surface-900 dark:!text-white hover:bg-transparent hover:!text-inherit group-hover:!bg-opacity-0 group-hover:!text-inherit"
+                outlineWrapper: "bg-white text-dark-surface-900! dark:bg-dark-surface-900 dark:text-white! hover:bg-transparent hover:text-inherit! group-hover:bg-transparent! group-hover:text-inherit!"
             }
         },
         pill: {

package/dist/buttons/type.d.ts

@@ -15,6 +15,7 @@ interface ButtonProps extends HTMLAttributesWithoutAbort {
     class?: string;
     disabled?: boolean;
     href?: string;
+    loading?: boolean;
 }
 type GradientButtonColorType = "red" | "lime" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
 interface GradientButtonProps extends HTMLAttributesWithoutAbort {

package/dist/cards/theme.js

@@ -11,7 +11,7 @@ export const card = tv({
             sm: { base: "max-w-sm" },
             md: { base: "max-w-lg" },
             lg: { base: "max-w-2xl" },
-            xl: { base: "max-w-screen-xl" }
+            xl: { base: "max-w-(--breakpoint-xl)" }
         },
         color: {
             // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
@@ -38,7 +38,7 @@ export const card = tv({
         },
         shadow: {
             sm: { base: "shadow-md" },
-            normal: { base: "shadow" },
+            normal: { base: "shadow-sm" },
             md: { base: "shadow-md" },
             lg: { base: "shadow-lg" },
             xl: { base: "shadow-xl" },

package/dist/darkmode/theme.d.ts

@@ -1 +1 @@
-export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5 focus:ring-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5 focus:ring-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5 focus:ring-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5 focus:ring-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/darkmode/theme.js

@@ -1,4 +1,4 @@
 import { tv } from "tailwind-variants";
 export const darkmode = tv({
-    base: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5 focus:ring-1"
+    base: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5 focus:ring-1"
 });