@cosxai/ui 0.2.0 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "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>
           )}

package/src/styles/chrome-swiss.css

@@ -75,7 +75,12 @@ html[data-ck-chrome="swiss"] .ck-btn--ghost:hover:not(:disabled) {
 
 /* ===== Inputs — bottom-border-only (canonical Swiss form) === */
 
-html[data-ck-chrome="swiss"] .ck-input,
+/* :not(.ck-input--with-addon) — when the input is inside a
+   prefix/suffix wrapper the wrapper carries the border + padding,
+   and stripping the input's own padding makes the placeholder
+   collide with the addon. The addon variant gets the swiss
+   underline only at the OUTER wrap level (rule further down). */
+html[data-ck-chrome="swiss"] .ck-input:not(.ck-input--with-addon),
 html[data-ck-chrome="swiss"] .ck-textarea {
   background: transparent !important;
   border: none !important;
@@ -86,7 +91,7 @@ html[data-ck-chrome="swiss"] .ck-textarea {
   color: var(--ck-text-primary);
   transition: border-bottom-color 120ms ease, border-bottom-width 120ms ease;
 }
-html[data-ck-chrome="swiss"] .ck-input:focus-visible,
+html[data-ck-chrome="swiss"] .ck-input:not(.ck-input--with-addon):focus-visible,
 html[data-ck-chrome="swiss"] .ck-textarea:focus-visible {
   outline: none;
   border-bottom-color: var(--ck-text-primary) !important;
@@ -94,6 +99,26 @@ html[data-ck-chrome="swiss"] .ck-textarea:focus-visible {
   box-shadow: none !important;
 }
 
+/* Addon variant — flatten the wrapper to the swiss underline-only
+   form so the whole field (input + addons) reads as one bar. The
+   inner .ck-input keeps its default padding; the wrap loses its
+   side / top borders and its corner radius. */
+html[data-ck-chrome="swiss"] .ck-input-addon-wrap {
+  border: none !important;
+  border-bottom: 1px solid var(--ck-border-subtle) !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+}
+html[data-ck-chrome="swiss"] .ck-input-addon-wrap:focus-within {
+  border-bottom-color: var(--ck-text-primary) !important;
+  border-bottom-width: 2px !important;
+}
+/* Recess the addon further so the slab still reads against the
+   underlined input column. */
+html[data-ck-chrome="swiss"] .ck-input-addon {
+  background: var(--ck-bg-muted) !important;
+}
+
 /* ===== Cards — rules-only sectioning ======================== */
 
 html[data-ck-chrome="swiss"] .ck-card {