odj-svelte-ui 0.1.1 → 0.2.0

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/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,9 +37,9 @@ 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>>;
@@ -48,16 +48,16 @@ export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{}
 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 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,9 +85,9 @@ 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>>;

package/dist/dropdown/theme.js

@@ -1,7 +1,7 @@
 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-44 mt-2 divide-y divide-gray-300 dark:divide-gray-500 overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-700",
         backdrop: "fixed top-0 start-0 w-full h-full"
     }
 });

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/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const checkbox = tv({
     slots: {
-        base: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded",
+        base: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded-sm",
         label: ""
     },
     variants: {
@@ -76,7 +76,7 @@ export const checkbox = tv({
             true: { base: "sr-only peer" }
         },
         rounded: {
-            true: { base: "rounded" }
+            true: { base: "rounded-sm" }
         },
         inline: {
             true: {

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -1,16 +1,18 @@
 import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
 import { type DropzoneProps as Props } from ".";
+type HTMLInputElementWithFiles = HTMLInputElement & {
+    files: FileList | null;
+};
+type $$ComponentProps = Props & {
+    ondrop?: DragEventHandler<HTMLButtonElement>;
+    ondragover?: DragEventHandler<HTMLButtonElement>;
+    onchange?: ChangeEventHandler<HTMLInputElementWithFiles>;
+};
 /**
  * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
  * ## Props
  * @props:
  */
-declare const Dropzone: import("svelte").Component<Props & {
-    ondrop?: DragEventHandler<HTMLButtonElement>;
-    ondragover?: DragEventHandler<HTMLButtonElement>;
-    onchange?: ChangeEventHandler<HTMLInputElement & {
-        files: FileList | null;
-    }>;
-}, {}, "files">;
+declare const Dropzone: import("svelte").Component<$$ComponentProps, {}, "files">;
 type Dropzone = ReturnType<typeof Dropzone>;
 export default Dropzone;

package/dist/forms/fileupload/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const fileupload = tv({
     slots: {
-        base: "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border !p-0 dark:text-gray-400",
+        base: "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border p-0! dark:text-gray-400",
         wrapper: "relative w-full",
         right: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5"
     },

package/dist/forms/floating-label-input/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const floatingLabelInput = tv({
     slots: {
         base: "relative",
-        input: "block w-full text-sm text-gray-900 bg-transparent appearance-none dark:text-white focus:outline-none focus:ring-0 peer",
+        input: "block w-full text-sm text-gray-900 bg-transparent appearance-none dark:text-white focus:outline-hidden focus:ring-0 peer",
         label: "absolute text-sm duration-300 transform scale-75 z-10 origin-left rtl:origin-right peer-placeholder-shown:scale-100 peer-focus:scale-75"
     },
     variants: {
@@ -30,87 +30,87 @@ export const floatingLabelInput = tv({
         color: {
             default: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600",
-                label: "text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500"
+                label: "text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 dark:peer-focus:text-primary-500"
             },
             primary: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600",
-                label: "text-primary-500 dark:text-primary-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500"
+                label: "text-primary-500 dark:text-primary-400 peer-focus:text-primary-600 dark:peer-focus:text-primary-500"
             },
             secondary: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-secondary-500 focus:border-secondary-600",
-                label: "text-secondary-500 dark:text-secondary-400 peer-focus:text-secondary-600 peer-focus:dark:text-secondary-500"
+                label: "text-secondary-500 dark:text-secondary-400 peer-focus:text-secondary-600 dark:peer-focus:text-secondary-500"
             },
             gray: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-gray-500 focus:border-gray-600",
-                label: "text-gray-500 dark:text-gray-400 peer-focus:text-gray-600 peer-focus:dark:text-gray-500"
+                label: "text-gray-500 dark:text-gray-400 peer-focus:text-gray-600 dark:peer-focus:text-gray-500"
             },
             red: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-red-500 focus:border-red-600",
-                label: "text-red-500 dark:text-red-400 peer-focus:text-red-600 peer-focus:dark:text-red-500"
+                label: "text-red-500 dark:text-red-400 peer-focus:text-red-600 dark:peer-focus:text-red-500"
             },
             orange: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-orange-500 focus:border-orange-600",
-                label: "text-orange-500 dark:text-orange-400 peer-focus:text-orange-600 peer-focus:dark:text-orange-500"
+                label: "text-orange-500 dark:text-orange-400 peer-focus:text-orange-600 dark:peer-focus:text-orange-500"
             },
             amber: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-amber-500 focus:border-amber-600",
-                label: "text-amber-500 dark:text-amber-400 peer-focus:text-amber-600 peer-focus:dark:text-amber-500"
+                label: "text-amber-500 dark:text-amber-400 peer-focus:text-amber-600 dark:peer-focus:text-amber-500"
             },
             yellow: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-yellow-500 focus:border-yellow-600",
-                label: "text-yellow-500 dark:text-yellow-400 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500"
+                label: "text-yellow-500 dark:text-yellow-400 peer-focus:text-yellow-600 dark:peer-focus:text-yellow-500"
             },
             lime: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-lime-500 focus:border-lime-600",
-                label: "text-lime-500 dark:text-lime-400 peer-focus:text-lime-600 peer-focus:dark:text-lime-500"
+                label: "text-lime-500 dark:text-lime-400 peer-focus:text-lime-600 dark:peer-focus:text-lime-500"
             },
             green: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-green-500 focus:border-green-600",
-                label: "text-green-500 dark:text-green-400 peer-focus:text-green-600 peer-focus:dark:text-green-500"
+                label: "text-green-500 dark:text-green-400 peer-focus:text-green-600 dark:peer-focus:text-green-500"
             },
             emerald: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-emerald-500 focus:border-emerald-600",
-                label: "text-emerald-500 dark:text-emerald-400 peer-focus:text-emerald-600 peer-focus:dark:text-emerald-500"
+                label: "text-emerald-500 dark:text-emerald-400 peer-focus:text-emerald-600 dark:peer-focus:text-emerald-500"
             },
             teal: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-teal-500 focus:border-teal-600",
-                label: "text-teal-500 dark:text-teal-400 peer-focus:text-teal-600 peer-focus:dark:text-teal-500"
+                label: "text-teal-500 dark:text-teal-400 peer-focus:text-teal-600 dark:peer-focus:text-teal-500"
             },
             cyan: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-cyan-500 focus:border-cyan-600",
-                label: "text-cyan-500 dark:text-cyan-400 peer-focus:text-cyan-600 peer-focus:dark:text-cyan-500"
+                label: "text-cyan-500 dark:text-cyan-400 peer-focus:text-cyan-600 dark:peer-focus:text-cyan-500"
             },
             sky: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-sky-500 focus:border-sky-600",
-                label: "text-sky-500 dark:text-sky-400 peer-focus:text-sky-600 peer-focus:dark:text-sky-500"
+                label: "text-sky-500 dark:text-sky-400 peer-focus:text-sky-600 dark:peer-focus:text-sky-500"
             },
             blue: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600",
