tw-react-components 0.0.187 → 0.0.190

package/README.md

@@ -1,7 +1,7 @@
 # TailwindCSS React Components
 
 ![NPM Version](https://img.shields.io/npm/v/tw-react-components)
-[![codecov](https://codecov.io/gh/bacali95/tw-react-components/graph/badge.svg?token=Z5ER12459R)](https://codecov.io/gh/bacali95/tw-react-components)
+[![codecov](https://codecov.io/gh/bacali95/tw-react-components/branch/main/graph/badge.svg?token=Z5ER12459R)](https://codecov.io/gh/bacali95/tw-react-components)
 ![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
 
 A comprehensive library of React components built with TailwindCSS for creating beautiful and responsive dashboards.

package/index.css

@@ -34,7 +34,7 @@
 
     --ring: 215 20.2% 65.1%;
 
-    --radius: 0.5rem;
+    --radius: 0.625rem;
 
     --sidebar-background: var(--color-slate-100);
     --sidebar-foreground: 240 5.3% 26.1%;
@@ -79,7 +79,7 @@
 
     --ring: 216 34% 17%;
 
-    --radius: 0.5rem;
+    --radius: 0.625rem;
 
     --sidebar-background: var(--color-slate-900);
     --sidebar-foreground: 240 4.8% 95.9%;

package/index.esm.js

@@ -166,471 +166,410 @@ const Accordion = Object.assign($Accordion, {
     Content: AccordionContent,
 });
 
-const Block = (_a) => {
-    var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
-    return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
-};
-
-const directionClasses = {
-    row: {
-        normal: 'flex-row',
-        reverse: 'flex-row-reverse',
-    },
-    column: {
-        normal: 'flex-col',
-        reverse: 'flex-col-reverse',
-    },
-};
-const alignClasses = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-};
-const justifyClasses = {
-    start: 'justify-start',
-    center: 'justify-center',
-    between: 'justify-between',
-    end: 'justify-end',
-};
-const Flex = (_a) => {
-    var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start', dataTestId = 'flex' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify", "dataTestId"]);
-    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className), dataTestId: dataTestId }, blockProps, { children: children })));
-};
-
-const Spinner = ({ className, fullScreen, dataTestId = 'spinner' }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
+const Spinner = ({ className, spinnerClassName, fullScreen, dataTestId = 'spinner', }) => (jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
         'h-screen': fullScreen,
         'h-full': !fullScreen,
-    }, className), "data-testid": dataTestId, children: jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+    }, className), "data-testid": dataTestId, children: jsxs("svg", { className: cn('h-8 w-8 animate-spin text-black dark:text-white', spinnerClassName), fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
 
 const variantClassNames = {
     filled: {
-        slate: {
-            base: 'bg-slate-100 dark:bg-slate-900/70',
-            hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
-            focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
-            active: 'active:bg-slate-300 dark:active:bg-slate-800/50',
-        },
-        gray: {
-            base: 'text-white bg-gray-500 dark:bg-gray-600',
-            hover: 'hover:bg-gray-400 dark:hover:bg-gray-500',
-            focus: 'focus:bg-gray-400 dark:focus:bg-gray-500',
-            active: 'active:bg-gray-600 dark:active:bg-gray-700',
-        },
-        zinc: {
-            base: 'text-white bg-zinc-500 dark:bg-zinc-600',
-            hover: 'hover:bg-zinc-400 dark:hover:bg-zinc-500',
-            focus: 'focus:bg-zinc-400 dark:focus:bg-zinc-500',
-            active: 'active:bg-zinc-600 dark:active:bg-zinc-700',
-        },
-        neutral: {
-            base: 'text-white bg-neutral-500 dark:bg-neutral-600',
-            hover: 'hover:bg-neutral-400 dark:hover:bg-neutral-500',
-            focus: 'focus:bg-neutral-400 dark:focus:bg-neutral-500',
-            active: 'active:bg-neutral-600 dark:active:bg-neutral-700',
-        },
-        stone: {
-            base: 'text-white bg-stone-500 dark:bg-stone-600',
-            hover: 'hover:bg-stone-400 dark:hover:bg-stone-500',
-            focus: 'focus:bg-stone-400 dark:focus:bg-stone-500',
-            active: 'active:bg-stone-600 dark:active:bg-stone-700',
-        },
-        red: {
-            base: 'text-white bg-red-500 dark:bg-red-600',
-            hover: 'hover:bg-red-400 dark:hover:bg-red-500',
-            focus: 'focus:bg-red-400 dark:focus:bg-red-500',
-            active: 'active:bg-red-600 dark:active:bg-red-700',
-        },
-        orange: {
-            base: 'text-white bg-orange-500 dark:bg-orange-600',
-            hover: 'hover:bg-orange-400 dark:hover:bg-orange-500',
-            focus: 'focus:bg-orange-400 dark:focus:bg-orange-500',
-            active: 'active:bg-orange-600 dark:active:bg-orange-700',
-        },
-        amber: {
-            base: 'text-white bg-amber-500 dark:bg-amber-600',
-            hover: 'hover:bg-amber-400 dark:hover:bg-amber-500',
-            focus: 'focus:bg-amber-400 dark:focus:bg-amber-500',
-            active: 'active:bg-amber-600 dark:active:bg-amber-700',
-        },
-        yellow: {
-            base: 'text-white bg-yellow-500 dark:bg-yellow-600',
-            hover: 'hover:bg-yellow-400 dark:hover:bg-yellow-500',
-            focus: 'focus:bg-yellow-400 dark:focus:bg-yellow-500',
-            active: 'active:bg-yellow-600 dark:active:bg-yellow-700',
-        },
-        lime: {
-            base: 'text-white bg-lime-500 dark:bg-lime-600',
-            hover: 'hover:bg-lime-400 dark:hover:bg-lime-500',
-            focus: 'focus:bg-lime-400 dark:focus:bg-lime-500',
-            active: 'active:bg-lime-600 dark:active:bg-lime-700',
-        },
-        green: {
-            base: 'text-white bg-green-500 dark:bg-green-600',
-            hover: 'hover:bg-green-400 dark:hover:bg-green-500',
-            focus: 'focus:bg-green-400 dark:focus:bg-green-500',
-            active: 'active:bg-green-600 dark:active:bg-green-700',
-        },
-        emerald: {
-            base: 'text-white bg-emerald-500 dark:bg-emerald-600',
-            hover: 'hover:bg-emerald-400 dark:hover:bg-emerald-500',
-            focus: 'focus:bg-emerald-400 dark:focus:bg-emerald-500',
-            active: 'active:bg-emerald-600 dark:active:bg-emerald-700',
-        },
-        teal: {
-            base: 'text-white bg-teal-500 dark:bg-teal-600',
-            hover: 'hover:bg-teal-400 dark:hover:bg-teal-500',
-            focus: 'focus:bg-teal-400 dark:focus:bg-teal-500',
-            active: 'active:bg-teal-600 dark:active:bg-teal-700',
-        },
-        cyan: {
-            base: 'text-white bg-cyan-500 dark:bg-cyan-600',
-            hover: 'hover:bg-cyan-400 dark:hover:bg-cyan-500',
-            focus: 'focus:bg-cyan-400 dark:focus:bg-cyan-500',
-            active: 'active:bg-cyan-600 dark:active:bg-cyan-700',
-        },
-        sky: {
-            base: 'text-white bg-sky-500 dark:bg-sky-600',
-            hover: 'hover:bg-sky-400 dark:hover:bg-sky-500',
-            focus: 'focus:bg-sky-400 dark:focus:bg-sky-500',
-            active: 'active:bg-sky-600 dark:active:bg-sky-700',
-        },
-        blue: {
-            base: 'text-white bg-blue-500 dark:bg-blue-600',
-            hover: 'hover:bg-blue-400 dark:hover:bg-blue-500',
-            focus: 'focus:bg-blue-400 dark:focus:bg-blue-500',
-            active: 'active:bg-blue-600 dark:active:bg-blue-700',
-        },
-        indigo: {
-            base: 'text-white bg-indigo-500 dark:bg-indigo-600',
-            hover: 'hover:bg-indigo-400 dark:hover:bg-indigo-500',
-            focus: 'focus:bg-indigo-400 dark:focus:bg-indigo-500',
-            active: 'active:bg-indigo-600 dark:active:bg-indigo-700',
-        },
-        violet: {
-            base: 'text-white bg-violet-500 dark:bg-violet-600',
-            hover: 'hover:bg-violet-400 dark:hover:bg-violet-500',
-            focus: 'focus:bg-violet-400 dark:focus:bg-violet-500',
-            active: 'active:bg-violet-600 dark:active:bg-violet-700',
-        },
-        fuchsia: {
-            base: 'text-white bg-fuchsia-500 dark:bg-fuchsia-600',
-            hover: 'hover:bg-fuchsia-400 dark:hover:bg-fuchsia-500',
-            focus: 'focus:bg-fuchsia-400 dark:focus:bg-fuchsia-500',
-            active: 'active:bg-fuchsia-600 dark:active:bg-fuchsia-700',
-        },
-        purple: {
-            base: 'text-white bg-purple-500 dark:bg-purple-600',
-            hover: 'hover:bg-purple-400 dark:hover:bg-purple-500',
-            focus: 'focus:bg-purple-400 dark:focus:bg-purple-500',
-            active: 'active:bg-purple-600 dark:active:bg-purple-700',
-        },
-        pink: {
-            base: 'text-white bg-pink-500 dark:bg-pink-600',
-            hover: 'hover:bg-pink-400 dark:hover:bg-pink-500',
-            focus: 'focus:bg-pink-400 dark:focus:bg-pink-500',
-            active: 'active:bg-pink-600 dark:active:bg-pink-700',
-        },
-        rose: {
-            base: 'text-white bg-rose-500 dark:bg-rose-600',
-            hover: 'hover:bg-rose-400 dark:hover:bg-rose-500',
-            focus: 'focus:bg-rose-400 dark:focus:bg-rose-500',
-            active: 'active:bg-rose-600 dark:active:bg-rose-700',
+        base: 'shadow-xs',
+        colors: {
+            primary: {
+                base: 'bg-primary text-primary-foreground',
+                hover: 'hover:bg-primary/90',
+                focus: 'focus:bg-primary/90',
+                active: 'active:bg-primary/90',
+            },
+            secondary: {
+                base: 'bg-secondary text-secondary-foreground',
+                hover: 'hover:bg-secondary/80',
+                focus: 'focus:bg-secondary/80',
+                active: 'active:bg-secondary/80',
+            },
+            slate: {
+                base: 'bg-slate-100 dark:bg-slate-900/70',
+                hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
+                focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
+                active: 'active:bg-slate-300 dark:active:bg-slate-800/50',
+            },
+            gray: {
+                base: 'text-white bg-gray-500 dark:bg-gray-600',
+                hover: 'hover:bg-gray-400 dark:hover:bg-gray-500',
+                focus: 'focus:bg-gray-400 dark:focus:bg-gray-500',
+                active: 'active:bg-gray-600 dark:active:bg-gray-700',
+            },
+            zinc: {
+                base: 'text-white bg-zinc-500 dark:bg-zinc-600',
+                hover: 'hover:bg-zinc-400 dark:hover:bg-zinc-500',
+                focus: 'focus:bg-zinc-400 dark:focus:bg-zinc-500',
+                active: 'active:bg-zinc-600 dark:active:bg-zinc-700',
+            },
+            neutral: {
+                base: 'text-white bg-neutral-500 dark:bg-neutral-600',
+                hover: 'hover:bg-neutral-400 dark:hover:bg-neutral-500',
+                focus: 'focus:bg-neutral-400 dark:focus:bg-neutral-500',
+                active: 'active:bg-neutral-600 dark:active:bg-neutral-700',
+            },
+            stone: {
+                base: 'text-white bg-stone-500 dark:bg-stone-600',
+                hover: 'hover:bg-stone-400 dark:hover:bg-stone-500',
+                focus: 'focus:bg-stone-400 dark:focus:bg-stone-500',
+                active: 'active:bg-stone-600 dark:active:bg-stone-700',
+            },
+            red: {
+                base: 'text-white bg-red-500 dark:bg-red-600',
+                hover: 'hover:bg-red-400 dark:hover:bg-red-500',
+                focus: 'focus:bg-red-400 dark:focus:bg-red-500',
+                active: 'active:bg-red-600 dark:active:bg-red-700',
+            },
+            orange: {
+                base: 'text-white bg-orange-500 dark:bg-orange-600',
+                hover: 'hover:bg-orange-400 dark:hover:bg-orange-500',
+                focus: 'focus:bg-orange-400 dark:focus:bg-orange-500',
+                active: 'active:bg-orange-600 dark:active:bg-orange-700',
+            },
+            amber: {
+                base: 'text-white bg-amber-500 dark:bg-amber-600',
+                hover: 'hover:bg-amber-400 dark:hover:bg-amber-500',
+                focus: 'focus:bg-amber-400 dark:focus:bg-amber-500',
+                active: 'active:bg-amber-600 dark:active:bg-amber-700',
+            },
+            yellow: {
+                base: 'text-white bg-yellow-500 dark:bg-yellow-600',
+                hover: 'hover:bg-yellow-400 dark:hover:bg-yellow-500',
+                focus: 'focus:bg-yellow-400 dark:focus:bg-yellow-500',
+                active: 'active:bg-yellow-600 dark:active:bg-yellow-700',
+            },
+            lime: {
+                base: 'text-white bg-lime-500 dark:bg-lime-600',
+                hover: 'hover:bg-lime-400 dark:hover:bg-lime-500',
+                focus: 'focus:bg-lime-400 dark:focus:bg-lime-500',
+                active: 'active:bg-lime-600 dark:active:bg-lime-700',
+            },
+            green: {
+                base: 'text-white bg-green-500 dark:bg-green-600',
+                hover: 'hover:bg-green-400 dark:hover:bg-green-500',
+                focus: 'focus:bg-green-400 dark:focus:bg-green-500',
+                active: 'active:bg-green-600 dark:active:bg-green-700',
+            },
+            emerald: {
+                base: 'text-white bg-emerald-500 dark:bg-emerald-600',
+                hover: 'hover:bg-emerald-400 dark:hover:bg-emerald-500',
+                focus: 'focus:bg-emerald-400 dark:focus:bg-emerald-500',
+                active: 'active:bg-emerald-600 dark:active:bg-emerald-700',
+            },
+            teal: {
+                base: 'text-white bg-teal-500 dark:bg-teal-600',
+                hover: 'hover:bg-teal-400 dark:hover:bg-teal-500',
+                focus: 'focus:bg-teal-400 dark:focus:bg-teal-500',
+                active: 'active:bg-teal-600 dark:active:bg-teal-700',
+            },
+            cyan: {
+                base: 'text-white bg-cyan-500 dark:bg-cyan-600',
+                hover: 'hover:bg-cyan-400 dark:hover:bg-cyan-500',
+                focus: 'focus:bg-cyan-400 dark:focus:bg-cyan-500',
+                active: 'active:bg-cyan-600 dark:active:bg-cyan-700',
+            },
+            sky: {
+                base: 'text-white bg-sky-500 dark:bg-sky-600',
+                hover: 'hover:bg-sky-400 dark:hover:bg-sky-500',
+                focus: 'focus:bg-sky-400 dark:focus:bg-sky-500',
+                active: 'active:bg-sky-600 dark:active:bg-sky-700',
+            },
+            blue: {
+                base: 'text-white bg-blue-500 dark:bg-blue-600',
+                hover: 'hover:bg-blue-400 dark:hover:bg-blue-500',
+                focus: 'focus:bg-blue-400 dark:focus:bg-blue-500',
+                active: 'active:bg-blue-600 dark:active:bg-blue-700',
+            },
+            indigo: {
+                base: 'text-white bg-indigo-500 dark:bg-indigo-600',
+                hover: 'hover:bg-indigo-400 dark:hover:bg-indigo-500',
+                focus: 'focus:bg-indigo-400 dark:focus:bg-indigo-500',
+                active: 'active:bg-indigo-600 dark:active:bg-indigo-700',
+            },
+            violet: {
+                base: 'text-white bg-violet-500 dark:bg-violet-600',
+                hover: 'hover:bg-violet-400 dark:hover:bg-violet-500',
+                focus: 'focus:bg-violet-400 dark:focus:bg-violet-500',
+                active: 'active:bg-violet-600 dark:active:bg-violet-700',
+            },
+            fuchsia: {
+                base: 'text-white bg-fuchsia-500 dark:bg-fuchsia-600',
+                hover: 'hover:bg-fuchsia-400 dark:hover:bg-fuchsia-500',
+                focus: 'focus:bg-fuchsia-400 dark:focus:bg-fuchsia-500',
+                active: 'active:bg-fuchsia-600 dark:active:bg-fuchsia-700',
+            },
+            purple: {
+                base: 'text-white bg-purple-500 dark:bg-purple-600',
+                hover: 'hover:bg-purple-400 dark:hover:bg-purple-500',
+                focus: 'focus:bg-purple-400 dark:focus:bg-purple-500',
+                active: 'active:bg-purple-600 dark:active:bg-purple-700',
+            },
+            pink: {
+                base: 'text-white bg-pink-500 dark:bg-pink-600',
+                hover: 'hover:bg-pink-400 dark:hover:bg-pink-500',
+                focus: 'focus:bg-pink-400 dark:focus:bg-pink-500',
+                active: 'active:bg-pink-600 dark:active:bg-pink-700',
+            },
+            rose: {
+                base: 'text-white bg-rose-500 dark:bg-rose-600',
+                hover: 'hover:bg-rose-400 dark:hover:bg-rose-500',
+                focus: 'focus:bg-rose-400 dark:focus:bg-rose-500',
+                active: 'active:bg-rose-600 dark:active:bg-rose-700',
+            },
         },
     },
     outlined: {
-        slate: {
-            base: 'border-2 dark:border-slate-600',
-            hover: 'hover:bg-slate-200 dark:hover:bg-slate-600',
-            focus: 'focus:bg-slate-200 dark:focus:bg-slate-600',
-            active: 'active:bg-slate-300 active:border-slate-300 dark:active:bg-slate-700 dark:active:border-slate-700',
-        },
-        gray: {
-            base: 'border-2 border-gray-500 text-gray-600 dark:border-gray-600 dark:text-gray-500',
-            hover: 'hover:text-white hover:bg-gray-500 dark:hover:text-white dark:hover:bg-gray-600',
-            focus: 'focus:text-white focus:bg-gray-500 dark:focus:text-white dark:focus:bg-gray-600',
-            active: 'active:bg-gray-600 active:border-gray-600 dark:active:bg-gray-700 dark:active:border-gray-700',
-        },
-        zinc: {
-            base: 'border-2 border-zinc-500 text-zinc-600 dark:border-zinc-600 dark:text-zinc-500',
-            hover: 'hover:text-white hover:bg-zinc-500 dark:hover:text-white dark:hover:bg-zinc-600',
-            focus: 'focus:text-white focus:bg-zinc-500 dark:focus:text-white dark:focus:bg-zinc-600',
-            active: 'active:bg-zinc-600 active:border-zinc-600 dark:active:bg-zinc-700 dark:active:border-zinc-700',
-        },
-        neutral: {
-            base: 'border-2 border-neutral-500 text-neutral-600 dark:border-neutral-600 dark:text-neutral-500',
-            hover: 'hover:text-white hover:bg-neutral-500 dark:hover:text-white dark:hover:bg-neutral-600',
-            focus: 'focus:text-white focus:bg-neutral-500 dark:focus:text-white dark:focus:bg-neutral-600',
-            active: 'active:bg-neutral-600 active:border-neutral-600 dark:active:bg-neutral-700 dark:active:border-neutral-700',
-        },
-        stone: {
-            base: 'border-2 border-stone-500 text-stone-600 dark:border-stone-600 dark:text-stone-500',
-            hover: 'hover:text-white hover:bg-stone-500 dark:hover:text-white dark:hover:bg-stone-600',
-            focus: 'focus:text-white focus:bg-stone-500 dark:focus:text-white dark:focus:bg-stone-600',
-            active: 'active:bg-stone-600 active:border-stone-600 dark:active:bg-stone-700 dark:active:border-stone-700',
-        },
-        red: {
-            base: 'border-2 border-red-500 text-red-600 dark:border-red-600 dark:text-red-500',
-            hover: 'hover:text-white hover:bg-red-500 dark:hover:text-white dark:hover:bg-red-600',
-            focus: 'focus:text-white focus:bg-red-500 dark:focus:text-white dark:focus:bg-red-600',
-            active: 'active:bg-red-600 active:border-red-600 dark:active:bg-red-700 dark:active:border-red-700',
-        },
-        orange: {
-            base: 'border-2 border-orange-500 text-orange-600 dark:border-orange-600 dark:text-orange-500',
-            hover: 'hover:text-white hover:bg-orange-500 dark:hover:text-white dark:hover:bg-orange-600',
-            focus: 'focus:text-white focus:bg-orange-500 dark:focus:text-white dark:focus:bg-orange-600',
-            active: 'active:bg-orange-600 active:border-orange-600 dark:active:bg-orange-700 dark:active:border-orange-700',
-        },
-        amber: {
-            base: 'border-2 border-amber-500 text-amber-600 dark:border-amber-600 dark:text-amber-500',
-            hover: 'hover:text-white hover:bg-amber-500 dark:hover:text-white dark:hover:bg-amber-600',
-            focus: 'focus:text-white focus:bg-amber-500 dark:focus:text-white dark:focus:bg-amber-600',
-            active: 'active:bg-amber-600 active:border-amber-600 dark:active:bg-amber-700 dark:active:border-amber-700',
-        },
-        yellow: {
-            base: 'border-2 border-yellow-500 text-yellow-600 dark:border-yellow-600 dark:text-yellow-500',
-            hover: 'hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600',
-            focus: 'focus:text-white focus:bg-yellow-500 dark:focus:text-white dark:focus:bg-yellow-600',
-            active: 'active:bg-yellow-600 active:border-yellow-600 dark:active:bg-yellow-700 dark:active:border-yellow-700',
-        },
-        lime: {
-            base: 'border-2 border-lime-500 text-lime-600 dark:border-lime-600 dark:text-lime-500',
-            hover: 'hover:text-white hover:bg-lime-500 dark:hover:text-white dark:hover:bg-lime-600',
-            focus: 'focus:text-white focus:bg-lime-500 dark:focus:text-white dark:focus:bg-lime-600',
-            active: 'active:bg-lime-600 active:border-lime-600 dark:active:bg-lime-700 dark:active:border-lime-700',
-        },
-        green: {
-            base: 'border-2 border-green-500 text-green-600 dark:border-green-600 dark:text-green-500',
-            hover: 'hover:text-white hover:bg-green-500 dark:hover:text-white dark:hover:bg-green-600',
-            focus: 'focus:text-white focus:bg-green-500 dark:focus:text-white dark:focus:bg-green-600',
-            active: 'active:bg-green-600 active:border-green-600 dark:active:bg-green-700 dark:active:border-green-700',
-        },
-        emerald: {
-            base: 'border-2 border-emerald-500 text-emerald-600 dark:border-emerald-600 dark:text-emerald-500',
-            hover: 'hover:text-white hover:bg-emerald-500 dark:hover:text-white dark:hover:bg-emerald-600',
-            focus: 'focus:text-white focus:bg-emerald-500 dark:focus:text-white dark:focus:bg-emerald-600',
-            active: 'active:bg-emerald-600 active:border-emerald-600 dark:active:bg-emerald-700 dark:active:border-emerald-700',
-        },
-        teal: {
-            base: 'border-2 border-teal-500 text-teal-600 dark:border-teal-600 dark:text-teal-500',
-            hover: 'hover:text-white hover:bg-teal-500 dark:hover:text-white dark:hover:bg-teal-600',
-            focus: 'focus:text-white focus:bg-teal-500 dark:focus:text-white dark:focus:bg-teal-600',
-            active: 'active:bg-teal-600 active:border-teal-600 dark:active:bg-teal-700 dark:active:border-teal-700',
-        },
-        cyan: {
-            base: 'border-2 border-cyan-500 text-cyan-600 dark:border-cyan-600 dark:text-cyan-500',
-            hover: 'hover:text-white hover:bg-cyan-500 dark:hover:text-white dark:hover:bg-cyan-600',
-            focus: 'focus:text-white focus:bg-cyan-500 dark:focus:text-white dark:focus:bg-cyan-600',
-            active: 'active:bg-cyan-600 active:border-cyan-600 dark:active:bg-cyan-700 dark:active:border-cyan-700',
-        },
-        sky: {
-            base: 'border-2 border-sky-500 text-sky-600 dark:border-sky-600 dark:text-sky-500',
-            hover: 'hover:text-white hover:bg-sky-500 dark:hover:text-white dark:hover:bg-sky-600',
-            focus: 'focus:text-white focus:bg-sky-500 dark:focus:text-white dark:focus:bg-sky-600',
-            active: 'active:bg-sky-600 active:border-sky-600 dark:active:bg-sky-700 dark:active:border-sky-700',
-        },
-        blue: {
-            base: 'border-2 border-blue-500 text-blue-600 dark:border-blue-600 dark:text-blue-500',
-            hover: 'hover:text-white hover:bg-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
-            focus: 'focus:text-white focus:bg-blue-500 dark:focus:text-white dark:focus:bg-blue-600',
-            active: 'active:bg-blue-600 active:border-blue-600 dark:active:bg-blue-700 dark:active:border-blue-700',
-        },
-        indigo: {
-            base: 'border-2 border-indigo-500 text-indigo-600 dark:border-indigo-600 dark:text-indigo-500',
-            hover: 'hover:text-white hover:bg-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600',
-            focus: 'focus:text-white focus:bg-indigo-500 dark:focus:text-white dark:focus:bg-indigo-600',
-            active: 'active:bg-indigo-600 active:border-indigo-600 dark:active:bg-indigo-700 dark:active:border-indigo-700',
-        },
-        violet: {
-            base: 'border-2 border-violet-500 text-violet-600 dark:border-violet-600 dark:text-violet-500',
-            hover: 'hover:text-white hover:bg-violet-500 dark:hover:text-white dark:hover:bg-violet-600',
-            focus: 'focus:text-white focus:bg-violet-500 dark:focus:text-white dark:focus:bg-violet-600',
-            active: 'active:bg-violet-600 active:border-violet-600 dark:active:bg-violet-700 dark:active:border-violet-700',
-        },
-        fuchsia: {
-            base: 'border-2 border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-600 dark:text-fuchsia-500',
-            hover: 'hover:text-white hover:bg-fuchsia-500 dark:hover:text-white dark:hover:bg-fuchsia-600',
-            focus: 'focus:text-white focus:bg-fuchsia-500 dark:focus:text-white dark:focus:bg-fuchsia-600',
-            active: 'active:bg-fuchsia-600 active:border-fuchsia-600 dark:active:bg-fuchsia-700 dark:active:border-fuchsia-700',
-        },
-        purple: {
-            base: 'border-2 border-purple-500 text-purple-600 dark:border-purple-600 dark:text-purple-500',
-            hover: 'hover:text-white hover:bg-purple-500 dark:hover:text-white dark:hover:bg-purple-600',
-            focus: 'focus:text-white focus:bg-purple-500 dark:focus:text-white dark:focus:bg-purple-600',
-            active: 'active:bg-purple-600 active:border-purple-600 dark:active:bg-purple-700 dark:active:border-purple-700',
-        },
-        pink: {
-            base: 'border-2 border-pink-500 text-pink-600 dark:border-pink-600 dark:text-pink-500',
-            hover: 'hover:text-white hover:bg-pink-500 dark:hover:text-white dark:hover:bg-pink-600',
-            focus: 'focus:text-white focus:bg-pink-500 dark:focus:text-white dark:focus:bg-pink-600',
-            active: 'active:bg-pink-600 active:border-pink-600 dark:active:bg-pink-700 dark:active:border-pink-700',
-        },
-        rose: {
-            base: 'border-2 border-rose-500 text-rose-600 dark:border-rose-600 dark:text-rose-500',
-            hover: 'hover:text-white hover:bg-rose-500 dark:hover:text-white dark:hover:bg-rose-600',
-            focus: 'focus:text-white focus:bg-rose-500 dark:focus:text-white dark:focus:bg-rose-600',
-            active: 'active:bg-rose-600 active:border-rose-600 dark:active:bg-rose-700 dark:active:border-rose-700',
+        base: 'border bg-background shadow-xs dark:bg-input/30 dark:hover:bg-input/50',
+        colors: {
+            primary: {
+                base: 'border-primary dark:text-accent-foreground',
+                hover: 'hover:bg-primary/90 hover:text-primary-foreground',
+                focus: 'focus:bg-primary/90 focus:text-primary-foreground',
+                active: 'active:bg-primary/90 active:text-primary-foreground',
+            },
+            secondary: {
+                base: 'border-secondary text-secondary-foreground',
+                hover: 'hover:bg-secondary/80',
+                focus: 'focus:bg-secondary/80',
+                active: 'active:bg-secondary/80',
+            },
+            slate: {
+                base: 'dark:border-slate-600',
+                hover: 'hover:bg-slate-200 dark:hover:bg-slate-600',
+                focus: 'focus:bg-slate-200 dark:focus:bg-slate-600',
+                active: 'active:bg-slate-300 active:border-slate-300 dark:active:bg-slate-700 dark:active:border-slate-700',
+            },
+            gray: {
+                base: 'border-gray-500 text-gray-600 dark:border-gray-600 dark:text-gray-500',
+                hover: 'hover:text-white hover:bg-gray-500 dark:hover:text-white dark:hover:bg-gray-600',
+                focus: 'focus:text-white focus:bg-gray-500 dark:focus:text-white dark:focus:bg-gray-600',
+                active: 'active:bg-gray-600 active:border-gray-600 dark:active:bg-gray-700 dark:active:border-gray-700',
+            },
+            zinc: {
+                base: 'border-zinc-500 text-zinc-600 dark:border-zinc-600 dark:text-zinc-500',
+                hover: 'hover:text-white hover:bg-zinc-500 dark:hover:text-white dark:hover:bg-zinc-600',
+                focus: 'focus:text-white focus:bg-zinc-500 dark:focus:text-white dark:focus:bg-zinc-600',
+                active: 'active:bg-zinc-600 active:border-zinc-600 dark:active:bg-zinc-700 dark:active:border-zinc-700',
+            },
+            neutral: {
+                base: 'border-neutral-500 text-neutral-600 dark:border-neutral-600 dark:text-neutral-500',
+                hover: 'hover:text-white hover:bg-neutral-500 dark:hover:text-white dark:hover:bg-neutral-600',
+                focus: 'focus:text-white focus:bg-neutral-500 dark:focus:text-white dark:focus:bg-neutral-600',
+                active: 'active:bg-neutral-600 active:border-neutral-600 dark:active:bg-neutral-700 dark:active:border-neutral-700',
+            },
+            stone: {
+                base: 'border-stone-500 text-stone-600 dark:border-stone-600 dark:text-stone-500',
+                hover: 'hover:text-white hover:bg-stone-500 dark:hover:text-white dark:hover:bg-stone-600',
+                focus: 'focus:text-white focus:bg-stone-500 dark:focus:text-white dark:focus:bg-stone-600',
+                active: 'active:bg-stone-600 active:border-stone-600 dark:active:bg-stone-700 dark:active:border-stone-700',
+            },
+            red: {
+                base: 'border-red-500 text-red-600 dark:border-red-600 dark:text-red-500',
+                hover: 'hover:text-white hover:bg-red-500 dark:hover:text-white dark:hover:bg-red-600',
+                focus: 'focus:text-white focus:bg-red-500 dark:focus:text-white dark:focus:bg-red-600',
+                active: 'active:bg-red-600 active:border-red-600 dark:active:bg-red-700 dark:active:border-red-700',
+            },
+            orange: {
+                base: 'border-orange-500 text-orange-600 dark:border-orange-600 dark:text-orange-500',
+                hover: 'hover:text-white hover:bg-orange-500 dark:hover:text-white dark:hover:bg-orange-600',
+                focus: 'focus:text-white focus:bg-orange-500 dark:focus:text-white dark:focus:bg-orange-600',
+                active: 'active:bg-orange-600 active:border-orange-600 dark:active:bg-orange-700 dark:active:border-orange-700',
+            },
+            amber: {
+                base: 'border-amber-500 text-amber-600 dark:border-amber-600 dark:text-amber-500',
+                hover: 'hover:text-white hover:bg-amber-500 dark:hover:text-white dark:hover:bg-amber-600',
+                focus: 'focus:text-white focus:bg-amber-500 dark:focus:text-white dark:focus:bg-amber-600',
+                active: 'active:bg-amber-600 active:border-amber-600 dark:active:bg-amber-700 dark:active:border-amber-700',
+            },
+            yellow: {
+                base: 'border-yellow-500 text-yellow-600 dark:border-yellow-600 dark:text-yellow-500',
+                hover: 'hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600',
+                focus: 'focus:text-white focus:bg-yellow-500 dark:focus:text-white dark:focus:bg-yellow-600',
+                active: 'active:bg-yellow-600 active:border-yellow-600 dark:active:bg-yellow-700 dark:active:border-yellow-700',
+            },
+            lime: {
+                base: 'border-lime-500 text-lime-600 dark:border-lime-600 dark:text-lime-500',
+                hover: 'hover:text-white hover:bg-lime-500 dark:hover:text-white dark:hover:bg-lime-600',
+                focus: 'focus:text-white focus:bg-lime-500 dark:focus:text-white dark:focus:bg-lime-600',
+                active: 'active:bg-lime-600 active:border-lime-600 dark:active:bg-lime-700 dark:active:border-lime-700',
+            },
+            green: {
+                base: 'border-green-500 text-green-600 dark:border-green-600 dark:text-green-500',
+                hover: 'hover:text-white hover:bg-green-500 dark:hover:text-white dark:hover:bg-green-600',
+                focus: 'focus:text-white focus:bg-green-500 dark:focus:text-white dark:focus:bg-green-600',
+                active: 'active:bg-green-600 active:border-green-600 dark:active:bg-green-700 dark:active:border-green-700',
+            },
+            emerald: {
+                base: 'border-emerald-500 text-emerald-600 dark:border-emerald-600 dark:text-emerald-500',
+                hover: 'hover:text-white hover:bg-emerald-500 dark:hover:text-white dark:hover:bg-emerald-600',
+                focus: 'focus:text-white focus:bg-emerald-500 dark:focus:text-white dark:focus:bg-emerald-600',
+                active: 'active:bg-emerald-600 active:border-emerald-600 dark:active:bg-emerald-700 dark:active:border-emerald-700',
+            },
+            teal: {
+                base: 'border-teal-500 text-teal-600 dark:border-teal-600 dark:text-teal-500',
+                hover: 'hover:text-white hover:bg-teal-500 dark:hover:text-white dark:hover:bg-teal-600',
+                focus: 'focus:text-white focus:bg-teal-500 dark:focus:text-white dark:focus:bg-teal-600',
+                active: 'active:bg-teal-600 active:border-teal-600 dark:active:bg-teal-700 dark:active:border-teal-700',
+            },
+            cyan: {
+                base: 'border-cyan-500 text-cyan-600 dark:border-cyan-600 dark:text-cyan-500',
+                hover: 'hover:text-white hover:bg-cyan-500 dark:hover:text-white dark:hover:bg-cyan-600',
+                focus: 'focus:text-white focus:bg-cyan-500 dark:focus:text-white dark:focus:bg-cyan-600',
+                active: 'active:bg-cyan-600 active:border-cyan-600 dark:active:bg-cyan-700 dark:active:border-cyan-700',
+            },
+            sky: {
+                base: 'border-sky-500 text-sky-600 dark:border-sky-600 dark:text-sky-500',
+                hover: 'hover:text-white hover:bg-sky-500 dark:hover:text-white dark:hover:bg-sky-600',
+                focus: 'focus:text-white focus:bg-sky-500 dark:focus:text-white dark:focus:bg-sky-600',
+                active: 'active:bg-sky-600 active:border-sky-600 dark:active:bg-sky-700 dark:active:border-sky-700',
+            },
+            blue: {
+                base: 'border-blue-500 text-blue-600 dark:border-blue-600 dark:text-blue-500',
+                hover: 'hover:text-white hover:bg-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
+                focus: 'focus:text-white focus:bg-blue-500 dark:focus:text-white dark:focus:bg-blue-600',
+                active: 'active:bg-blue-600 active:border-blue-600 dark:active:bg-blue-700 dark:active:border-blue-700',
+            },
+            indigo: {
+                base: 'border-indigo-500 text-indigo-600 dark:border-indigo-600 dark:text-indigo-500',
+                hover: 'hover:text-white hover:bg-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600',
+                focus: 'focus:text-white focus:bg-indigo-500 dark:focus:text-white dark:focus:bg-indigo-600',
+                active: 'active:bg-indigo-600 active:border-indigo-600 dark:active:bg-indigo-700 dark:active:border-indigo-700',
+            },
+            violet: {
+                base: 'border-violet-500 text-violet-600 dark:border-violet-600 dark:text-violet-500',
+                hover: 'hover:text-white hover:bg-violet-500 dark:hover:text-white dark:hover:bg-violet-600',
+                focus: 'focus:text-white focus:bg-violet-500 dark:focus:text-white dark:focus:bg-violet-600',
+                active: 'active:bg-violet-600 active:border-violet-600 dark:active:bg-violet-700 dark:active:border-violet-700',
+            },
+            fuchsia: {
+                base: 'border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-600 dark:text-fuchsia-500',
+                hover: 'hover:text-white hover:bg-fuchsia-500 dark:hover:text-white dark:hover:bg-fuchsia-600',
+                focus: 'focus:text-white focus:bg-fuchsia-500 dark:focus:text-white dark:focus:bg-fuchsia-600',
+                active: 'active:bg-fuchsia-600 active:border-fuchsia-600 dark:active:bg-fuchsia-700 dark:active:border-fuchsia-700',
+            },
+            purple: {
+                base: 'border-purple-500 text-purple-600 dark:border-purple-600 dark:text-purple-500',
+                hover: 'hover:text-white hover:bg-purple-500 dark:hover:text-white dark:hover:bg-purple-600',
+                focus: 'focus:text-white focus:bg-purple-500 dark:focus:text-white dark:focus:bg-purple-600',
+                active: 'active:bg-purple-600 active:border-purple-600 dark:active:bg-purple-700 dark:active:border-purple-700',
+            },
+            pink: {
+                base: 'border-pink-500 text-pink-600 dark:border-pink-600 dark:text-pink-500',
+                hover: 'hover:text-white hover:bg-pink-500 dark:hover:text-white dark:hover:bg-pink-600',
+                focus: 'focus:text-white focus:bg-pink-500 dark:focus:text-white dark:focus:bg-pink-600',
+                active: 'active:bg-pink-600 active:border-pink-600 dark:active:bg-pink-700 dark:active:border-pink-700',
+            },
+            rose: {
+                base: 'border-rose-500 text-rose-600 dark:border-rose-600 dark:text-rose-500',
+                hover: 'hover:text-white hover:bg-rose-500 dark:hover:text-white dark:hover:bg-rose-600',
+                focus: 'focus:text-white focus:bg-rose-500 dark:focus:text-white dark:focus:bg-rose-600',
+                active: 'active:bg-rose-600 active:border-rose-600 dark:active:bg-rose-700 dark:active:border-rose-700',
+            },
         },
     },
     text: {
-        slate: {
-            base: 'bg-transparent',
-            hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
-            focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
-            active: 'active:bg-slate-300 dark:active:bg-slate-800',
-        },
-        gray: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-gray-500 dark:hover:bg-gray-600',
-            focus: 'focus:text-white focus:bg-gray-500 dark:focus:bg-gray-600',
-            active: 'active:bg-gray-600 dark:active:bg-gray-700',
-        },
-        zinc: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-zinc-500 dark:hover:bg-zinc-600',
-            focus: 'focus:text-white focus:bg-zinc-500 dark:focus:bg-zinc-600',
-            active: 'active:bg-zinc-600 dark:active:bg-zinc-700',
-        },
-        neutral: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-neutral-500 dark:hover:bg-neutral-600',
-            focus: 'focus:text-white focus:bg-neutral-500 dark:focus:bg-neutral-600',
-            active: 'active:bg-neutral-600 dark:active:bg-neutral-700',
-        },
-        stone: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-stone-500 dark:hover:bg-stone-600',
-            focus: 'focus:text-white focus:bg-stone-500 dark:focus:bg-stone-600',
-            active: 'active:bg-stone-600 dark:active:bg-stone-700',
-        },
-        red: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-red-500 dark:hover:bg-red-600',
-            focus: 'focus:text-white focus:bg-red-500 dark:focus:bg-red-600',
-            active: 'active:bg-red-600 dark:active:bg-red-700',
-        },
-        orange: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-orange-500 dark:hover:bg-orange-600',
-            focus: 'focus:text-white focus:bg-orange-500 dark:focus:bg-orange-600',
-            active: 'active:bg-orange-600 dark:active:bg-orange-700',
-        },
-        amber: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-amber-500 dark:hover:bg-amber-600',
-            focus: 'focus:text-white focus:bg-amber-500 dark:focus:bg-amber-600',
-            active: 'active:bg-amber-600 dark:active:bg-amber-700',
-        },
-        yellow: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-yellow-500 dark:hover:bg-yellow-600',
-            focus: 'focus:text-white focus:bg-yellow-500 dark:focus:bg-yellow-600',
-            active: 'active:bg-yellow-600 dark:active:bg-yellow-700',
-        },
-        lime: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-lime-500 dark:hover:bg-lime-600',
-            focus: 'focus:text-white focus:bg-lime-500 dark:focus:bg-lime-600',
-            active: 'active:bg-lime-600 dark:active:bg-lime-700',
-        },
-        green: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-green-500 dark:hover:bg-green-600',
-            focus: 'focus:text-white focus:bg-green-500 dark:focus:bg-green-600',
-            active: 'active:bg-green-600 dark:active:bg-green-700',
-        },
-        emerald: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-emerald-500 dark:hover:bg-emerald-600',
-            focus: 'focus:text-white focus:bg-emerald-500 dark:focus:bg-emerald-600',
-            active: 'active:bg-emerald-600 dark:active:bg-emerald-700',
-        },
-        teal: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-teal-500 dark:hover:bg-teal-600',
-            focus: 'focus:text-white focus:bg-teal-500 dark:focus:bg-teal-600',
-            active: 'active:bg-teal-600 dark:active:bg-teal-700',
-        },
-        cyan: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-cyan-500 dark:hover:bg-cyan-600',
-            focus: 'focus:text-white focus:bg-cyan-500 dark:focus:bg-cyan-600',
-            active: 'active:bg-cyan-600 dark:active:bg-cyan-700',
-        },
-        sky: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-sky-500 dark:hover:bg-sky-600',
-            focus: 'focus:text-white focus:bg-sky-500 dark:focus:bg-sky-600',
-            active: 'active:bg-sky-600 dark:active:bg-sky-700',
-        },
-        blue: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-blue-500 dark:hover:bg-blue-600',
-            focus: 'focus:text-white focus:bg-blue-500 dark:focus:bg-blue-600',
-            active: 'active:bg-blue-600 dark:active:bg-blue-700',
-        },
-        indigo: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-indigo-500 dark:hover:bg-indigo-600',
-            focus: 'focus:text-white focus:bg-indigo-500 dark:focus:bg-indigo-600',
-            active: 'active:bg-indigo-600 dark:active:bg-indigo-700',
-        },
-        violet: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-violet-500 dark:hover:bg-violet-600',
-            focus: 'focus:text-white focus:bg-violet-500 dark:focus:bg-violet-600',
-            active: 'active:bg-violet-600 dark:active:bg-violet-700',
-        },
-        fuchsia: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-fuchsia-500 dark:hover:bg-fuchsia-600',
-            focus: 'focus:text-white focus:bg-fuchsia-500 dark:focus:bg-fuchsia-600',
-            active: 'active:bg-fuchsia-600 dark:active:bg-fuchsia-700',
-        },
-        purple: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-purple-500 dark:hover:bg-purple-600',
-            focus: 'focus:text-white focus:bg-purple-500 dark:focus:bg-purple-600',
-            active: 'active:bg-purple-600 dark:active:bg-purple-700',
-        },
-        pink: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-pink-500 dark:hover:bg-pink-600',
-            focus: 'focus:text-white focus:bg-pink-500 dark:focus:bg-pink-600',
-            active: 'active:bg-pink-600 dark:active:bg-pink-700',
-        },
-        rose: {
-            base: 'bg-transparent',
-            hover: 'hover:text-white hover:bg-rose-500 dark:hover:bg-rose-600',
-            focus: 'focus:text-white focus:bg-rose-500 dark:focus:bg-rose-600',
-            active: 'active:bg-rose-600 dark:active:bg-rose-700',
+        base: 'bg-transparent underline-offset-4 hover:underline',
+        colors: {
+            primary: {
+                base: 'dark:text-accent-foreground',
+            },
+            secondary: {
+                base: 'text-secondary-foreground',
+            },
+            slate: {
+                base: 'text-slate-600 dark:text-slate-400',
+            },
+            gray: {
+                base: 'text-gray-600 dark:text-gray-400',
+            },
+            zinc: {
+                base: 'text-zinc-600 dark:text-zinc-400',
+            },
+            neutral: {
+                base: 'text-neutral-600 dark:text-neutral-400',
+            },
+            stone: {
+                base: 'text-stone-600 dark:text-stone-400',
+            },
+            red: {
+                base: 'text-red-600 dark:text-red-400',
+            },
+            orange: {
+                base: 'text-orange-600 dark:text-orange-400',
+            },
+            amber: {
+                base: 'text-amber-600 dark:text-amber-400',
+            },
+            yellow: {
+                base: 'text-yellow-600 dark:text-yellow-400',
+            },
+            lime: {
+                base: 'text-lime-600 dark:text-lime-400',
+            },
+            green: {
+                base: 'text-green-600 dark:text-green-400',
+            },
+            emerald: {
+                base: 'text-emerald-600 dark:text-emerald-400',
+            },
+            teal: {
+                base: 'text-teal-600 dark:text-teal-400',
+            },
+            cyan: {
+                base: 'text-cyan-600 dark:text-cyan-400',
+            },
+            sky: {
+                base: 'text-sky-600 dark:text-sky-400',
+            },
+            blue: {
+                base: 'text-blue-600 dark:text-blue-400',
+            },
+            indigo: {
+                base: 'text-indigo-600 dark:text-indigo-400',
+            },
+            violet: {
+                base: 'text-violet-600 dark:text-violet-400',
+            },
+            fuchsia: {
+                base: 'text-fuchsia-600 dark:text-fuchsia-400',
+            },
+            purple: {
+                base: 'text-purple-600 dark:text-purple-400',
+            },
+            pink: {
+                base: 'text-pink-600 dark:text-pink-400',
+            },
+            rose: {
+                base: 'text-rose-600 dark:text-rose-400',
+            },
         },
     },
 };
 const sizeClassNames = {
     small: {
-        base: 'gap-1 text-sm h-6',
-        withChildren: 'px-1.5',
+        base: 'gap-1 text-xs h-6',
+        withChildren: 'px-2 gap-1',
         icon: {
             base: 'h-3 w-3',
-            withChildren: 'h-2 w-2',
+            withChildren: 'h-2.5 w-2.5',
         },
     },
     medium: {
-        base: 'gap-1.5 text-base h-9',
-        withChildren: 'px-2',
+        base: 'gap-2 text-sm font-medium h-9 py-2',
+        withChildren: 'px-4 has-[>svg]:px-3',
         icon: {
-            base: 'h-4 w-4',
-            withChildren: 'h-3 w-3',
+            base: 'h-5 w-5',
+            withChildren: 'h-4 w-4',
         },
     },
 };
 const Button = (_a) => {
     var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, loading, disabled, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled, dataTestId = 'button' } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "loading", "disabled", "prefixIcon", "suffixIcon", "unstyled", "dataTestId"]);
