@lerianstudio/sindarian-ui 2.0.0-beta.10 → 2.0.0-beta.11

package/dist/components/ui/input/styles.css

@@ -13,7 +13,7 @@
 
 @layer components {
   .input-wrapper {
-    @apply h-input-wrapper-h border-input-border p-input-wrapper-p relative flex w-full cursor-text items-center rounded-md border transition-[color,box-shadow];
+    @apply h-input-wrapper-h border-input-border p-input-wrapper-p relative flex w-full min-w-0 cursor-text items-center rounded-md border transition-[color,box-shadow];
   }
 
   .input-wrapper-focus {
@@ -29,35 +29,79 @@
      the text jumped the moment you typed; font-medium gave the hint the same
      presence as the label naming the field.
 
-     `w-0` is what lets the input shrink, and it pairs with `flex-1` rather
-     than fighting it: `flex-1` is `flex: 1 1 0%`, so the flex base size comes
-     from the basis and the input still grows back to fill its wrapper. What
-     `w-0` changes is the floor. A flex item never shrinks below its automatic
-     minimum size, and with no declared width that minimum falls back to the
-     control's own intrinsic size — 239px for a default `<input>`. Declaring a
-     width gives the flex algorithm a specified size to use instead, and 0 is
-     the only value that never floors anything.
-
-     `min-w-0` is NOT the fix here and was measured failing: it lowers this
-     input's own floor, but the automatic minimum of an ANCESTOR flex item is
-     computed from this control's min-content contribution, which `min-width`
-     does not lower. A consumer's own `flex-1` column around the field would
-     still refuse to shrink.
-
-     There is deliberately NO min-width floor either, and that was measured
+     THE CONTRACT, and all three halves of it are measured. A field keeps its
+     natural width: nothing here declares one, so the control contributes its
+     own intrinsic size and a box sized BY ITS CONTENT — a search box in a
+     `flex gap-4` filter bar — comes out as a field. A field fills its box
+     instead of overrunning it: `min-w-0` on both boxes drops the automatic
+     minimum that used to hold the control at 239px inside a narrower wrapper,
+     down to the one width it cannot go under. That floor is arithmetic rather
+     than policy — `px-input-px` is 16px a side and the box sizing is
+     border-box, so the control is 32px wide carrying nothing at all — and a
+     box narrower than that gets the difference painted outside it. Measured at
+     23px on the console's template-builder header, whose `w-48` wrapper is
+     squeezed to 18px and which the console repairs with `shrink-0` on that
+     wrapper. This package's own `SheetContent side="right"` runs the same
+     arithmetic one step earlier: at a 390px viewport `w-2/5 p-12` leaves a
+     59px panel, and the field comes out 41px wide with 9px of text — unusable,
+     but inside its box, where 2.0.0-beta.9 painted 189px of it across the
+     panel edge. A row that must compress says so on its own flex item, with
+     `min-w-0`, and that one token now works.
+
+     Why no declared width, measured rather than assumed. A declared width
+     replaces the control's max-content contribution as well as its min-content
+     one, because an `<input>` does not wrap and has only the one intrinsic
+     size. `w-0` shipped in 2.0.0-beta.10 and bought a narrow row's compression
+     by giving that up: five product-console screens rendered an empty 32px
+     chip at every viewport, and a sixth — the template builder's name field —
+     did at 390px while keeping 142px of text at 1440px, all of them wrappers
+     that had been handed 0px to be as wide as.
+     `w-full` buys the same compression without the chip — a percentage
+     contributes max-content but zero min-content — and it was the runner-up
+     here. It loses on the same filter bar at 390px, where the control is not
+     merely sized by its content but squeezed, and it disappears rather than
+     letting the bar scroll. Seventeen rule sets were measured against
+     seventeen fixtures; none closes all of them.
+
+     What this one leaves open is `two-up-200`: two fields in a caller's
+     `flex-1` columns inside a 200px row, which now overflows by 138px instead
+     of compressing. The caller's one token closes it — `min-w-0` on its own
+     column, measured at 78px and fitting — and the fixture beside it,
+     `two-up-200-caller-min-w-0`, is the guard that keeps that hatch working.
+     On 2.0.0-beta.9 the hatch did NOT work: the same row overflowed by 48px
+     and the control painted 152px across its neighbour, because the control
+     floored at its intrinsic size inside the column that had just agreed to
+     compress. That is the difference this rule set makes.
+
+     `min-width` reaches exactly one box: the one it is declared on. It does
+     not lower an ancestor's automatic minimum and it does not lower a
+     descendant's — the sentence this comment carried before the fix said so
+     and was right. Nothing above contradicts it: the rule works because BOTH
+     boxes declare their own, the control's on `.input-base` and the wrapper's
+     on `.input-wrapper`, and neither half works alone. Measured: the wrapper's
+     alone fails eleven fixtures (`--candidate=wrapper-only-auto`), the
+     control's alone fails four (`--candidate=auto-min-w-0`). It is also why
+     `two-up-200` stays open above. The caller's `flex-1` column is a third
+     box, no declaration in this package reaches it, and only the caller's own
+     `min-w-0` lowers it — which is why that row still overflows by 138px.
+
+     There is deliberately NO positive min-width floor, and that was measured
      too. A floor here cannot reach the sites that want one: a consumer
      writing `.input-base` by hand tends to add its own `min-w-0`, which is a
      `utilities`-layer class and outranks anything this `components`-layer rule
      set declares. With `min-w-16` added here, the same fixture read 64px wide
      without that hand-written `min-w-0` and 32px with it. The floor also cost
      ground elsewhere: two inputs sharing a 120px row went from fitting to
-     overflowing by 52px. A caller whose field must hold its width says so on
-     its own wrapper, with `shrink-0`.
+     overflowing by 52px, and a floor small enough to survive that row still
+     left a squeezed filter bar at 32px of content. A caller whose field must
+     hold its width says so on its own wrapper, with `shrink-0`.
 
      `scripts/measure-input-shrink.mjs` carries the fixtures and the numbers;
-     run it when touching this rule set. */
+     run it when touching this rule set, and `--candidate=ID` re-measures any
+     of the seventeen, or `shipped` for this one, before re-opening the
+     trade. */
   .input-base {
-    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 w-0 flex-1 border-none bg-transparent outline-none focus:ring-0 focus:ring-offset-0;
+    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 min-w-0 flex-1 border-none bg-transparent outline-none focus:ring-0 focus:ring-offset-0;
   }
 
   .input-disabled {

package/dist/enterprise/number-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/number-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,+EAA+E;IAC/E,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAmED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgBpE;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAMxE;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACpC,EAAE,gBAAgB,qBAgJlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/enterprise/number-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,+EAA+E;IAC/E,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAmED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgBpE;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAMxE;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACpC,EAAE,gBAAgB,qBA2JlB"}

package/dist/enterprise/number-input/index.js

@@ -248,5 +248,5 @@ function NumberInput({ value, onValueChange, min, max, step = 1, precision, loca
     };
     const atMin = typeof min === 'number' && value !== null && value <= min;
     const atMax = typeof max === 'number' && value !== null && value >= max;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('inline-flex items-stretch gap-1', className), children: [(0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", disabled: disabled || atMin, "aria-label": `Decrease${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(-1), tabIndex: -1, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-28", children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: id, inputMode: "decimal", role: "spinbutton", "aria-valuenow": value ?? undefined, "aria-valuemin": min, "aria-valuemax": max, className: "text-right tabular-nums", value: displayValue, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }) }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", disabled: disabled || atMax, "aria-label": `Increase${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(1), tabIndex: -1, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "size-4", "aria-hidden": true }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('inline-flex items-stretch gap-1', className), children: [(0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { className: "shrink-0", type: "button", variant: "outline", disabled: disabled || atMin, "aria-label": `Decrease${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(-1), tabIndex: -1, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-28 min-w-0", children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: id, inputMode: "decimal", role: "spinbutton", "aria-valuenow": value ?? undefined, "aria-valuemin": min, "aria-valuemax": max, className: "text-right tabular-nums", value: displayValue, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }) }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { className: "shrink-0", type: "button", variant: "outline", disabled: disabled || atMax, "aria-label": `Increase${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(1), tabIndex: -1, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "size-4", "aria-hidden": true }) })] }));
 }

package/dist/esm/enterprise/number-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/number-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,+EAA+E;IAC/E,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAmED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgBpE;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAMxE;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACpC,EAAE,gBAAgB,qBAgJlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/enterprise/number-input/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,+EAA+E;IAC/E,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAmED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgBpE;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAMxE;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACpC,EAAE,gBAAgB,qBA2JlB"}

package/dist/esm/enterprise/number-input/index.js

@@ -210,5 +210,5 @@ export function NumberInput({ value, onValueChange, min, max, step = 1, precisio
     };
     const atMin = typeof min === 'number' && value !== null && value <= min;
     const atMax = typeof max === 'number' && value !== null && value >= max;
-    return (_jsxs("div", { className: cn('inline-flex items-stretch gap-1', className), children: [_jsx(IconButton, { type: "button", variant: "outline", disabled: disabled || atMin, "aria-label": `Decrease${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(-1), tabIndex: -1, children: _jsx(Minus, { className: "size-4", "aria-hidden": true }) }), _jsx("div", { className: "w-28", children: _jsx(Input, { id: id, inputMode: "decimal", role: "spinbutton", "aria-valuenow": value ?? undefined, "aria-valuemin": min, "aria-valuemax": max, className: "text-right tabular-nums", value: displayValue, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }) }), _jsx(IconButton, { type: "button", variant: "outline", disabled: disabled || atMax, "aria-label": `Increase${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(1), tabIndex: -1, children: _jsx(Plus, { className: "size-4", "aria-hidden": true }) })] }));
+    return (_jsxs("div", { className: cn('inline-flex items-stretch gap-1', className), children: [_jsx(IconButton, { className: "shrink-0", type: "button", variant: "outline", disabled: disabled || atMin, "aria-label": `Decrease${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(-1), tabIndex: -1, children: _jsx(Minus, { className: "size-4", "aria-hidden": true }) }), _jsx("div", { className: "w-28 min-w-0", children: _jsx(Input, { id: id, inputMode: "decimal", role: "spinbutton", "aria-valuenow": value ?? undefined, "aria-valuemin": min, "aria-valuemax": max, className: "text-right tabular-nums", value: displayValue, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }) }), _jsx(IconButton, { className: "shrink-0", type: "button", variant: "outline", disabled: disabled || atMax, "aria-label": `Increase${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => stepBy(1), tabIndex: -1, children: _jsx(Plus, { className: "size-4", "aria-hidden": true }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {