@sarunyu/system-one 4.8.3 → 4.9.0

package/dist/index.js

@@ -475,7 +475,7 @@ const tagConfig = {
   },
   full: {
     bg: "var(--error-bg)",
-    text: "var(--destructive)",
+    text: "var(--bg-danger-primary)",
     label: "เต็มแล้ว",
     Icon: XCircle
   }
@@ -580,7 +580,7 @@ const Card = forwardRef(function Card2({
                   ),
                   style: {
                     backgroundColor: t.bg ?? "var(--disabled-bg)",
-                    color: t.text ?? "var(--foreground)"
+                    color: t.text ?? "var(--text-default-primary)"
                   },
                   children: t.label
                 },
@@ -2128,7 +2128,7 @@ function DateScrollColumn({
                   style: {
                     fontSize: isSel ? 32 : 14,
                     lineHeight: 1,
-                    color: isSel ? "var(--foreground)" : "var(--disabled)",
+                    color: isSel ? "var(--text-default-primary)" : "var(--disabled)",
                     transition: "font-size 0.1s, color 0.1s",
                     whiteSpace: "nowrap"
                   },
@@ -2272,14 +2272,14 @@ const DateInput = forwardRef(
     const isFilled = mode === "single" ? Boolean(currentDate) : Boolean(currentRange == null ? void 0 : currentRange.from);
     const bgClass = isDisabled ? "bg-disabled-bg" : "bg-background";
     const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
-    const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const valueColor = isDisabled ? "var(--disabled)" : "var(--text-default-primary)";
     const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
-    const minusColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const minusColor = isDisabled ? "var(--disabled)" : "var(--text-default-primary)";
     const asteriskColorEmpty = isDisabled ? "var(--disabled)" : "var(--error-dark)";
     const asteriskColorFilled = isDisabled ? "var(--disabled)" : "var(--error-dark)";
     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)" : isError ? "var(--bg-danger-primary)" : isFocus ? "var(--primary-action)" : "var(--border-default)";
     const showBelow = isError || Boolean(helperText);
     const leftText = isError ? errorMessage : helperText ?? "";
     const leftColor = isError ? "var(--error-dark)" : "var(--muted-foreground)";
@@ -2568,7 +2568,7 @@ const DateInput = forwardRef(
                     className: "z-50 rounded-[8px] bg-popover p-3 outline-none text-popover-foreground",
                     style: {
                       boxShadow: "var(--elevation-popover)",
-                      border: "1px solid var(--border)"
+                      border: "1px solid var(--border-default)"
                     },
                     onOpenAutoFocus: (e) => e.preventDefault(),
                     children: [
@@ -2616,7 +2616,7 @@ const Dropdown = forwardRef(
     const isFocus = state === "focus";
     const bg = isDisabled ? "bg-disabled-bg" : "bg-background";
     const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
-    const filledColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const filledColor = isDisabled ? "var(--disabled)" : "var(--text-default-primary)";
     const caretClassName = isDisabled ? "text-disabled" : "text-muted-foreground";
     const hasExternalLabel = Boolean(label);
     const borderInset = isFocus || isError ? "-1px" : "0px";
@@ -2624,7 +2624,7 @@ const Dropdown = forwardRef(
     const borderColor = isDisabled ? "var(--border-disabled)" : isError ? "var(--border-danger)" : isFocus ? "var(--primary-action)" : "var(--border-default)";
     const showBelow = isError || Boolean(helperText);
     const leftText = isError ? errorMessage : helperText ?? "";
-    const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
+    const leftColor = isError ? "var(--bg-danger-primary)" : "var(--muted-foreground)";
     const filteredOptions = search.trim() ? options.filter(
       (o) => o.label.toLowerCase().includes(search.trim().toLowerCase())
     ) : options;
@@ -2763,7 +2763,7 @@ const Dropdown = forwardRef(
                         placeholder: placeholder + (required ? " *" : ""),
                         className: "flex-1 min-w-0 min-h-[1px] text-base leading-5 not-italic bg-transparent outline-none border-none p-0 m-0 placeholder:text-muted-foreground",
                         style: {
-                          color: "var(--foreground)",
+                          color: "var(--text-default-primary)",
                           caretColor: "var(--caret-color)"
                         },
                         onClick: (e) => e.stopPropagation()
@@ -3075,10 +3075,10 @@ const DropdownMultiple = forwardRef(
     const caretColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     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)" : isError ? "var(--bg-danger-primary)" : isFocus ? "var(--primary-action)" : "var(--border-default)";
     const showBelow = isError || Boolean(helperText);
     const leftText = isError ? errorMessage : helperText ?? "";
-    const leftColor = isError ? "var(--destructive)" : "var(--muted-foreground)";
+    const leftColor = isError ? "var(--bg-danger-primary)" : "var(--muted-foreground)";
     const selectedOptions = useMemo(
       () => currentValue.map((v) => options.find((o) => o.value === v)).filter(Boolean),
       [currentValue, options]
@@ -3293,7 +3293,7 @@ const DropdownMultiple = forwardRef(
                     onKeyDown: handleInputKeyDown,
                     className: "flex-1 min-w-[40px] outline-none border-none bg-transparent text-[14px] leading-[20px]",
                     style: {
-                      color: "var(--foreground)",
+                      color: "var(--text-default-primary)",
                       caretColor: "var(--caret-color)"
                     },
                     onClick: (e) => e.stopPropagation()
@@ -3315,7 +3315,7 @@ const DropdownMultiple = forwardRef(
             onKeyDown: handleInputKeyDown,
             className: "flex-1 min-w-[40px] outline-none border-none bg-transparent text-[14px] leading-[20px]",
             style: {
-              color: "var(--foreground)",
+              color: "var(--text-default-primary)",
               caretColor: "var(--caret-color)"
             },
             onClick: (e) => e.stopPropagation()
@@ -3497,7 +3497,7 @@ const Input = forwardRef(function Input2({
   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 filledValue = isDisabled ? "var(--disabled)" : "var(--text-default-primary)";
   const unitColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
   const borderInset = isFocus || isError ? "-1px" : "0px";
   const borderRad = isFocus || isError ? "9px" : "8px";
@@ -3507,7 +3507,7 @@ const Input = forwardRef(function Input2({
   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(--bg-danger-primary)" : "var(--muted-foreground)";
   const handleChange = (e) => {
     if (isDisabled) return;
     let next = e.target.value;
@@ -4302,7 +4302,7 @@ const OptionList = forwardRef(
                   {
                     className: "min-h-[1px] min-w-0 flex-1 overflow-hidden text-sm leading-5 text-ellipsis whitespace-nowrap not-italic",
                     style: {
-                      color: disabled ? "var(--disabled)" : "var(--foreground)"
+                      color: disabled ? "var(--disabled)" : "var(--text-default-primary)"
                     },
                     children: opt.label
                   }
@@ -4345,7 +4345,7 @@ const SearchInput = forwardRef(
     const padding = size === "sm" ? "px-3.5 py-2" : "px-3.5 py-3";
     const borderInset = focused ? "-1px" : "0px";
     const borderRad = focused ? "9px" : "8px";
-    const borderColor = focused ? "var(--primary-action)" : "var(--border)";
+    const borderColor = focused ? "var(--primary-action)" : "var(--border-default)";
     const handleChange = (next) => {
       if (!controlled) setInternalValue(next);
       onChange == null ? void 0 : onChange(next);
@@ -4413,7 +4413,7 @@ const SearchInput = forwardRef(
                 onBlur: () => setFocused(false),
                 className: "m-0 w-full border-none bg-transparent p-0 text-base leading-5 outline-none",
                 style: {
-                  color: isFilled ? "var(--foreground)" : "transparent",
+                  color: isFilled ? "var(--text-default-primary)" : "transparent",
                   caretColor: "var(--caret-color)"
                 }
               }
@@ -5073,14 +5073,14 @@ const TextArea = forwardRef(
     const isFocus = state === "focus";
     const isFilled = currentValue.length > 0;
     const floatLabel = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
-    const filledValue = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const filledValue = isDisabled ? "var(--disabled)" : "var(--text-default-primary)";
     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)" : isError ? "var(--bg-danger-primary)" : isFocus ? "var(--primary-action)" : "var(--border-default)";
     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(--bg-danger-primary)" : "var(--muted-foreground)";
     const countColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const handleChange = (e) => {
       let newValue = e.target.value;
@@ -5356,7 +5356,7 @@ function ScrollColumn({
                   style: {
                     fontSize: isSel ? 32 : 14,
                     lineHeight: 1,
-                    color: isSel ? "var(--foreground)" : "var(--disabled)",
+                    color: isSel ? "var(--text-default-primary)" : "var(--disabled)",
                     transition: "font-size 0.1s, color 0.1s"
                   },
                   children: pad2(item)
@@ -5409,7 +5409,7 @@ function RangeSlotPicker({
                     className: "leading-[22px] relative shrink-0 text-[14px] text-center whitespace-nowrap",
                     style: {
                       fontVariationSettings: "'wdth' 100",
-                      color: isSelected ? "var(--on-primary-action)" : "var(--foreground)"
+                      color: isSelected ? "var(--on-primary-action)" : "var(--text-default-primary)"
                     },
                     children: slot.label
                   }
@@ -5485,7 +5485,7 @@ function TimePickerContent({
                   style: {
                     fontSize: 32,
                     lineHeight: 1,
-                    color: "var(--foreground)"
+                    color: "var(--text-default-primary)"
                   },
                   children: ":"
                 }
@@ -5555,14 +5555,14 @@ const TimeInput = forwardRef(
     const isFilled = mode === "single" ? Boolean(currentValue) : true;
     const bgClass = isDisabled ? "bg-disabled-bg" : "bg-background";
     const labelColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
-    const valueColor = isDisabled ? "var(--disabled)" : "var(--foreground)";
+    const valueColor = isDisabled ? "var(--disabled)" : "var(--text-default-primary)";
     const iconColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const minusColor = isDisabled ? "var(--disabled)" : "var(--muted-foreground)";
     const asteriskColor = isDisabled ? "var(--disabled)" : "var(--error-dark)";
     const asteriskSmall = isDisabled ? "var(--disabled)" : "var(--error-dark)";
     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)" : isError ? "var(--bg-danger-primary)" : isFocus ? "var(--primary-action)" : "var(--border-default)";
     const showBelow = isError || Boolean(helperText);
     const leftText = isError ? errorMessage : helperText ?? "";
     const leftColor = isError ? "var(--error-dark)" : "var(--muted-foreground)";
@@ -5850,7 +5850,7 @@ const TimeInput = forwardRef(
                     className: "z-50 rounded-[8px] bg-popover p-3 outline-none max-w-[340px] text-popover-foreground",
                     style: {
                       boxShadow: "var(--elevation-popover)",
-                      border: "1px solid var(--border)",
+                      border: "1px solid var(--border-default)",
                       minWidth: mode === "single" ? 327 : void 0
                     },
                     onOpenAutoFocus: (e) => e.preventDefault(),