-                label: "text-blue-500 dark:text-blue-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500"
+                label: "text-blue-500 dark:text-blue-400 peer-focus:text-blue-600 dark:peer-focus:text-blue-500"
             },
             indigo: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-indigo-500 focus:border-indigo-600",
-                label: "text-indigo-500 dark:text-indigo-400 peer-focus:text-indigo-600 peer-focus:dark:text-indigo-500"
+                label: "text-indigo-500 dark:text-indigo-400 peer-focus:text-indigo-600 dark:peer-focus:text-indigo-500"
             },
             violet: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-violet-500 focus:border-violet-600",
-                label: "text-violet-600 dark:text-violet-500 peer-focus:text-violet-600 peer-focus:dark:text-violet-500"
+                label: "text-violet-600 dark:text-violet-500 peer-focus:text-violet-600 dark:peer-focus:text-violet-500"
             },
             purple: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-purple-500 focus:border-purple-600",
-                label: "text-purple-600 dark:text-purple-500 peer-focus:text-purple-600 peer-focus:dark:text-purple-500"
+                label: "text-purple-600 dark:text-purple-500 peer-focus:text-purple-600 dark:peer-focus:text-purple-500"
             },
             fuchsia: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-fuchsia-500 focus:border-fuchsia-600",
-                label: "text-fuchsia-600 dark:text-fuchsia-500 peer-focus:text-fuchsia-600 peer-focus:dark:text-fuchsia-500"
+                label: "text-fuchsia-600 dark:text-fuchsia-500 peer-focus:text-fuchsia-600 dark:peer-focus:text-fuchsia-500"
             },
             pink: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-pink-500 focus:border-pink-600",
-                label: "text-pink-600 dark:text-pink-500 peer-focus:text-pink-600 peer-focus:dark:text-pink-500"
+                label: "text-pink-600 dark:text-pink-500 peer-focus:text-pink-600 dark:peer-focus:text-pink-500"
             },
             rose: {
                 input: "border-gray-300 dark:border-gray-600 dark:focus:border-rose-500 focus:border-rose-600",
-                label: "text-rose-600 dark:text-rose-500 peer-focus:text-rose-600 peer-focus:dark:text-rose-500"
+                label: "text-rose-600 dark:text-rose-500 peer-focus:text-rose-600 dark:peer-focus:text-rose-500"
             }
         }
     },