odj-svelte-ui 0.1.1 → 0.2.1

package/dist/forms/checkbox/theme.js

@@ -1,82 +1,84 @@
 import { tv } from "tailwind-variants";
+// peer inline-flex size-[25px] items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40
+// w-4 h-4 bg-light-surface-100 border-light-surface-300 dark:ring-offset-dark-surface-800 focus-visible:ring-2 me-2 rounded-sm
 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",
-        label: ""
+        base: "mr-2 my-auto appearance-none size-4 shrink-0 cursor-default rounded-sm transition-colors duration-150 bg-light-surface-100 dark:bg-dark-surface-700 border border-light-surface-300 dark:border-dark-surface-600 hover:border-light-surface-400 focus-visible:ring-2 focus-visible:ring-white outline-hidden disabled:opacity-50",
+        label: "flex items-center disabled:opacity-50 transition-all duration-150"
     },
     variants: {
         color: {
             // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
             primary: {
-                base: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+                base: "text-primary-600"
             },
             secondary: {
-                base: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+                base: "text-secondary-600"
             },
             gray: {
-                base: "text-gray-600 focus:ring-gray-600 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                base: "text-gray-600"
             },
             red: {
-                base: "text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600"
+                base: "text-red-600"
             },
             orange: {
-                base: "text-orange-600 focus:ring-orange-600 dark:ring-offset-orange-600 dark:focus:ring-orange-600"
+                base: "text-orange-600"
             },
             amber: {
-                base: "text-amber-600 focus:ring-amber-600 dark:ring-offset-amber-600 dark:focus:ring-amber-600"
+                base: "text-amber-600"
             },
             yellow: {
-                base: "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400"
+                base: "text-yellow-400"
             },
             lime: {
-                base: "text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700"
+                base: "text-lime-700"
             },
             green: {
-                base: "text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600"
+                base: "text-green-600"
             },
             emerald: {
-                base: "text-emerald-600 focus:ring-emerald-600 dark:ring-offset-emerald-600 dark:focus:ring-emerald-600"
+                base: "text-emerald-600"
             },
             teal: {
-                base: "text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600"
+                base: "text-teal-600"
             },
             cyan: {
-                base: "text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600"
+                base: "text-cyan-600"
             },
             sky: {
-                base: "text-sky-600 focus:ring-sky-600 dark:ring-offset-sky-600 dark:focus:ring-sky-600"
+                base: "text-sky-600"
             },
             blue: {
-                base: "text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700"
+                base: "text-blue-700"
             },
             indigo: {
-                base: "text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700"
+                base: "text-indigo-700"
             },
             violet: {
-                base: "text-violet-600 focus:ring-violet-600 dark:ring-offset-violet-600 dark:focus:ring-violet-600"
+                base: "text-violet-600"
             },
             purple: {
-                base: "text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600"
+                base: "text-purple-600"
             },
             fuchsia: {
-                base: "text-fuchsia-600 focus:ring-fuchsia-600 dark:ring-offset-fuchsia-600 dark:focus:ring-fuchsia-600"
+                base: "text-fuchsia-600"
             },
             pink: {
-                base: "text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600"
+                base: "text-pink-600"
             },
             rose: {
-                base: "text-rose-600 focus:ring-rose-600 dark:ring-offset-rose-600 dark:focus:ring-rose-600"
+                base: "text-rose-600"
             }
         },
         tinted: {
-            true: { base: "dark:bg-gray-600 dark:border-gray-500" },
-            false: { base: "dark:bg-gray-700 dark:border-gray-600" }
+            true: { base: "dark:bg-light-surface-600 dark:border-dark-surface-500" },
+            false: { base: "dark:bg-light-surface-700 dark:border-dark-surface-600" }
         },
         custom: {
             true: { base: "sr-only peer" }
         },
         rounded: {
-            true: { base: "rounded" }
+            true: { base: "rounded-sm" }
         },
         inline: {
             true: {

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

@@ -18,6 +18,7 @@ interface CheckboxProps extends HTMLInputAttributes {
     choices?: CheckboxItem[];
     classLabel?: string;
     indeterminate?: boolean;
+    disabled?: boolean;
     class?: string;
 }
 export { type CheckboxProps, type CheckboxItem, type ColorType };

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"
             }
         }
     },

package/dist/forms/input/theme.js

@@ -15,98 +15,98 @@ export const input = tv({
         },
         color: {
             default: {
-                input: "border border-light-surface-300 dark:border-dark-surface-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 outline-none focus:ring-1",
+                input: "border border-light-surface-300 dark:border-dark-surface-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 outline-hidden focus:ring-1",
                 searchInputXButton: "text-primary-600 dark:text-primary-500"
             },
             tinted: {
-                input: "border border-neutral-300 dark:border-neutral-500 bg-light-surface-50 text-neutral-900 dark:bg-dark-surface-600 dark:text-white dark:placeholder-dark-surface-400 outline-none focus:ring-1",
+                input: "border border-neutral-300 dark:border-neutral-500 bg-light-surface-50 text-neutral-900 dark:bg-dark-surface-600 dark:text-white dark:placeholder-dark-surface-400 outline-hidden focus:ring-1",
                 searchInputXButton: "text-light-surface-600 dark:text-dark-surface-500"
             },
             primary: {
-                input: "border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-primary-600 dark:text-primary-500"
             },
             secondary: {
-                input: "border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-secondary-600 dark:text-secondary-500"
             },
             green: {
-                input: "border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-green-600 dark:text-green-500"
             },
             emerald: {
-                input: "border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-emerald-600 dark:text-emerald-500"
             },
             red: {
-                input: "border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-red-600 dark:text-red-500"
             },
             blue: {
-                input: "border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-blue-600 dark:text-blue-500"
             },
             yellow: {
-                input: "border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-yellow-600 dark:text-yellow-500"
             },
             orange: {
-                input: "border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-orange-600 dark:text-orange-500"
             },
             gray: {
-                input: "border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-light-surface-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-dark-surface-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-light-surface-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-dark-surface-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-gray-600 dark:text-gray-500"
             },
             teal: {
-                input: "border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-teal-600 dark:text-teal-500"
             },
             cyan: {
-                input: "border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-cyan-600 dark:text-cyan-500"
             },
             sky: {
-                input: "border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-sky-600 dark:text-sky-500"
             },
             indigo: {
-                input: "border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-indigo-600 dark:text-indigo-500"
             },
             lime: {
-                input: "border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-lime-600 dark:text-lime-500"
             },
             amber: {
-                input: "border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-amber-600 dark:text-amber-500"
             },
             violet: {
-                input: "border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-violet-600 dark:text-violet-500"
             },
             purple: {
-                input: "border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-purple-600 dark:text-purple-500"
             },
             fuchsia: {
-                input: "border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-fuchsia-600 dark:text-fuchsia-500"
             },
             pink: {
-                input: "border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-pink-600 dark:text-pink-500"
             },
             rose: {
-                input: "border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-dark-surface-700 outline-none focus:ring-1",
+                input: "border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-dark-surface-700 outline-hidden focus:ring-1",
                 searchInputXButton: "text-rose-600 dark:text-rose-500"
             }
         },
         group: {
             false: { input: "rounded-lg" },
             true: {
-                input: "first:rounded-s-lg last:rounded-e-lg [&:not(:first-child)]:-ms-px"
+                input: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px"
             }
         }
     },

package/dist/forms/input-addon/InputAddon.svelte

@@ -30,7 +30,7 @@
   // size: explicit, inherited, default
   let _size = size || clampSize(group?.size) || "md";
 
