odj-svelte-ui 0.1.1 → 0.2.1

package/dist/drawer/theme.d.ts

@@ -283,18 +283,18 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            svg?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            button?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            svg?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            button?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -303,18 +303,18 @@ export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     svg: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            svg?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            button?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            svg?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            button?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -327,10 +327,10 @@ export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     svg: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            svg?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            button?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/drawer/theme.js

@@ -21,7 +21,7 @@ export const drawer = tv({
             half: { base: "w-1/2" }
         },
         backdrop: {
-            true: { backdrop: "bg-gray-900 bg-opacity-75" }
+            true: { backdrop: "bg-gray-900/75" }
         }
     },
     defaultVariants: {

package/dist/dropdown/Dropdown.svelte

@@ -5,7 +5,7 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
-  let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params, transition = fly, activeUrl = "", ...restProps }: Props = $props();
+  let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params = { y: -5 }, transition = fly, activeUrl = "", lock = true, ...restProps }: Props = $props();
 
   const { base, backdrop } = $derived(dropdown());
   const activeUrlStore = writable("");
@@ -14,6 +14,17 @@
   $effect(() => {
     activeUrlStore.set(activeUrl ?? "");
   });
+
+  $effect(() => {
+    if (dropdownStatus && lock) {
+      const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollWidth}px`;
+    } else if (lock) {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+  });
 </script>
 
 <!-- Dropdown menu -->

package/dist/dropdown/DropdownLi.svelte

@@ -2,12 +2,11 @@
   import { getContext } from "svelte";
   import { type DropdownLiProps as Props, dropdownli } from "./";
 
-  let { aClass, children, href, activeClass, liClass, ...restProps }: Props = $props();
+  let { aClass, children, href, activeClass, liClass, custom = false, ...restProps }: Props = $props();
 
   const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
   let sidebarUrl = $state("");
   activeUrlStore.subscribe((value) => {
-    // console.log('value: ', value)
     sidebarUrl = value;
   });
   let active = $state(false);
@@ -23,8 +22,14 @@
     <a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
       {@render children()}
     </a>
+  {:else if custom}
+    <button {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
+      {@render children()}
+    </button>
   {:else}
-    {@render children()}
+    <a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
+      {@render children()}
+    </a>
   {/if}
 </li>
 
@@ -37,4 +42,5 @@
 @props:href: any;
 @props:activeClass: any;
 @props:liClass: any;
+@props:custom: boolean;
 -->

package/dist/dropdown/DropdownLi.svelte.d.ts

@@ -7,6 +7,7 @@ import { type DropdownLiProps as Props } from "./";
  * @props:href: any;
  * @props:activeClass: any;
  * @props:liClass: any;
+ * @props:custom: boolean;
  */
 declare const DropdownLi: import("svelte").Component<Props, {}, "">;
 type DropdownLi = ReturnType<typeof DropdownLi>;

package/dist/dropdown/theme.d.ts

@@ -1,15 +1,15 @@
 export declare const dropdown: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            backdrop?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            backdrop?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -17,16 +17,16 @@ export declare const dropdown: import("tailwind-variants").TVReturnType<{
     backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            backdrop?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            backdrop?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -37,27 +37,27 @@ export declare const dropdown: import("tailwind-variants").TVReturnType<{
     backdrop: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            backdrop?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
-export declare const dropdowndivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare const dropdownFooter: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdowndivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownFooter: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "overflow-hidden rounded-b-xl", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "overflow-hidden rounded-b-xl", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export declare const dropdownli: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            anchor?: import("tailwind-merge").ClassNameValue;
-            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            activeAnchor?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            anchor?: import("tailwind-merge").ClassNameValue;
-            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            activeAnchor?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -65,16 +65,16 @@ export declare const dropdownli: import("tailwind-variants").TVReturnType<{
     activeAnchor: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            anchor?: import("tailwind-merge").ClassNameValue;
-            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            activeAnchor?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            anchor?: import("tailwind-merge").ClassNameValue;
-            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            activeAnchor?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -85,10 +85,10 @@ export declare const dropdownli: import("tailwind-variants").TVReturnType<{
     activeAnchor: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            anchor?: import("tailwind-merge").ClassNameValue;
-            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            activeAnchor?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
-export declare const dropdownul: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownul: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "p-1 flex flex-col", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "p-1 flex flex-col", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/dropdown/theme.js

@@ -1,25 +1,25 @@
 import { tv } from "tailwind-variants";
 export const dropdown = tv({
     slots: {
-        base: "z-10 w-44 mt-2 divide-y divide-gray-300 dark:divide-gray-500 overflow-hidden rounded-lg bg-white shadow dark:bg-gray-700",
+        base: "z-10 w-max mt-2 rounded-xl shadow-lg bg-white dark:bg-dark-surface-700 text-light-surface-700 dark:text-dark-surface-200 border border-light-surface-200 dark:border-dark-surface-600 divide-y divide-light-surface-100 dark:divide-dark-surface-600 overflow-hidden",
         backdrop: "fixed top-0 start-0 w-full h-full"
     }
 });
 export const dropdowndivider = tv({
-    base: "my-1 h-px bg-gray-100 dark:bg-gray-500"
+    base: "my-1 h-px bg-light-surface-200 dark:bg-dark-surface-600"
 });
 export const dropdownHeader = tv({
-    base: "px-4 py-3 text-sm text-gray-900 dark:text-white"
+    base: "px-4 py-3 rounded-t-xl text-sm text-light-surface-900 dark:text-white"
 });
 export const dropdownFooter = tv({
-    base: "overflow-hidden rounded-b-lg py-1"
+    base: "overflow-hidden rounded-b-xl"
 });
 export const dropdownli = tv({
     slots: {
-        anchor: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
-        activeAnchor: "block px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+        anchor: "cursor-pointer flex flex-row gap-3 items-center py-2 px-3 rounded-lg text-sm hover:bg-light-surface-200/70 dark:hover:bg-dark-surface-600 hover:text-light-surface-900 dark:hover:text-white",
+        activeAnchor: "cursor-pointer flex flex-row gap-3 items-center py-2 px-3 rounded-lg text-sm bg-primary-700 dark:bg-primary-600 text-white dark:text-white hover:bg-primary-800 dark:hover:bg-primary-700"
     }
 });
 export const dropdownul = tv({
-    base: "py-2 text-sm text-gray-700 dark:text-gray-200"
+    base: "p-1 flex flex-col"
 });

package/dist/dropdown/type.d.ts

@@ -13,6 +13,7 @@ interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     params?: ParamsType;
     transition?: TransitionFunc;
     activeUrl?: string;
+    lock?: boolean;
 }
 interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
     class?: string;
@@ -29,6 +30,7 @@ interface DropdownLiProps extends HTMLAnchorAttributes {
     href?: string;
     activeClass?: string;
     liClass?: string;
+    custom?: boolean;
 }
 interface DropdownUlProps extends HTMLAttributes<HTMLUListElement> {
     children: Snippet;

package/dist/footer/theme.d.ts

@@ -57,18 +57,18 @@ declare const footer: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -77,18 +77,18 @@ declare const footerBrand: import("tailwind-variants").TVReturnType<{
     img: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -101,27 +101,27 @@ declare const footerBrand: import("tailwind-variants").TVReturnType<{
     img: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
 declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
-            bySpan?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            bySpan?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
-            bySpan?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            bySpan?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -130,18 +130,18 @@ declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     bySpan: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
-            bySpan?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            bySpan?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
-            bySpan?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            bySpan?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -154,10 +154,10 @@ declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     bySpan: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
-            bySpan?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            bySpan?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
@@ -165,16 +165,16 @@ declare const footerIcon: import("tailwind-variants").TVReturnType<{} | {} | {},
 declare const footerUl: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-600 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-600 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 declare const footerLi: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -182,16 +182,16 @@ declare const footerLi: import("tailwind-variants").TVReturnType<{
     link: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -202,9 +202,9 @@ declare const footerLi: import("tailwind-variants").TVReturnType<{
     link: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            link?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/footer/theme.js

@@ -3,11 +3,11 @@ const footer = tv({
     base: "bg-white dark:bg-gray-800",
     variants: {
         footerType: {
-            default: "p-4 rounded-lg shadow md:flex md:items-center md:justify-between md:p-6",
+            default: "p-4 rounded-lg shadow-sm md:flex md:items-center md:justify-between md:p-6",
             sitemap: "bg-gray-800",
             socialmedia: "p-4 sm:p-6",
-            logo: "p-4 rounded-lg shadow md:px-6 md:py-8",
-            sticky: "fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600"
+            logo: "p-4 rounded-lg shadow-sm md:px-6 md:py-8",
+            sticky: "fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow-sm md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600"
         }
     }
 });

package/dist/forms/checkbox/Checkbox.svelte

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