-    return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', disabled || loading
-            ? 'cursor-not-allowed opacity-50'
-            : !unstyled
-                ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active} cursor-pointer`
-                : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [loading && (jsx(Flex, { className: cn('absolute inset-0', rounded ? 'rounded-full' : 'rounded-md'), align: "center", justify: "center", children: jsx(Spinner, { className: "h-5 w-5 animate-spin bg-transparent dark:bg-transparent", dataTestId: `${dataTestId}-spinner` }) })), PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
+    return (jsxs("button", Object.assign({ className: cn('inline-flex aspect-square shrink-0 items-center justify-center font-medium whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0', 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:ring-[3px]', sizeClassNames[size].base, variantClassNames[variant].base, variantClassNames[variant].colors[color].base, !unstyled &&
+            `${variantClassNames[variant].colors[color].hover} ${variantClassNames[variant].colors[color].focus} ${variantClassNames[variant].colors[color].active} cursor-pointer`, unstyled && 'cursor-default', rounded ? 'rounded-full' : 'rounded-md', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [PrefixIcon && !loading && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), loading && (jsx(Spinner, { className: "bg-transparent dark:bg-transparent", spinnerClassName: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base, dataTestId: `${dataTestId}-spinner` })), children, SuffixIcon && !loading && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 };
 
 const Badge = (_a) => {
@@ -638,6 +577,11 @@ const Badge = (_a) => {
     return (jsx(Button, Object.assign({ size: size, dataTestId: dataTestId }, props)));
 };
 
+const Block = (_a) => {
+    var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
+    return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
+};
+
 const Card = (_a) => {
     var { children, className, dataTestId = 'card' } = _a, blockProps = __rest(_a, ["children", "className", "dataTestId"]);
     return (jsx(Block, Object.assign({ className: cn('bg-background rounded-lg border p-2 dark:border-slate-700', className), dataTestId: dataTestId }, blockProps, { children: children })));
@@ -660,6 +604,32 @@ const Collapsible = Object.assign(CollapsibleRoot, {
     Content: CollapsibleContent,
 });
 
+const directionClasses = {
+    row: {
+        normal: 'flex-row',
+        reverse: 'flex-row-reverse',
+    },
+    column: {
+        normal: 'flex-col',
+        reverse: 'flex-col-reverse',
+    },
+};
+const alignClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+};
+const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    between: 'justify-between',
+    end: 'justify-end',
+};
+const Flex = (_a) => {
+    var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start', dataTestId = 'flex' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify", "dataTestId"]);
+    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className), dataTestId: dataTestId }, blockProps, { children: children })));
+};
+
 dayjs.extend(localeData);
 function useDays(locale = 'en') {
     return useMemo(() => {
@@ -812,6 +782,12 @@ function usePagination(currentIndex, totalPages) {
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 5000; // 5 seconds
+const actionTypes = {
+    ADD_TOAST: 'ADD_TOAST',
+    UPDATE_TOAST: 'UPDATE_TOAST',
+    DISMISS_TOAST: 'DISMISS_TOAST',
+    REMOVE_TOAST: 'REMOVE_TOAST',
+};
 let count = 0;
 function genId() {
     count = (count + 1) % Number.MAX_SAFE_INTEGER;
@@ -833,11 +809,11 @@ const addToRemoveQueue = (toastId) => {
 };
 const reducer = (state, action) => {
     switch (action.type) {
-        case 'ADD_TOAST':
+        case actionTypes.ADD_TOAST:
             return Object.assign(Object.assign({}, state), { toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) });
-        case 'UPDATE_TOAST':
+        case actionTypes.UPDATE_TOAST:
             return Object.assign(Object.assign({}, state), { toasts: state.toasts.map((t) => (t.id === action.toast.id ? Object.assign(Object.assign({}, t), action.toast) : t)) });
-        case 'DISMISS_TOAST': {
+        case actionTypes.DISMISS_TOAST: {
             const { toastId } = action;
             // ! Side effects ! - This could be extracted into a dismissToast() action,
             // but I'll keep it here for simplicity
@@ -852,7 +828,7 @@ const reducer = (state, action) => {
             return Object.assign(Object.assign({}, state), { toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined
                     ? Object.assign(Object.assign({}, t), { open: false }) : t) });
         }
-        case 'REMOVE_TOAST':
+        case actionTypes.REMOVE_TOAST:
             if (action.toastId === undefined) {
                 return Object.assign(Object.assign({}, state), { toasts: [] });
             }
@@ -871,12 +847,12 @@ function toast(_a) {
     var props = __rest(_a, []);
     const id = genId();
     const update = (props) => dispatch({
-        type: 'UPDATE_TOAST',
+        type: actionTypes.UPDATE_TOAST,
         toast: Object.assign(Object.assign({}, props), { id }),
     });
-    const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+    const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });
     dispatch({
-        type: 'ADD_TOAST',
+        type: actionTypes.ADD_TOAST,
         toast: Object.assign(Object.assign({}, props), { id, open: true, onOpenChange: (open) => {
                 if (!open)
                     dismiss();
@@ -899,7 +875,7 @@ function useToast() {
             }
         };
     }, [state]);
-    return Object.assign(Object.assign({}, state), { toast, dismiss: (toastId) => dispatch({ type: 'DISMISS_TOAST', toastId }) });
+    return Object.assign(Object.assign({}, state), { toast, dismiss: (toastId) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }) });
 }
 
 const Tooltip = ({ children, className, content, asChild, placement, dataTestId = 'tooltip', }) => (jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: jsxs(TooltipPrimitive.Root, { children: [jsx(TooltipPrimitive.Trigger, { asChild: asChild, "data-testid": `${dataTestId}-trigger`, children: children }), jsx(TooltipPrimitive.Portal, { children: jsx(TooltipPrimitive.Content, { className: cn('animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-[101] overflow-hidden rounded-md border bg-white px-3 py-1.5 text-sm shadow-md dark:border-slate-700 dark:bg-slate-800 dark:text-white', className), side: placement, sideOffset: 5, "data-testid": `${dataTestId}-content`, children: content }) })] }) }));
@@ -911,24 +887,13 @@ const Label = ({ children, className, description, required, hasErrors, htmlFor,
         }, className), htmlFor: htmlFor, "data-testid": dataTestId, children: [children, description && (jsx(Tooltip, { content: jsx("div", { className: "max-w-xs", children: description }), placement: "top", asChild: true, dataTestId: `${dataTestId}-description-tooltip`, children: jsx(HelpCircle, { className: "h-4 w-4", "data-testid": `${dataTestId}-description-tooltip-icon` }) })), required && jsx("span", { className: "text-red-600", children: "*" })] }));
 };
 
-const inputClasses = {
-    base: {
-        input: 'dark:bg-transparent peer w-full border focus:ring-0 rounded-md overflow-hidden text-ellipsis',
-        disabled: 'opacity-60',
-    },
-    withoutErrors: {
-        input: 'border-slate-300 dark:border-slate-700 focus:border-blue-500 dark:focus:border-blue-600 dark:placeholder-slate-400',
-        extension: 'bg-white dark:bg-transparent border-slate-300 text-slate-600 peer-focus:border-blue-500 dark:peer-focus:border-blue-600 dark:border-slate-700 dark:text-white',
-    },
-    withErrors: {
-        input: 'text-red-600 border-red-500 placeholder-red-500 focus:border-red-500 dark:border-red-600 dark:peer-focus:border-red-600 dark:placeholder-red-600',
-        extension: 'text-red-600 border-red-500 peer-focus:border-red-500 dark:border-red-600 dark:peer-focus:border-red-600 dark:text-red-500',
-    },
-};
+const baseInputClasses = 'peer file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent' +
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-color outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium' +
+    'border-input focus:ring-0';
 const sizeClasses = {
     small: {
         label: 'text-xs',
-        input: 'text-xs py-1 px-2 h-6',
+        input: 'text-sm md:text-xs py-0.5 px-2 h-6 file:h-5 file:text-xs',
         checkbox: {
             input: 'w-3 h-3',
             wrapper: 'h-6 gap-1',
@@ -944,7 +909,7 @@ const sizeClasses = {
     },
     medium: {
         label: 'text-sm',
-        input: 'text-sm py-2 px-3 h-9',
+        input: 'text-base md:text-sm py-1 px-3 h-9 file:h-7 file:text-sm',
         checkbox: {
             input: 'w-4 h-4',
             wrapper: 'h-8 gap-2',
@@ -970,31 +935,17 @@ const BasicInput = (_a) => {
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { target: { value: '', checked: false } });
     };
     return (jsxs("div", { className: cn('w-full dark:text-white', className), "data-testid": dataTestId, children: [type !== 'checkbox' && memoLabel, jsxs("div", { className: cn('group relative flex', {
+                    errors: hasErrors,
                     'mt-1': label && type !== 'checkbox',
                     [`items-center ${sizeClasses[size].checkbox.wrapper}`]: type === 'checkbox',
-                }), title: type !== 'textarea' && typeof props.value === 'string' ? props.value : undefined, children: [type === 'textarea' ? (jsx("textarea", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input.replace(/ h-\d/g, ''), {
-                            [inputClasses.base.disabled]: props.disabled,
-                            [inputClasses.withoutErrors.input]: !hasErrors,
-                            [inputClasses.withErrors.input]: hasErrors,
-                            'rounded-r-none border-r-0': SuffixIcon,
-                        }, inputClassName) }, props, { value: props.value, "data-testid": `${dataTestId}-textarea` }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('rounded-sm border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
-                            [inputClasses.base.disabled]: props.disabled,
-                            'bg-red-100': hasErrors,
-                        }, inputClassName), type: type, checked: Boolean(props.value) }, props, { "data-testid": `${dataTestId}-checkbox` }))) : (jsx("input", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input, {
-                            [inputClasses.base.disabled]: props.disabled,
-                            [inputClasses.withoutErrors.input]: !hasErrors,
-                            [inputClasses.withErrors.input]: hasErrors,
-                            'rounded-r-none border-r-0': SuffixIcon,
-                        }, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, "data-testid": `${dataTestId}-input` }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 group-hover:opacity-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
+                    'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-ring/50 rounded-md has-[input:focus-visible]:ring-[3px] has-[textarea:focus-visible]:ring-[3px]': type !== 'checkbox',
+                    'aria-invalid:!ring-destructive/20 dark:aria-invalid:!ring-destructive/40 aria-invalid:[&>input,&>textarea,&>div]:border-destructive': type !== 'checkbox',
+                    'shadow-xs transition-[color,box-shadow]': type !== 'checkbox',
+                }), title: type !== 'textarea' && typeof props.value === 'string' ? props.value : undefined, "data-testid": `${dataTestId}-wrapper`, "aria-invalid": hasErrors, children: [type === 'textarea' ? (jsx("textarea", Object.assign({ id: id, className: cn(baseInputClasses, sizeClasses[size].input.replace(/ h-\d/g, ''), 'field-sizing-content min-h-16 py-2', SuffixIcon && 'rounded-r-none border-r-0', inputClassName) }, props, { value: props.value, "data-testid": `${dataTestId}-textarea` }))) : type === 'checkbox' ? (jsx("input", Object.assign({ id: id, className: cn('border-input rounded-sm disabled:opacity-50', 'focus:ring-ring/50 focus:border-ring focus:ring-[3px] focus:ring-offset-0', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40', sizeClasses[size].checkbox.input, hasErrors && 'bg-red-100', inputClassName), type: type, checked: Boolean(props.value) }, props, { "data-testid": `${dataTestId}-checkbox`, "aria-invalid": hasErrors }))) : (jsx("input", Object.assign({ id: id, className: cn(baseInputClasses, sizeClasses[size].input, SuffixIcon && 'rounded-r-none border-r-0', inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, "data-testid": `${dataTestId}-input` }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsx(XIcon, { className: cn('absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 group-hover:opacity-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
                             [sizeClasses[size].clearButton.withSuffixIcon]: SuffixIcon,
-                        }), onClick: handleClear, onPointerDown: (event) => event.stopPropagation(), "data-testid": `${dataTestId}-clear` })), type !== 'checkbox' && SuffixIcon && (jsx(BasicInputExtension, { className: extensionClassName, hasErrors: hasErrors, size: size, disabled: props.disabled, onClick: onSuffixIconClick, dataTestId: `${dataTestId}-suffix`, children: jsx(SuffixIcon, { className: sizeClasses[size].suffix.icon }) }))] })] }));
+                        }), onClick: handleClear, onPointerDown: (event) => event.stopPropagation(), "data-testid": `${dataTestId}-clear` })), type !== 'checkbox' && SuffixIcon && (jsx(BasicInputExtension, { className: extensionClassName, size: size, disabled: props.disabled, onClick: onSuffixIconClick, dataTestId: `${dataTestId}-suffix`, children: jsx(SuffixIcon, { className: sizeClasses[size].suffix.icon }) }))] })] }));
 };
-const BasicInputExtension = ({ children, className, size, hasErrors, disabled, onClick, dataTestId }) => (jsx("div", { className: cn('flex aspect-square items-center justify-center rounded-r-md border border-l-0', sizeClasses[size].suffix.wrapper, {
-        [inputClasses.base.disabled]: disabled,
-        [inputClasses.withoutErrors.extension]: !hasErrors,
-        [inputClasses.withErrors.extension]: hasErrors,
-        'cursor-pointer': onClick,
-    }, className), onClick: !disabled ? onClick : undefined, onPointerDown: (event) => event.stopPropagation(), "data-testid": dataTestId, children: children }));
+const BasicInputExtension = ({ children, className, size, disabled, onClick, dataTestId }) => (jsx("div", { className: cn('dark:bg-input/30 border-input flex aspect-square items-center justify-center rounded-r-md border border-l-0 bg-transparent aria-disabled:opacity-50', sizeClasses[size].suffix.wrapper, onClick && 'cursor-pointer', className), onClick: !disabled ? onClick : undefined, onPointerDown: (event) => event.stopPropagation(), "data-testid": dataTestId, "aria-disabled": disabled, children: children }));
 
 const CheckboxInput = (_a) => {
     var { dataTestId = 'checkbox-input' } = _a, props = __rest(_a, ["dataTestId"]);
@@ -1273,7 +1224,7 @@ const DateTimeInput = (_a) => {
                 setIsOpen(false);
         }
     };
-    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick, dataTestId: dataTestId })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow-sm duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, "data-testid": `${dataTestId}-popup`, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate, dataTestId: `${dataTestId}-date-selector` })), calendarView === 'days' && (jsxs("div", { className: "flex items-center justify-end gap-2 px-3 py-2 select-none", "data-testid": `${dataTestId}-time-selector`, children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate, dataTestId: `${dataTestId}-time-selector` })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold text-blue-600 uppercase transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), "data-testid": `${dataTestId}-ok`, children: "OK" })] }))] }))] }));
+    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(TextInput, Object.assign({}, props, { readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick, dataTestId: dataTestId })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow-sm duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, "data-testid": `${dataTestId}-popup`, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate, dataTestId: `${dataTestId}-date-selector` })), calendarView === 'days' && (jsxs("div", { className: "flex items-center justify-end gap-2 px-3 py-2 select-none", "data-testid": `${dataTestId}-time-selector`, children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate, dataTestId: `${dataTestId}-time-selector` })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold text-blue-600 uppercase transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), "data-testid": `${dataTestId}-ok`, children: "OK" })] }))] }))] }));
 };
 
 const ListContent = (_a) => {
@@ -1475,7 +1426,7 @@ const SelectInput = (_a) => {
                 handleOnSelect(option.id);
             }, dataTestId: option.dataTestId, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
-    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), dataTestId: `${dataTestId}-trigger`, children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), readOnly: true, dataTestId: dataTestId })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", dataTestId: `${dataTestId}-content`, children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue, dataTestId: `${dataTestId}-search` }), jsx(DropdownMenu.Separator, { className: "w-full", dataTestId: `${dataTestId}-separator` })] })), filteredItems.length === 0 &&
+    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), dataTestId: `${dataTestId}-trigger`, children: jsx(TextInput, Object.assign({}, props, { readOnly: true, className: "[&>div>*]:cursor-pointer", inputClassName: cn('text-left', props.inputClassName), value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), dataTestId: dataTestId })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", dataTestId: `${dataTestId}-content`, children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { autoFocus: true, value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue, dataTestId: `${dataTestId}-search` }), jsx(DropdownMenu.Separator, { className: "w-full", dataTestId: `${dataTestId}-separator` })] })), filteredItems.length === 0 &&
                         (allowAddition && searchValue ? (jsxs("button", { className: "rounded-sm bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, "data-testid": `${dataTestId}-add-button`, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", "data-testid": `${dataTestId}-no-items`, children: "No items" }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, dataTestId: `${dataTestId}-group`, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", dataTestId: `${dataTestId}-group-label-${item.id}`, children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem, { dataTestId: `${dataTestId}-item-${subItem.id}` }), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item, { dataTestId: `${dataTestId}-item-${item.id}` }), item.id))) })] })] }));
 };
 function isNotNullOrUndefined(value) {
@@ -1517,11 +1468,12 @@ function withForm(Component) {
                 return (jsx(Component, Object.assign({}, restProps, field, { onChange: Component === NumberInput
                         ? (value) => field.onChange(value.target.valueAsNumber)
                         : field.onChange, value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: ((_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled) ||
-                        formState.isSubmitting, hasErrors: fieldState.error })));
+                        formState.isSubmitting, hasErrors: !!fieldState.error })));
             } }));
     };
 }
 const FormInputs = {
+    BasicInput: withForm(BasicInput),
     Text: withForm(TextInput),
     Email: withForm(EmailInput),
     Password: withForm(PasswordInput),
@@ -1552,6 +1504,8 @@ const dotSizeClassNames = {
     },
 };
 const colorClassNames = {
+    primary: 'bg-primary text-primary-foreground',
+    secondary: 'bg-secondary text-secondary-foreground',
     slate: 'bg-slate-500 dark:bg-slate-600',
     gray: 'bg-gray-500 dark:bg-gray-600',
     zinc: 'bg-zinc-500 dark:bg-zinc-600',
@@ -1987,7 +1941,6 @@ const SidebarContextProvider = (_a) => {
     var { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children } = _a, props = __rest(_a, ["defaultOpen", "open", "onOpenChange", "className", "style", "children"]);
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = useState(false);
-    useRef(typeof document === 'undefined' ? null : document.documentElement);
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
     const [_open, _setOpen] = useState(getValueFromCookie(SIDEBAR_COOKIE_NAME, defaultOpen));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.187",
+  "version": "0.0.190",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/src/components/Form/controls/primitive/BasicInput.d.ts

@@ -19,7 +19,6 @@ export declare const BasicInput: <Type extends InputType>({ className, inputClas
 export declare const BasicInputExtension: FC<PropsWithChildren<{
     className?: string;
     size: Size;
-    hasErrors?: boolean;
     disabled?: boolean;
     dataTestId?: string;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;

package/src/components/Form/controls/with-form.d.ts

@@ -8,6 +8,7 @@ export type WithFormProps<Type extends InputType | SelectInputType, Props = Type
     validate?: Type extends 'number' ? Validate<number, any> : Type extends DateTimeInputType ? Validate<Date, any> : Type extends SelectInputType ? Validate<any, any> : Validate<string, any>;
 } & Omit<Props, 'pattern' | keyof Omit<ControllerRenderProps, 'disabled' | 'ref'>>;
 export declare const FormInputs: {
+    BasicInput: FC<WithFormProps<InputType, BasicInputProps<InputType>>>;
     Text: FC<WithFormProps<"text", TextInputProps>>;
     Email: FC<WithFormProps<"email", EmailInputProps>>;
     Password: FC<WithFormProps<"password", PasswordInputProps>>;

package/src/components/Spinner/index.d.ts

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 type Props = {
     className?: string;
+    spinnerClassName?: string;
     fullScreen?: boolean;
     dataTestId?: string;
 };

package/src/components/types.d.ts

@@ -1,5 +1,5 @@
 export type Size = 'small' | 'medium';
-export type Color = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'fuchsia' | 'purple' | 'pink' | 'rose';
+export type Color = 'primary' | 'secondary' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'fuchsia' | 'purple' | 'pink' | 'rose';
 type NextDepth = {
     '1': never;
     '2': '1';