-  let divClass: string = twMerge(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "[&:not(:first-child)]:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className);
+  let divClass: string = twMerge(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className);
 </script>
 
 <div {...restProps} class={divClass}>

package/dist/forms/label/Label.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { type LabelProps as Props, label } from ".";
 
-  let { children, color = "gray", show = true, class: className, ...restProps }: Props = $props();
+  let { children, color = "default", show = true, disabled = false, class: className, ...restProps }: Props = $props();
 
-  const base = $derived(label({ color, className }));
+  const base = $derived(label({ color, disabled, className }));
 </script>
 
 {#if show}

package/dist/forms/label/theme.d.ts

@@ -1,6 +1,6 @@
 export declare const label: import("tailwind-variants").TVReturnType<{
     color: {
-        disabled: string;
+        default: string;
         primary: string;
         secondary: string;
         green: string;
@@ -22,9 +22,12 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    disabled: {
+        true: string;
+    };
 }, undefined, "text-sm rtl:text-right font-medium block space-y-1", import("tailwind-variants/dist/config").TVConfig<{
     color: {
-        disabled: string;
+        default: string;
         primary: string;
         secondary: string;
         green: string;
@@ -46,9 +49,12 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    disabled: {
+        true: string;
+    };
 }, {
     color: {
-        disabled: string;
+        default: string;
         primary: string;
         secondary: string;
         green: string;
@@ -70,9 +76,12 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    disabled: {
+        true: string;
+    };
 }>, {
     color: {
-        disabled: string;
+        default: string;
         primary: string;
         secondary: string;
         green: string;
@@ -94,9 +103,12 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    disabled: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     color: {
-        disabled: string;
+        default: string;
         primary: string;
         secondary: string;
         green: string;
@@ -118,9 +130,12 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    disabled: {
+        true: string;
+    };
 }, undefined, "text-sm rtl:text-right font-medium block space-y-1", import("tailwind-variants/dist/config").TVConfig<{
     color: {
-        disabled: string;
+        default: string;
         primary: string;
         secondary: string;
         green: string;
@@ -142,9 +157,12 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    disabled: {
+        true: string;
+    };
 }, {
     color: {
-        disabled: string;
+        default: string;
         primary: string;
         secondary: string;
         green: string;
@@ -166,4 +184,7 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    disabled: {
+        true: string;
+    };
 }>, unknown, unknown, undefined>>;

package/dist/forms/label/theme.js

@@ -3,7 +3,7 @@ export const label = tv({
     base: "text-sm rtl:text-right font-medium block space-y-1",
     variants: {
         color: {
-            disabled: "text-light-surface-500 dark:text-dark-surface-500",
+            default: "text-light-surface-700 dark:text-dark-surface-200",
             primary: "text-primary-700 dark:text-primary-500",
             secondary: "text-secondary-700 dark:text-secondary-500",
             green: "text-green-700 dark:text-green-500",
@@ -24,6 +24,9 @@ export const label = tv({
             fuchsia: "text-fuchsia-700 dark:text-fuchsia-500",
             pink: "text-pink-700 dark:text-pink-500",
             rose: "text-rose-700 dark:text-rose-500"
+        },
+        disabled: {
+            true: "opacity-50"
         }
     }
 });

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

@@ -3,8 +3,9 @@ import type { HTMLLabelAttributes } from "svelte/elements";
 import { type ColorName } from "../../types";
 interface LabelProps extends HTMLLabelAttributes {
     children: Snippet;
-    color?: ColorName | "disabled";
+    color?: ColorName | "default";
     show?: boolean;
+    disabled?: boolean;
     class?: string;
     for?: string;
 }

package/dist/forms/radio/Radio.svelte

@@ -1,15 +1,14 @@
 <script lang="ts" generics="T">
-  import { getContext } from "svelte";
   import Label from "../label/Label.svelte";
   import { type RadioProps as Props, radio } from ".";
 
-  let { children, aria_describedby, labelClass, color = "primary", group = $bindable<T>(), value = $bindable<T>(), inputClass, custom = false, ...restProps }: Props<T> = $props();
+  let { children, aria_describedby, labelClass, color = "primary", group = $bindable<T>(), value = $bindable<T>(), inputClass, custom = false, disabled = false, ...restProps }: Props<T> = $props();
 
-  const { input, label } = $derived(radio({ color, custom, tinted: !!getContext("background") }));
+  const { input, label } = $derived(radio({ color, custom }));
 </script>
 
-<Label class={label({ class: labelClass })}>
-  <input type="radio" bind:group {value} aria-describedby={aria_describedby} {...restProps} class={input({ class: inputClass })} />
+<Label class={label({ class: labelClass })} {disabled}>
+  <input type="radio" bind:group {value} aria-describedby={aria_describedby} {disabled} aria-checked={group === value} class={input({ class: inputClass })} {...restProps} />
   {@render children()}
 </Label>