@zentauri-ui/zentauri-components 1.8.42 → 1.9.1

package/src/ui/inputs/variants.ts

@@ -4,8 +4,16 @@ import {
   zuiInputAppearances,
   zuiInputAs,
   zuiInputBase,
+  zuiInputCheckboxAppearances,
+  zuiInputCheckboxSizes,
+  zuiInputDateAppearances,
+  zuiInputFileAppearances,
+  zuiInputFileSizes,
+  zuiInputRadioAppearances,
+  zuiInputRadioSizes,
   zuiInputRing,
   zuiInputSizes,
+  zuiInputTextareaSizes,
 } from "../../design-system/inputs";
 
 export const inputVariants = cva(zuiInputBase, {
@@ -22,291 +30,685 @@ export const inputVariants = cva(zuiInputBase, {
     ring: true,
   },
   compoundVariants: [
-    // ── textarea size overrides ──────────────────────────────────────────
     {
       as: "textarea",
       size: "sm",
-      class: "min-h-[5rem]",
+      class: zuiInputTextareaSizes.sm,
     },
     {
       as: "textarea",
       size: "md",
-      class: "min-h-[6rem]",
+      class: zuiInputTextareaSizes.md,
     },
     {
       as: "textarea",
       size: "lg",
-      class: "min-h-[7.5rem]",
+      class: zuiInputTextareaSizes.lg,
     },
-    // ── file input: size – height & file-button padding ──────────────────
     {
       as: "file",
       size: "sm",
-      class: "h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs",
+      class: zuiInputFileSizes.sm,
     },
     {
       as: "file",
       size: "md",
-      class:
-        "h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm",
+      class: zuiInputFileSizes.md,
     },
     {
       as: "file",
       size: "lg",
-      class:
-        "h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base",
+      class: zuiInputFileSizes.lg,
     },
-    // ── file input: appearance – file-button accent colour ───────────────
     {
       as: "file",
       appearance: "default",
-      class: "file:text-slate-700 dark:file:text-slate-200",
+      class: zuiInputFileAppearances.default,
     },
     {
       as: "file",
       appearance: "warning",
-      class:
-        "file:bg-yellow-500/20 file:text-yellow-800 dark:file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30",
+      class: zuiInputFileAppearances.warning,
     },
     {
       as: "file",
       appearance: "error",
-      class:
-        "file:bg-rose-500/20 file:text-rose-800 dark:file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30",
+      class: zuiInputFileAppearances.error,
     },
     {
       as: "file",
       appearance: "success",
-      class:
-        "file:bg-emerald-500/20 file:text-emerald-800 dark:file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30",
+      class: zuiInputFileAppearances.success,
     },
     {
       as: "file",
       appearance: "info",
-      class:
-        "file:bg-blue-500/20 file:text-blue-800 dark:file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30",
+      class: zuiInputFileAppearances.info,
     },
     {
       as: "file",
       appearance: "violet",
-      class:
-        "file:bg-violet-500/20 file:text-violet-800 dark:file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30",
+      class: zuiInputFileAppearances.violet,
     },
     {
       as: "file",
       appearance: "amber",
-      class:
-        "file:bg-amber-500/20 file:text-amber-800 dark:file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30",
+      class: zuiInputFileAppearances.amber,
     },
     {
       as: "file",
       appearance: "pink",
-      class:
-        "file:bg-pink-500/20 file:text-pink-800 dark:file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30",
+      class: zuiInputFileAppearances.pink,
     },
     {
       as: "file",
       appearance: "indigo",
-      class:
-        "file:bg-indigo-500/20 file:text-indigo-800 dark:file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30",
+      class: zuiInputFileAppearances.indigo,
     },
-    // ── checkbox / radio: size (overrides text-field height & padding) ───
     {
       as: "checkbox",
       size: "sm",
-      class: "h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!",
+      class: zuiInputCheckboxSizes.sm,
     },
     {
       as: "checkbox",
       size: "md",
-      class: "h-5! w-5! min-h-0! rounded-md! px-0! py-0!",
+      class: zuiInputCheckboxSizes.md,
     },
     {
       as: "checkbox",
       size: "lg",
-      class: "h-6! w-6! min-h-0! rounded-md! px-0! py-0!",
+      class: zuiInputCheckboxSizes.lg,
     },
     {
       as: "radio",
       size: "sm",
-      class: "h-4! w-4! min-h-0! px-0! py-0!",
+      class: zuiInputRadioSizes.sm,
     },
     {
       as: "radio",
       size: "md",
-      class: "h-5! w-5! min-h-0! px-0! py-0!",
+      class: zuiInputRadioSizes.md,
     },
     {
       as: "radio",
       size: "lg",
-      class: "h-6! w-6! min-h-0! px-0! py-0!",
+      class: zuiInputRadioSizes.lg,
     },
-    // ── checkbox: appearance (border + tick color; fill stays transparent) ─
     {
       as: "checkbox",
       appearance: "default",
-      class:
-        "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:text-slate-700 dark:checked:text-slate-200 hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70",
+      class: zuiInputCheckboxAppearances.default,
     },
     {
       as: "checkbox",
       appearance: "warning",
-      class:
-        "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:text-yellow-700 dark:checked:text-yellow-300 hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+      class: zuiInputCheckboxAppearances.warning,
     },
     {
       as: "checkbox",
       appearance: "error",
-      class:
-        "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:text-rose-700 dark:checked:text-rose-300 hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+      class: zuiInputCheckboxAppearances.error,
     },
     {
       as: "checkbox",
       appearance: "success",
-      class:
-        "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:text-emerald-700 dark:checked:text-emerald-300 hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+      class: zuiInputCheckboxAppearances.success,
     },
     {
       as: "checkbox",
       appearance: "info",
-      class:
-        "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:text-blue-700 dark:checked:text-blue-300 hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+      class: zuiInputCheckboxAppearances.info,
     },
     {
       as: "checkbox",
       appearance: "violet",
-      class:
-        "border-violet-500/70! checked:after:bg-violet-600 dark:checked:after:bg-violet-400 checked:border-violet-600 dark:checked:border-violet-400 checked:text-violet-700 dark:checked:text-violet-300 hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+      class: zuiInputCheckboxAppearances.violet,
     },
     {
       as: "checkbox",
       appearance: "amber",
-      class:
-        "border-amber-500/70! checked:border-amber-400! checked:text-amber-700 dark:checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!",
+      class: zuiInputCheckboxAppearances.amber,
     },
     {
       as: "checkbox",
       appearance: "pink",
-      class:
-        "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:text-pink-700 dark:checked:text-pink-300 hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+      class: zuiInputCheckboxAppearances.pink,
     },
     {
       as: "checkbox",
       appearance: "indigo",
-      class:
-        "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-700 dark:checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!",
+      class: zuiInputCheckboxAppearances.indigo,
     },
-    // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─
     {
       as: "radio",
       appearance: "default",
-      class:
-        "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-slate-300/90!",
+      class: zuiInputRadioAppearances.default,
     },
     {
       as: "radio",
       appearance: "warning",
-      class:
-        "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-yellow-400/90!",
+      class: zuiInputRadioAppearances.warning,
     },
     {
       as: "radio",
       appearance: "error",
-      class:
-        "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-rose-400/90!",
+      class: zuiInputRadioAppearances.error,
     },
     {
       as: "radio",
       appearance: "success",
-      class:
-        "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-emerald-400/90!",
+      class: zuiInputRadioAppearances.success,
     },
     {
       as: "radio",
       appearance: "info",
-      class:
-        "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-blue-400/90!",
+      class: zuiInputRadioAppearances.info,
     },
     {
       as: "radio",
       appearance: "violet",
-      class:
-        "border-violet-500/70! checked:border-violet-600 dark:checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-violet-400/90!",
+      class: zuiInputRadioAppearances.violet,
     },
     {
       as: "radio",
       appearance: "amber",
-      class:
-        "border-amber-500/70! checked:border-amber-600 dark:checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-600 dark:hover:border-amber-400 focus-visible:border-amber-600 dark:focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-amber-400/90!",
+      class: zuiInputRadioAppearances.amber,
     },
     {
       as: "radio",
       appearance: "pink",
-      class:
-        "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-pink-400/90!",
+      class: zuiInputRadioAppearances.pink,
     },
     {
       as: "radio",
       appearance: "indigo",
-      class:
-        "border-indigo-500/70! checked:border-indigo-600 dark:checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-600 dark:hover:border-indigo-400 focus-visible:border-indigo-600 dark:focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-indigo-400/90!",
+      class: zuiInputRadioAppearances.indigo,
     },
     {
       as: "date",
       appearance: "default",
-      class:
-        "bg-white dark:bg-black border border-black/10 dark:border-white/80 text-black dark:text-white",
+      class: zuiInputDateAppearances.default,
     },
     {
       as: "date",
       appearance: "warning",
-      class:
-        "bg-yellow-900 dark:bg-transparent text-yellow-50 dark:text-yellow-50",
+      class: zuiInputDateAppearances.warning,
     },
     {
       as: "date",
       appearance: "error",
-      class: "bg-rose-900 dark:bg-transparent text-rose-50 dark:text-rose-50",
+      class: zuiInputDateAppearances.error,
     },
     {
       as: "date",
       appearance: "success",
-      class:
-        "bg-emerald-900 dark:bg-transparent text-emerald-50 dark:text-emerald-50",
+      class: zuiInputDateAppearances.success,
     },
     {
       as: "date",
       appearance: "info",
-      class: "bg-blue-900 dark:bg-transparent text-blue-50 dark:text-blue-50",
+      class: zuiInputDateAppearances.info,
     },
     {
       as: "date",
       appearance: "violet",
-      class:
-        "bg-violet-900 dark:bg-transparent text-violet-50 dark:text-violet-50",
+      class: zuiInputDateAppearances.violet,
     },
     {
       as: "date",
       appearance: "amber",
-      class:
-        "bg-amber-900 dark:bg-transparent text-amber-50 dark:text-amber-50",
+      class: zuiInputDateAppearances.amber,
     },
     {
       as: "date",
       appearance: "pink",
-      class: "bg-pink-900 dark:bg-transparent text-pink-50 dark:text-pink-50",
+      class: zuiInputDateAppearances.pink,
     },
     {
       as: "date",
       appearance: "indigo",
-      class:
-        "bg-indigo-900 dark:bg-transparent text-indigo-50 dark:text-indigo-50",
+      class: zuiInputDateAppearances.indigo,
     },
     {
       as: "date",
       appearance: "orange",
-      class:
-        "bg-orange-900 dark:bg-transparent text-orange-50 dark:text-orange-50",
+      class: zuiInputDateAppearances.orange,
+    },
+    {
+      as: "file",
+      appearance: "blue",
+      class: zuiInputFileAppearances.blue,
+    },
+    {
+      as: "file",
+      appearance: "cyan",
+      class: zuiInputFileAppearances.cyan,
+    },
+    {
+      as: "file",
+      appearance: "green",
+      class: zuiInputFileAppearances.green,
+    },
+    {
+      as: "file",
+      appearance: "lime",
+      class: zuiInputFileAppearances.lime,
+    },
+    {
+      as: "file",
+      appearance: "mint",
+      class: zuiInputFileAppearances.mint,
+    },
+    {
+      as: "file",
+      appearance: "ocean",
+      class: zuiInputFileAppearances.ocean,
+    },
+    {
+      as: "file",
+      appearance: "sapphire",
+      class: zuiInputFileAppearances.sapphire,
+    },
+    {
+      as: "file",
+      appearance: "lavender",
+      class: zuiInputFileAppearances.lavender,
+    },
+    {
+      as: "file",
+      appearance: "ruby",
+      class: zuiInputFileAppearances.ruby,
+    },
+    {
+      as: "file",
+      appearance: "red",
+      class: zuiInputFileAppearances.red,
+    },
+    {
+      as: "file",
+      appearance: "slate",
+      class: zuiInputFileAppearances.slate,
+    },
+    {
+      as: "file",
+      appearance: "zinc",
+      class: zuiInputFileAppearances.zinc,
+    },
+    {
+      as: "file",
+      appearance: "stone",
+      class: zuiInputFileAppearances.stone,
+    },
+    {
+      as: "file",
+      appearance: "royal",
+      class: zuiInputFileAppearances.royal,
+    },
+    {
+      as: "file",
+      appearance: "electric",
+      class: zuiInputFileAppearances.electric,
+    },
+    {
+      as: "file",
+      appearance: "forest",
+      class: zuiInputFileAppearances.forest,
+    },
+    {
+      as: "file",
+      appearance: "sunset",
+      class: zuiInputFileAppearances.sunset,
+    },
+    {
+      as: "file",
+      appearance: "magenta",
+      class: zuiInputFileAppearances.magenta,
+    },
+    {
+      as: "file",
+      appearance: "crimson",
+      class: zuiInputFileAppearances.crimson,
+    },
+    {
+      as: "file",
+      appearance: "aqua",
+      class: zuiInputFileAppearances.aqua,
+    },
+    {
+      as: "file",
+      appearance: "plum",
+      class: zuiInputFileAppearances.plum,
+    },
+    {
+      as: "file",
+      appearance: "orange",
+      class: zuiInputFileAppearances.orange,
+    },
+    {
+      as: "checkbox",
+      appearance: "blue",
+      class: zuiInputCheckboxAppearances.blue,
+    },
+    {
+      as: "checkbox",
+      appearance: "cyan",
+      class: zuiInputCheckboxAppearances.cyan,
+    },
+    {
+      as: "checkbox",
+      appearance: "green",
+      class: zuiInputCheckboxAppearances.green,
+    },
+    {
+      as: "checkbox",
+      appearance: "lime",
+      class: zuiInputCheckboxAppearances.lime,
+    },
+    {
+      as: "checkbox",
+      appearance: "mint",
+      class: zuiInputCheckboxAppearances.mint,
+    },
+    {
+      as: "checkbox",
+      appearance: "ocean",
+      class: zuiInputCheckboxAppearances.ocean,
+    },
+    {
+      as: "checkbox",
+      appearance: "sapphire",
+      class: zuiInputCheckboxAppearances.sapphire,
+    },
+    {
+      as: "checkbox",
+      appearance: "lavender",
+      class: zuiInputCheckboxAppearances.lavender,
+    },
+    {
+      as: "checkbox",
+      appearance: "ruby",
+      class: zuiInputCheckboxAppearances.ruby,
+    },
+    {
+      as: "checkbox",
+      appearance: "red",
+      class: zuiInputCheckboxAppearances.red,
+    },
+    {
+      as: "checkbox",
+      appearance: "slate",
+      class: zuiInputCheckboxAppearances.slate,
+    },
+    {
+      as: "checkbox",
+      appearance: "zinc",
+      class: zuiInputCheckboxAppearances.zinc,
+    },
+    {
+      as: "checkbox",
+      appearance: "stone",
+      class: zuiInputCheckboxAppearances.stone,
+    },
+    {
+      as: "checkbox",
+      appearance: "royal",
+      class: zuiInputCheckboxAppearances.royal,
+    },
+    {
+      as: "checkbox",
+      appearance: "electric",
+      class: zuiInputCheckboxAppearances.electric,
+    },
+    {
+      as: "checkbox",
+      appearance: "forest",
+      class: zuiInputCheckboxAppearances.forest,
+    },
+    {
+      as: "checkbox",
+      appearance: "sunset",
+      class: zuiInputCheckboxAppearances.sunset,
+    },
+    {
+      as: "checkbox",
+      appearance: "magenta",
+      class: zuiInputCheckboxAppearances.magenta,
+    },
+    {
+      as: "checkbox",
+      appearance: "crimson",
+      class: zuiInputCheckboxAppearances.crimson,
+    },
+    {
+      as: "checkbox",
+      appearance: "aqua",
+      class: zuiInputCheckboxAppearances.aqua,
+    },
+    {
+      as: "checkbox",
+      appearance: "plum",
+      class: zuiInputCheckboxAppearances.plum,
+    },
+    {
+      as: "checkbox",
+      appearance: "orange",
+      class: zuiInputCheckboxAppearances.orange,
+    },
+    {
+      as: "radio",
+      appearance: "blue",
+      class: zuiInputRadioAppearances.blue,
+    },
+    {
+      as: "radio",
+      appearance: "cyan",
+      class: zuiInputRadioAppearances.cyan,
+    },
+    {
+      as: "radio",
+      appearance: "green",
+      class: zuiInputRadioAppearances.green,
+    },
+    {
+      as: "radio",
+      appearance: "lime",
+      class: zuiInputRadioAppearances.lime,
+    },
+    {
+      as: "radio",
+      appearance: "mint",
+      class: zuiInputRadioAppearances.mint,
+    },
+    {
+      as: "radio",
+      appearance: "ocean",
+      class: zuiInputRadioAppearances.ocean,
+    },
+    {
+      as: "radio",
+      appearance: "sapphire",
+      class: zuiInputRadioAppearances.sapphire,
+    },
+    {
+      as: "radio",
+      appearance: "lavender",
+      class: zuiInputRadioAppearances.lavender,
+    },
+    {
+      as: "radio",
+      appearance: "ruby",
+      class: zuiInputRadioAppearances.ruby,
+    },
+    {
+      as: "radio",
+      appearance: "red",
+      class: zuiInputRadioAppearances.red,
+    },
+    {
+      as: "radio",
+      appearance: "slate",
+      class: zuiInputRadioAppearances.slate,
+    },
+    {
+      as: "radio",
+      appearance: "zinc",
+      class: zuiInputRadioAppearances.zinc,
+    },
+    {
+      as: "radio",
+      appearance: "stone",
+      class: zuiInputRadioAppearances.stone,
+    },
+    {
+      as: "radio",
+      appearance: "royal",
+      class: zuiInputRadioAppearances.royal,
+    },
+    {
+      as: "radio",
+      appearance: "electric",
+      class: zuiInputRadioAppearances.electric,
+    },
+    {
+      as: "radio",
+      appearance: "forest",
+      class: zuiInputRadioAppearances.forest,
+    },
+    {
+      as: "radio",
+      appearance: "sunset",
+      class: zuiInputRadioAppearances.sunset,
+    },
+    {
+      as: "radio",
+      appearance: "magenta",
+      class: zuiInputRadioAppearances.magenta,
+    },
+    {
+      as: "radio",
+      appearance: "crimson",
+      class: zuiInputRadioAppearances.crimson,
+    },
+    {
+      as: "radio",
+      appearance: "aqua",
+      class: zuiInputRadioAppearances.aqua,
+    },
+    {
+      as: "radio",
+      appearance: "plum",
+      class: zuiInputRadioAppearances.plum,
+    },
+    {
+      as: "radio",
+      appearance: "orange",
+      class: zuiInputRadioAppearances.orange,
+    },
+    {
+      as: "date",
+      appearance: "blue",
+      class: zuiInputDateAppearances.blue,
+    },
+    {
+      as: "date",
+      appearance: "cyan",
+      class: zuiInputDateAppearances.cyan,
+    },
+    {
+      as: "date",
+      appearance: "green",
+      class: zuiInputDateAppearances.green,
+    },
+    {
+      as: "date",
+      appearance: "lime",
+      class: zuiInputDateAppearances.lime,
+    },
+    {
+      as: "date",
+      appearance: "mint",
+      class: zuiInputDateAppearances.mint,
+    },
+    {
+      as: "date",
+      appearance: "ocean",
+      class: zuiInputDateAppearances.ocean,
+    },
+    {
+      as: "date",
+      appearance: "sapphire",
+      class: zuiInputDateAppearances.sapphire,
+    },
+    {
+      as: "date",
+      appearance: "lavender",
+      class: zuiInputDateAppearances.lavender,
+    },
+    {
+      as: "date",
+      appearance: "ruby",
+      class: zuiInputDateAppearances.ruby,
+    },
+    {
+      as: "date",
+      appearance: "red",
+      class: zuiInputDateAppearances.red,
+    },
+    {
+      as: "date",
+      appearance: "slate",
+      class: zuiInputDateAppearances.slate,
+    },
+    {
+      as: "date",
+      appearance: "zinc",
+      class: zuiInputDateAppearances.zinc,
+    },
+    {
+      as: "date",
+      appearance: "stone",
+      class: zuiInputDateAppearances.stone,
+    },
+    {
+      as: "date",
+      appearance: "royal",
+      class: zuiInputDateAppearances.royal,
+    },
+    {
+      as: "date",
+      appearance: "electric",
+      class: zuiInputDateAppearances.electric,
+    },
+    {
+      as: "date",
+      appearance: "forest",
+      class: zuiInputDateAppearances.forest,
+    },
+    {
+      as: "date",
+      appearance: "sunset",
+      class: zuiInputDateAppearances.sunset,
+    },
+    {
+      as: "date",
+      appearance: "magenta",
+      class: zuiInputDateAppearances.magenta,
+    },
+    {
+      as: "date",
+      appearance: "crimson",
+      class: zuiInputDateAppearances.crimson,
+    },
+    {
+      as: "date",
+      appearance: "aqua",
+      class: zuiInputDateAppearances.aqua,
+    },
+    {
+      as: "date",
+      appearance: "plum",
+      class: zuiInputDateAppearances.plum,
     },
   ],
 });