@cosxai/ui 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/Input.tsx

@@ -38,10 +38,15 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 const ADDON_STYLE = {
   display: "inline-flex",
   alignItems: "center",
-  padding: "0 10px",
+  padding: "0 12px",
   font: "400 13px/1 var(--ck-font-mono, var(--ck-font-sans))",
-  color: "var(--ck-text-tertiary)",
-  background: "var(--ck-bg-subtle, transparent)",
+  color: "var(--ck-text-secondary)",
+  // `--ck-bg-muted` is the canonical "slightly recessed slab"
+  // background — gives the addon visible separation from the input
+  // (`--ck-bg-surface`) without needing a hard divider line. The
+  // bg shift carries across all chromes; tokens.css defines a
+  // muted tone per chrome (light + dark).
+  background: "var(--ck-bg-muted)",
   whiteSpace: "nowrap" as const,
   userSelect: "none" as const,
 };
@@ -71,7 +76,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       style={{
         flex: hasAddon ? "1 1 auto" : undefined,
         minWidth: 0,
-        height: hasAddon ? "100%" : 34,
+        height: hasAddon ? "100%" : 36,
         padding: "0 12px",
         font: "400 13px/1 var(--ck-font-sans)",
         background: "var(--ck-bg-surface)",
@@ -110,7 +115,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           style={{
             display: "flex",
             alignItems: "stretch",
-            height: 34,
+            height: 36,
             background: "var(--ck-bg-surface)",
             border: fieldBorder,
             borderRadius: fieldRadius,
@@ -118,25 +123,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           }}
         >
           {prefix != null && (
-            <span
-              className="ck-input-addon ck-input-addon--prefix"
-              style={{
-                ...ADDON_STYLE,
-                borderRight: "1px solid var(--ck-border-subtle)",
-              }}
-            >
+            <span className="ck-input-addon ck-input-addon--prefix" style={ADDON_STYLE}>
               {prefix}
             </span>
           )}
           {inputEl}
           {suffix != null && (
-            <span
-              className="ck-input-addon ck-input-addon--suffix"
-              style={{
-                ...ADDON_STYLE,
-                borderLeft: "1px solid var(--ck-border-subtle)",
-              }}
-            >
+            <span className="ck-input-addon ck-input-addon--suffix" style={ADDON_STYLE}>
               {suffix}
             </span>
           )}