@uxf/ui 1.0.0-beta.63 → 1.0.0-beta.65

package/checkbox/checkbox.js

@@ -14,9 +14,10 @@ function CheckIcon() {
         react_2.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
 }
 exports.Checkbox = (0, forwardRef_1.forwardRef)("Checkbox", (props, ref) => {
+    var _a;
     return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: "uxf-checkbox__wrapper" },
-            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, "uxf-checkbox", props.className), disabled: props.isDisabled, onChange: props.onChange, ref: ref, style: props.style },
+        react_2.default.createElement("div", { className: `uxf-checkbox__wrapper ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, "uxf-checkbox"), disabled: props.isDisabled, onChange: props.onChange, ref: ref, style: props.style },
                 react_2.default.createElement("span", { className: "uxf-checkbox__icon" },
                     react_2.default.createElement(CheckIcon, null))),
             react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox__label" }, props.label))));

package/css/button.css

@@ -5,7 +5,7 @@
 }
 
 .uxf-button {
-    @apply inline-flex items-center justify-center shrink-0 text-center rounded-lg before:rounded-lg font-semibold
+    @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition before:transition;
 
     &__text {

package/css/checkbox.css

@@ -3,7 +3,7 @@
     focus-visible:ring-offset-2 focus-visible:ring-2;
 
     &__wrapper {
-        @apply flex items-center justify-between space-x-2 p-4;
+        @apply flex items-center justify-between space-x-3;
     }
 
     &__label {

package/css/input.css

@@ -159,4 +159,17 @@
             }
         }
     }
+
+    :root .dark & {
+        input:-webkit-autofill {
+            &,
+            &:hover,
+            &:focus {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                caret-color: white;
+                margin: 1px 0;
+                -webkit-text-fill-color: theme("colors.gray.300");
+            }
+        }
+    }
 }

package/css/textarea.css

@@ -12,7 +12,7 @@
     }
 
     &__element {
-        @apply bg-transparent outline-none resize-none;
+        @apply bg-transparent outline-none resize-none w-full;
 
         :root .light & {
             @apply placeholder:text-gray-400;
@@ -86,13 +86,26 @@
 
             .uxf-textarea__element {
                 :root .light & {
-                    @apply text-error-500 placeholder:text-error-500;
+                    @apply text-error-500;
                 }
                 :root .dark & {
-                    @apply text-error-500 placeholder:text-error-500;
+                    @apply text-error-500;
                 }
             }
         }
     }
+
+    :root .dark & {
+        input:-webkit-autofill {
+            &,
+            &:hover,
+            &:focus {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                caret-color: white;
+                margin: 1px 0;
+                -webkit-text-fill-color: theme("colors.gray.300");
+            }
+        }
+    }
 }
 

package/css/toggle.css

@@ -10,11 +10,11 @@
         @apply w-full;
 
         :root .light & {
-            @apply text-gray-600;
+            @apply text-lightMedium;
         }
 
         :root .dark & {
-            @apply text-gray-400;
+            @apply text-darkMedium;
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.63",
+  "version": "1.0.0-beta.65",
   "description": "",
   "publishConfig": {
     "access": "public"

package/utils/tailwind-config.js

@@ -32,6 +32,12 @@ module.exports = {
             },
             colors: {
                 inherit: "inherit",
+                lightHigh: "#111827",
+                lightMedium: "#4B5563",
+                lightLow: "#9CA3AF",
+                darkHigh: "#ffffff",
+                darkMedium: "#ffffffcc",
+                darkLow: "#ffffff80",
                 primary: {
                     50: "#eff6ff",
                     100: "#dbeafe",