@sarunyu/system-one 3.0.0 → 3.0.2

package/dist/index.js

@@ -2562,18 +2562,18 @@ const Input = forwardRef(function Input2({
   const isFocus = state === "focus";
   const isFilled = currentValue.length > 0;
   const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
-  const floatLabel = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
-  const filledValue = isDisabled ? "var(--disabled)" : "var(--foreground)";
-  const unitColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
+  const floatLabel = isDisabled ? "var(--disabled, #99a1af)" : "var(--muted-foreground, #6a7282)";
+  const filledValue = isDisabled ? "var(--disabled, #99a1af)" : "var(--foreground, #101828)";
+  const unitColor = isDisabled ? "var(--disabled, #99a1af)" : "var(--muted-foreground, #6a7282)";
   const borderInset = isFocus || isError ? "-1px" : "0px";
   const borderRad = isFocus || isError ? "9px" : "8px";
-  const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--destructive)" : isFocus ? "var(--primary-action)" : "var(--border)";
+  const borderColor = isDisabled ? "var(--border-disabled, rgba(0, 0, 0, 0.05))" : isError ? "var(--destructive, #e7000b)" : isFocus ? "var(--primary-action, #0a6ee7)" : "var(--border, rgba(0, 0, 0, 0.1))";
   const hasRight = Boolean(rightIcon) || Boolean(unit);
   const padding = isFilled ? "px-[14px] py-[6px]" : hasRight ? "px-[14px] py-[14px]" : "p-[14px]";
   const charCount = currentValue.length;
   const showBelow = isError || Boolean(helperText) || showCount;
   const leftText = isError ? errorMessage : helperText ?? "";
-  const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
+  const leftColor = isError ? "var(--destructive, #e7000b)" : "var(--muted-foreground, #6a7282)";
   const handleChange = (e) => {
     if (isDisabled) return;
     let next = e.target.value;
@@ -2593,7 +2593,7 @@ const Input = forwardRef(function Input2({
   };
   const containerFlex = isFilled ? !hasRight ? "flex-col items-start justify-center" : rightIcon ? "flex items-center gap-[8px]" : "flex items-end gap-[8px]" : cn("flex items-center", hasRight && "gap-[8px]");
   const inputCaretStyle = {
-    caretColor: "var(--caret-color)"
+    caretColor: "var(--caret-color, #1447e6)"
   };
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1 w-full", className), children: [
     /* @__PURE__ */ jsxs(
@@ -2641,7 +2641,7 @@ const Input = forwardRef(function Input2({
                         {
                           className: "text-xs leading-4",
                           style: {
-                            color: isDisabled ? "var(--disabled)" : "var(--error-dark)"
+                            color: isDisabled ? "var(--disabled, #99a1af)" : "var(--error-dark, #c10007)"
                           },
                           children: " *"
                         }
@@ -2671,7 +2671,7 @@ const Input = forwardRef(function Input2({
                     style: isFilled ? { ...inputStyleProp, color: filledValue, ...inputCaretStyle } : {
                       ...inputStyleProp,
                       color: "transparent",
-                      caretColor: isFocus ? "var(--caret-color)" : "transparent",
+                      caretColor: isFocus ? "var(--caret-color, #1447e6)" : "transparent",
                       padding: hasRight ? "12px 14px" : "14px"
                     }
                   }
@@ -2714,7 +2714,7 @@ const Input = forwardRef(function Input2({
         "span",
         {
           className: "shrink-0 text-right whitespace-nowrap",
-          style: { color: "var(--muted-foreground)" },
+          style: { color: "var(--muted-foreground, #6a7282)" },
           children: [
             charCount,
             "/",
@@ -3076,7 +3076,7 @@ const sizeStyles = {
   },
   small: {
     container: "px-1 py-0.5",
-    text: "text-xxs leading-3",
+    text: "text-[9px] leading-3",
     closeIcon: "h-3.5 w-3.5",
     closeButton: "h-3.5 w-3.5"
   }