torch-glare 2.5.3 → 2.5.5

package/apps/lib/components/FormRenderer/form-renderer.tsx

@@ -174,11 +174,22 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
   // and the rail still has room to be legible (a plain `minmax(0,…)` let it collapse to 0 in a
   // narrow preview frame). Past that floor the labels truncate instead of pushing.
   const bodyInner = isStepper ? (
-    <div className="grid w-full grid-cols-[minmax(180px,1fr)_minmax(0,1100px)_minmax(180px,1fr)] gap-8">
-      <StepperNav control={formInstance.control as Control<FieldValues>} />
-      {fieldsColumn}
-      {/* Empty third column — balances the rail's gutter so the middle column is centred. */}
-      <div />
+    // `@container` on the wrapper, not on the grid: an element cannot query its own size, so the
+    // measured box has to be an ancestor. It sits here rather than on the scroll body because
+    // `bodyInner` is also used directly when there is no header, and this way both paths get a
+    // container. The form then reacts to the width it is actually given — a rail, a drawer, a
+    // narrow preview frame — instead of the viewport's.
+    <div className="@container w-full">
+      {/* Below `@lg` the balancing column is dropped: it is empty, and in a narrow container its
+          180px floor plus a 32px gap is width the fields column needs more than the centring.
+          Both halves are required — a `display:none` child is not a grid item, but the third
+          track would still be reserved if the template kept describing it. */}
+      <div className="grid w-full grid-cols-[minmax(180px,1fr)_minmax(0,1100px)] gap-8 @lg:grid-cols-[minmax(180px,1fr)_minmax(0,1100px)_minmax(180px,1fr)]">
+        <StepperNav control={formInstance.control as Control<FieldValues>} />
+        {fieldsColumn}
+        {/* Empty third column — balances the rail's gutter so the middle column is centred. */}
+        <div className="hidden @lg:block" />
+      </div>
     </div>
   ) : (
     fieldsColumn

package/apps/lib/components/FormRenderer/stepper.tsx

@@ -10,7 +10,16 @@ import { Button } from "../Button";
 // stepper — the rail, the state, Back/Next — is chrome and lives here. The dependency only ever
 // points this way: FormRenderer → FormBuilder, never back.
 import { StepContext, type StepRegistry } from "../FormBuilder/context";
-import { FormStepper, FormStep, FormStepIndicator, FormStepLabel } from "../FormStepper";
+// Aliased: this module exports its own `Stepper` and `Step` (the wizard behaviour —
+// `FormRenderer.Stepper` / `.Step`), which would otherwise collide with the presentational
+// component of the same name.
+import {
+  Stepper as StepperRail,
+  Step as StepPill,
+  StepIndicator,
+  StepLabel,
+  StepConnector,
+} from "../Stepper";
 
 // ─── Stepper state context ───────────────────────────────────────────────────
 
@@ -116,7 +125,7 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
     // `min-w-0` so the rail can be squeezed: its grid track no longer grows to fit a long label
     // (see form-renderer.tsx), so the column has to be allowed to shrink and let the labels
     // truncate instead of spilling over the fields column.
-    <FormStepper activeStep={currentStep} className="min-w-0 shrink-0 flex-col items-start gap-[4px]">
+    <StepperRail activeStep={currentStep} orientation="vertical" className="min-w-0 shrink-0">
       {titles.map((title, index) => {
         // The step buttons ARE the navigation: click to move. Backward is free;
         // clicking forward validates the steps in between (goToStep) and stops at
@@ -129,11 +138,11 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
             : "default";
         return (
           <React.Fragment key={title}>
-            {/* The shrink/truncate pair is passed in rather than changed in `FormStepper`, so its
+            {/* The shrink/truncate pair is passed in rather than changed in `Stepper`, so its
                 other consumers keep sizing to their labels. `shrink` beats the pill's own
                 `shrink-0` and `truncate` beats the label's `whitespace-nowrap` — both via
-                tailwind-merge, which `FormStepper` runs the caller's className through. */}
-            <FormStep
+                tailwind-merge, which `Stepper` runs the caller's className through. */}
+            <StepPill
               index={index}
               type={type}
               onClick={() => void goToStep(index)}
@@ -142,20 +151,17 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
               // past the track instead of clipping inside it.
               className="min-w-0 max-w-full shrink"
             >
-              <FormStepIndicator />
-              <FormStepLabel className="truncate">{title}</FormStepLabel>
-            </FormStep>
-            {/* Connector between steps — a 3×16 rounded bar centred under the badge. */}
-            {index < titles.length - 1 && (
-              <div
-                aria-hidden
-                className="ms-[12.5px] mt-[2px] h-[16px] w-[3px] rounded-full bg-[#A0A0A0]"
-              />
-            )}
+              <StepIndicator />
+              {/* `max-w-none` opts out of the component's 106px cap: the rail sizes to its own
+                  grid track, so the label should truncate there rather than 106px early. */}
+              <StepLabel className="max-w-none truncate">{title}</StepLabel>
+            </StepPill>
+            {/* Connector between steps — the component centres it under the indicator per size. */}
+            {index < titles.length - 1 && <StepConnector />}
           </React.Fragment>
         );
       })}
-    </FormStepper>
+    </StepperRail>
   );
 }
 

package/apps/lib/components/HeaderBar.tsx

@@ -22,13 +22,18 @@ import { Themes } from "../utils/types";
  *            (renders plain "sales iNVOICE" on the LEFT, colored "de-344" on the RIGHT)
  */
 
-// Inner row: order is reversed for "detail" so the badge ends up on the right.
-const rowStyles = cva(["flex", "items-center"], {
+// 28px / weight 510 — the design's `Font/Size/Display/Medium`, which is exactly what this class
+// carries. Shared by the badge and the plain title so the two pieces cannot drift apart.
+const headerTextStyles = "typography-display-medium-medium uppercase [font-feature-settings:'cv05'_on]";
+
+// Colored pill holding `label`. 32px tall, 4px side padding, 8px radius — Figma `Header.Badge`.
+const badgeStyles = cva(["flex", "h-8", "items-center", "justify-center", "rounded-lg", "px-1"], {
   variants: {
     variant: {
-      new: "flex-row",
-      edit: "flex-row",
-      detail: "flex-row-reverse",
+      new: "bg-blue-sparkle-alpha-50",
+      edit: "bg-orange-alpha-50",
+      // `White Alpha/15`, not /30 — the detail chip is the faintest of the three.
+      detail: "bg-white-alpha-15",
     },
   },
   defaultVariants: {
@@ -36,49 +41,22 @@ const rowStyles = cva(["flex", "items-center"], {
   },
 });
 
-// Colored pill holding `label`.
-const badgeStyles = cva(
-  ["flex", "h-8", "items-center", "justify-center", "gap-2.5", "rounded-lg", "px-1"],
-  {
-    variants: {
-      variant: {
-        new: "bg-blue-sparkle-alpha-50",
-        edit: "bg-orange-alpha-50",
-        detail: "bg-white-alpha-30",
-      },
-    },
-    defaultVariants: {
-      variant: "new",
-    },
-  },
-);
-
 // Text inside the colored pill.
-const badgeTextStyles = cva(
-  [
-    "font-sans",
-    "text-[28px]",
-    "font-[510]",
-    "leading-normal",
-    "uppercase",
-    "[font-feature-settings:'cv05'_on]",
-  ],
-  {
-    variants: {
-      variant: {
-        new: "text-blue-sparkle-200",
-        edit: "text-orange-200",
-        detail: "text-white-00",
-      },
-    },
-    defaultVariants: {
-      variant: "new",
+const badgeTextStyles = cva([headerTextStyles], {
+  variants: {
+    variant: {
+      new: "text-blue-sparkle-200",
+      edit: "text-orange-200",
+      detail: "text-white-00",
     },
   },
-);
+  defaultVariants: {
+    variant: "new",
+  },
+});
 
 interface HeaderBarProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowStyles> {
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeStyles> {
   theme?: Themes;
   /** The colored emphasis pill text. */
   label: string;
@@ -88,25 +66,45 @@ interface HeaderBarProps
 
 const HeaderBar = forwardRef<HTMLDivElement, HeaderBarProps>(
   ({ variant = "new", label, title, theme, className, ...props }, ref) => {
+    const badge = (
+      <div className={cn(badgeStyles({ variant }))}>
+        <p className={cn(badgeTextStyles({ variant }))}>{label}</p>
+      </div>
+    );
+
+    // The plain title sits in its own 32px box with 6px side padding — that padding, not a row
+    // `gap`, is what separates it from the badge (matching the design's `padding` frame).
+    const plain = (
+      <div className="flex h-8 items-center justify-center px-1.5">
+        <p className={cn(headerTextStyles, "text-white-00")}>{title}</p>
+      </div>
+    );
+
     return (
       <div
         ref={ref}
         data-theme={theme}
         className={cn(
-          "inline-flex flex-col items-start rounded-[14px] border border-black-600 bg-black-1000 p-1.5 shadow-[0_0_32px_2px_rgba(0,0,0,0.05),0_0_32px_2px_rgba(0,0,0,0.05)]",
+          "inline-flex flex-col items-start overflow-hidden rounded-[14px] border border-black-600 bg-black-1000 p-1.5 shadow-[0_0_32px_2px_rgba(0,0,0,0.05),0_0_32px_2px_rgba(0,0,0,0.05)]",
           className,
         )}
         {...props}
       >
-        <div className={cn(rowStyles({ variant }))}>
-          <div className={cn(badgeStyles({ variant }))}>
-            <p className={cn(badgeTextStyles({ variant }))}>{label}</p>
-          </div>
-          <div className="flex h-8 items-center justify-center px-1.5">
-            <p className="font-sans text-[28px] font-[510] leading-normal uppercase text-white-00 [font-feature-settings:'cv05'_on]">
-              {title}
-            </p>
-          </div>
+        {/* `detail` genuinely swaps the two children rather than using `flex-row-reverse`. The
+            visual result is the same in LTR, but reversing the row would flip the pair the wrong
+            way under `dir="rtl"` and would read out of order to a screen reader. */}
+        <div className="flex items-center">
+          {variant === "detail" ? (
+            <>
+              {plain}
+              {badge}
+            </>
+          ) : (
+            <>
+              {badge}
+              {plain}
+            </>
+          )}
         </div>
       </div>
     );

package/apps/lib/components/Input.tsx

@@ -62,7 +62,16 @@ interface TrillingProps extends HTMLAttributes<HTMLDivElement> {
 }
 export const Trilling = ({ children, className, ...props }: TrillingProps) => {
   return (
-    <div {...props} className={cn("flex items-center justify-center h-full gap-1 py-1", className)}>
+    // `ps-1` mirrors the inner side of Figma's `EndField-Container` (`p-[4px]`), keeping the field's
+    // text clear of the end button instead of running straight into it.
+    //
+    // Logical, not physical: this slot flips to the left edge in RTL, so a `pl-1` would put the
+    // padding on the outside — measured as 0px of clearance and the button 8px from the edge
+    // instead of 4px. `padding-inline-start` follows the slot.
+    <div
+      {...props}
+      className={cn("flex items-center justify-center h-full gap-1 py-1 ps-1", className)}
+    >
       {children}
     </div>
   );
@@ -135,7 +144,10 @@ input:-webkit-autofill:active {
 
 export const GroupStyles = cva(
   [
-    "flex w-full min-w-0 px-1 justify-center items-center",
+    // 3px, not 4: Figma's `EndField-Container` is `p-[4px]` and its stroke sits *inside* that
+    // padding, so the end button lands 4px from the field's outer edge. CSS `border-box` adds the
+    // 1px border on top of the padding, so 4px here would render 5px. 1 + 3 = 4.
+    "flex w-full min-w-0 px-[3px] justify-center items-center",
     "typography-body-small-regular",
     "border",
     "transition-all duration-200 ease-in-out",
@@ -180,14 +192,17 @@ export const GroupStyles = cva(
           "[&_input]:text-white",
         ],
       },
+      // Radius per Figma's `radius/*` collection: S is `radius/lg` (8px) and M is `radius/xl`
+      // (12px) — a deliberate jump, not consecutive steps. This `Group` is the shared field root,
+      // so it is also what gives `InputField` and `InnerLabelField` their corners.
       size: {
         S: [
           "h-[30px] min-h-[30px]",
-          "rounded-[6px] [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]",
+          "rounded-radius-lg [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]",
         ],
         M: [
           "h-[40px] min-h-[40px]",
-          "rounded-[8px] [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]",
+          "rounded-radius-xl [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]",
         ],
       },
       error: {

package/apps/lib/components/InputField.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "../utils/cn";
-import { Tooltip, ToolTipSide } from "./Tooltip";
+import { ToolTipSide } from "./Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { ActionButton } from "./ActionButton";
 import { Themes } from "../utils/types";
@@ -13,8 +13,13 @@ export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size
   icon?: ReactNode; // to add left side icon if you pass it
   childrenSide?: ReactNode; // to add action button to the end of the input
   popoverChildren?: ReactNode; // to add drop down list if you pass it
-  errorMessage?: string; // to show tooltip component when error_message not null
+  /** Marks the field invalid: any non-undefined value turns on the negative border. */
+  errorMessage?: string;
   onTable?: boolean; // to change the border style of the component when it is on table
+  /**
+   * @deprecated Ignored. The error tooltip was removed — an invalid field is shown by its negative
+   * border alone. Kept so existing call sites keep compiling; it will go in a future major.
+   */
   toolTipSide?: ToolTipSide;
   theme?: Themes;
 }
@@ -29,6 +34,7 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
       errorMessage,
       onTable,
       variant = "PresentationStyle",
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op, destructured to keep it out of the {...props} spread
       toolTipSide,
       theme,
       className,
@@ -49,54 +55,47 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
     // TODO: make the user input visible when input is focused
     return (
       <Popover onOpenChange={setIsPopoverOpen}>
-        <Tooltip
-          theme={theme}
-          toolTipSide={toolTipSide}
-          open={errorMessage !== undefined}
-          text={errorMessage}
-        >
-          <PopoverTrigger ref={triggerRef} asChild>
-            <Group
-              error={errorMessage !== undefined}
-              onTable={onTable}
-              size={size}
-              variant={variant}
-              data-theme={theme}
+        <PopoverTrigger ref={triggerRef} asChild>
+          <Group
+            error={errorMessage !== undefined}
+            onTable={onTable}
+            size={size}
+            variant={variant}
+            data-theme={theme}
+            onFocus={(e) => {
+              setPopoverWidth(e.currentTarget.offsetWidth);
+              setIsPopoverOpen(!isPopoverOpen);
+              inputRef.current?.focus();
+            }}
+            className={className}
+          >
+            {icon && <Icon>{icon}</Icon>}
+            <Input
+              {...props}
               onFocus={(e) => {
-                setPopoverWidth(e.currentTarget.offsetWidth);
-                setIsPopoverOpen(!isPopoverOpen);
-                inputRef.current?.focus();
+                setIsPopoverOpen(true);
+                props.onFocus?.(e);
+              }}
+              onBlur={(e) => {
+                setIsPopoverOpen(false);
+                props.onBlur?.(e);
               }}
-              className={className}
-            >
-              {icon && <Icon>{icon}</Icon>}
-              <Input
-                {...props}
-                onFocus={(e) => {
-                  setIsPopoverOpen(true);
-                  props.onFocus?.(e);
-                }}
-                onBlur={(e) => {
-                  setIsPopoverOpen(false);
-                  props.onBlur?.(e);
-                }}
-                ref={inputRef}
-              />
+              ref={inputRef}
+            />
 
-              <Trilling>
-                {childrenSide}
-                {popoverChildren && (
-                  <PopoverActionButton
-                    size={size}
-                    variant={variant}
-                    isPopoverOpen={isPopoverOpen}
-                    disabled={props.disabled}
-                  />
-                )}
-              </Trilling>
-            </Group>
-          </PopoverTrigger>
-        </Tooltip>
+            <Trilling>
+              {childrenSide}
+              {popoverChildren && (
+                <PopoverActionButton
+                  size={size}
+                  variant={variant}
+                  isPopoverOpen={isPopoverOpen}
+                  disabled={props.disabled}
+                />
+              )}
+            </Trilling>
+          </Group>
+        </PopoverTrigger>
 
         {popoverChildren && !props.disabled && (
           <PopoverContent