@toteat-eng/ds-react 2026.7.23 → 2026.7.31

package/dist/components/ConfigRow/ConfigRow.d.ts

@@ -21,7 +21,29 @@ export interface ConfigRowProps {
     dimmed?: boolean;
     /** Bottom border separator. Defaults to `true`. */
     divider?: boolean;
+    /**
+     * Percentage of the row's available width given to the label column.
+     * Override only when a row genuinely needs a different measure (e.g. a very
+     * wide control), not to nudge one row.
+     *
+     * Sensible values are 1–99, but this is **not validated or clamped** — that
+     * is deliberate. An out-of-range literal like `150` renders a visibly
+     * degenerate row at author time, which is a louder and more useful failure
+     * than silently substituting a "reasonable" value the caller did not write.
+     * One exception worth knowing: `NaN` degrades *quietly* to content-sized
+     * columns rather than breaking visibly, because `NaN%` invalidates the whole
+     * `flex` shorthand.
+     *
+     * The control column always takes the remainder, so the two cannot drift
+     * out of sync. "Available width" is the row minus its column gap.
+     *
+     * **Defaults to 60 (a 60/40 split).** That default is NOT expressed here —
+     * omitting this prop emits no inline style at all, and the fallbacks in
+     * `ConfigRow.module.css` (`var(--ds-config-row-label-basis, 60%)` and its
+     * 40% control counterpart) are its single source of truth. Change it there.
+     */
+    labelRatio?: number;
     className?: string;
     "data-testid"?: string;
 }
-export declare function ConfigRow({ label, description, children, htmlFor, dimmed, divider, className, "data-testid": testId, }: ConfigRowProps): React.ReactElement;
+export declare function ConfigRow({ label, description, children, htmlFor, dimmed, divider, labelRatio, className, "data-testid": testId, }: ConfigRowProps): React.ReactElement;

package/dist/components/ConfigRow/__stories__/ConfigRow.stories.d.ts

@@ -10,4 +10,24 @@ export declare const HtmlForLinked: Story;
 export declare const Dimmed: Story;
 export declare const NoDivider: Story;
 export declare const MultipleRowsWithDividers: Story;
+/**
+ * The 60/40 column split, shown across MIXED control types — the case
+ * `MultipleRowsWithDividers` cannot show, because three Toggles are all the same
+ * width and align trivially.
+ *
+ * What to look for: the control column's LEFT edge is common to every row
+ * regardless of what the control is, and the long label wraps inside its 60%
+ * instead of squeezing the Select. Before the 60/40 split the control column was
+ * content-sized, so each row's boundary landed somewhere different.
+ */
+export declare const ColumnProportions: Story;
+/**
+ * `labelRatio` overrides the 60/40 default per row. The control column always
+ * takes the remainder, so the two halves cannot drift out of sync.
+ *
+ * Use this only when a row genuinely needs a different measure — a very wide
+ * control, or a label short enough that 60% is wasted. Nudging one row for taste
+ * breaks the vertical alignment the default exists to guarantee.
+ */
+export declare const CustomRatio: Story;
 export declare const BothThemes: Story;

package/dist/index.es.js

@@ -696,24 +696,28 @@ function Zn({ message: e, icon: t = "lock-password-1-outline", className: n, "da
 	});
 }
 var Qn = {
-	row: "_row_1ubkn_2",
-	labelCol: "_labelCol_1ubkn_31",
-	label: "_label_1ubkn_31",
-	description: "_description_1ubkn_46",
-	controlCol: "_controlCol_1ubkn_52"
+	row: "_row_1qgbi_14",
+	labelCol: "_labelCol_1qgbi_63",
+	label: "_label_1qgbi_63",
+	description: "_description_1qgbi_81",
+	controlCol: "_controlCol_1qgbi_87"
 };
 //#endregion
 //#region src/components/ConfigRow/ConfigRow.tsx
-function $n({ label: e, description: t, children: n, htmlFor: r, dimmed: i = !1, divider: a = !0, className: o, "data-testid": s }) {
-	let c = r ? "label" : "span";
+function $n({ label: e, description: t, children: n, htmlFor: r, dimmed: i = !1, divider: a = !0, labelRatio: o, className: s, "data-testid": c }) {
+	let l = r ? "label" : "span", u = o === void 0 ? void 0 : {
+		"--ds-config-row-label-basis": `${o}%`,
+		"--ds-config-row-control-basis": `${100 - o}%`
+	};
 	return /* @__PURE__ */ p("div", {
-		className: [Qn.row, o].filter(Boolean).join(" "),
+		className: [Qn.row, s].filter(Boolean).join(" "),
+		style: u,
 		"data-dimmed": i || void 0,
 		"data-divider": a || void 0,
-		"data-testid": s,
+		"data-testid": c,
 		children: [/* @__PURE__ */ p("div", {
 			className: Qn.labelCol,
-			children: [/* @__PURE__ */ f(c, {
+			children: [/* @__PURE__ */ f(l, {
 				htmlFor: r,
 				className: Qn.label,
 				children: e