torch-glare 2.5.3 → 2.5.4

package/apps/lib/components/ActionButton.tsx

@@ -4,12 +4,24 @@ import { Button } from "./Button";
 import { cn } from "../utils/cn";
 import { ButtonVariant, Themes } from "../utils/types";
 
-const buttonVariants = cva("!rounded-[4px]", {
+/**
+ * The button that sits at the end of an input field — Figma `ActionButton` (Type=DropDown).
+ *
+ * Sizes are Figma's exactly: Xs 18, S 22, M 32, with `radius/sm` on the two small ones and
+ * `radius/lg` on M.
+ *
+ * The `!` on the radius is load-bearing. `twMerge` does not dedupe `rounded-radius-*` — they are
+ * custom scale keys, not values it recognises — so this radius and the one coming from `Button`'s
+ * own `size` variant both survive, and CSS source order picks the winner. Tailwind emits the scale
+ * in config order (sm before md before lg), so without `!` size S would render Button M's 6px
+ * instead of its own 4px.
+ */
+const buttonVariants = cva("", {
   variants: {
     size: {
-      XS: "h-[18px] w-[18px] text-[12px]",
-      S: "h-[22px] w-[22px] text-[12px]",
-      M: "h-[32px] w-[32px] text-[18px]",
+      XS: "h-[18px] w-[18px] text-[12px] !rounded-radius-sm",
+      S: "h-[22px] w-[22px] text-[12px] !rounded-radius-sm",
+      M: "h-[32px] w-[32px] text-[18px] !rounded-radius-lg",
     },
   },
   defaultVariants: {
@@ -17,6 +29,23 @@ const buttonVariants = cva("!rounded-[4px]", {
   },
 });
 
+/**
+ * Default/hover/disabled colours as Figma binds them. Applied only when the caller passes no
+ * `variant`, so anything asking for a specific Button variant still gets it.
+ *
+ * `action-secondary` and `action-disabled` already match `Button`'s `PrimeStyle` equivalents; the
+ * real difference is hover, where `PrimeStyle` uses `button-hover` and the design uses
+ * `action-hover`.
+ */
+const actionTokens = [
+  "bg-background-presentation-action-secondary",
+  "text-content-presentation-action-light-primary",
+  "hover:bg-background-presentation-action-hover",
+  "hover:text-content-presentation-global-hover",
+  "disabled:bg-background-presentation-action-disabled",
+  "disabled:text-content-presentation-state-disabled",
+];
+
 interface Props
   extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   is_loading?: boolean;
@@ -29,7 +58,6 @@ interface Props
 export const ActionButton = function ({
   size,
   asChild,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
   as: Tag = "button",
   className,
   variant,
@@ -42,14 +70,19 @@ export const ActionButton = function ({
     <Button
       theme={theme}
       asChild={asChild}
+      // Forwarded, not swallowed: the chevron inside a field renders `as="span"` because it is
+      // nested in a clickable trigger, and a <button> cannot contain a <button>.
+      as={Tag}
       buttonType="icon"
-      type={type}
+      // `type` is only meaningful on a real button; on a span it would be an invalid attribute.
+      type={Tag === "button" ? type : undefined}
       size={size == "XS" ? "S" : size == "S" ? "M" : size == "M" ? "L" : "S"}
       variant={variant}
       className={cn(
         buttonVariants({
           size,
         }),
+        !variant && actionTokens,
         className,
       )}
       {...props}

package/apps/lib/components/Badge.tsx

@@ -118,7 +118,10 @@ const subtleCompoundVariants = [
 export const badgeStyles = cva(
   [
     "inline-flex items-center justify-center w-fit",
-    "rounded-[6px]",
+    // `radius/md` (6px), read off the Badge master component in Figma. Note the badge instances
+    // nested inside InnerLabelField render at `radius/lg` — that is an instance override, not the
+    // component's own value, and reading it as the spec is how this briefly shipped as 8px.
+    "rounded-radius-md",
     "transition-all duration-200 ease-in-out",
     "whitespace-nowrap",
     "[&_i]:!leading-none",
@@ -215,7 +218,7 @@ export const Badge: React.FC<BadgeProps> = ({
             }
           }}
           className={cn(
-            "rounded-[4px]",
+            "rounded-radius-sm",
             "flex items-center justify-center cursor-pointer",
             "hover:bg-background-presentation-action-secondary",
             "transition-colors duration-150",

package/apps/lib/components/BadgeField.tsx

@@ -222,7 +222,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                           fill="black"
                         />
                       </svg>
-                      <p className="text-black-1000 text-right text-[12px] font-[510] leading-[148%]">
+                      <p className="text-black-1000 text-end text-[12px] font-[510] leading-[148%]">
                         {addLabel}
                       </p>
                     </div>

package/apps/lib/components/Button.tsx

@@ -248,10 +248,10 @@ export const buttonVariants = cva(
         ],
       },
       size: {
-        S: "h-[22px] py-[2px] px-[6px] typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
-        M: "h-[28px] py-[2px] px-[14px] typography-body-large-medium rounded-[6px] [&_i]:text-[18px]",
-        L: "h-[34px] py-[5px] px-[22px] typography-body-large-medium rounded-[8px] [&_i]:text-[20px]",
-        XL: "h-[40px] py-[8px] px-[30px] typography-headers-medium-medium rounded-[8px] [&_i]:text-[22px]",
+        S: "h-[22px] py-[2px] px-[6px] typography-body-small-medium rounded-radius-sm [&_i]:text-[12px]",
+        M: "h-[28px] py-[2px] px-[14px] typography-body-large-medium rounded-radius-md [&_i]:text-[18px]",
+        L: "h-[34px] py-[5px] px-[22px] typography-body-large-medium rounded-radius-lg [&_i]:text-[20px]",
+        XL: "h-[40px] py-[8px] px-[30px] typography-headers-medium-medium rounded-radius-lg [&_i]:text-[22px]",
       },
       is_loading: {
         true: "[&_i]:hidden",

package/apps/lib/components/Calendar.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { DayPicker } from "react-day-picker";
 import "react-day-picker/style.css";
 import { cn } from "../utils/cn";
-import { Button } from "./Button";
+import { ActionButton } from "./ActionButton";
 import { SimpleSelectValue, SimpleSelectItem } from "./SimpleSelect";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
@@ -30,24 +30,14 @@ const Calendar = ({
         Nav: (e) => {
           return (
             <div className="w-full flex items-center justify-between absolute top-0 left-0 p-[6px]">
-              <Button
-                onClick={e.onPreviousClick}
-                buttonType="icon"
-                variant="PrimeStyle"
-                size="M"
-                className="w-[26px] h-[26px]"
-              >
+              {/* Popover navigation rather than an in-field button, so it keeps its own 26px box
+                  and only adopts the shared action colours and radius. */}
+              <ActionButton onClick={e.onPreviousClick} size="S" className="w-[26px] h-[26px]">
                 <i className="ri-arrow-left-s-line"></i>
-              </Button>
-              <Button
-                onClick={e.onNextClick}
-                buttonType="icon"
-                variant="PrimeStyle"
-                size="M"
-                className="w-[26px] h-[26px]"
-              >
+              </ActionButton>
+              <ActionButton onClick={e.onNextClick} size="S" className="w-[26px] h-[26px]">
                 <i className="ri-arrow-right-s-line"></i>
-              </Button>
+              </ActionButton>
             </div>
           );
         },

package/apps/lib/components/ColorPicker.tsx

@@ -404,7 +404,7 @@ export const ColorPicker = forwardRef<HTMLElement, ColorPickerProps>(
                       }}
                       className={NUM_INPUT_CLS}
                     />
-                    <span className="pr-1 typography-body-small-regular text-content-presentation-action-light-secondary">
+                    <span className="pe-1 typography-body-small-regular text-content-presentation-action-light-secondary">
                       %
                     </span>
                   </Group>

package/apps/lib/components/DataViews/views/table-view.tsx

@@ -132,7 +132,18 @@ function TableViewImpl({
             // pushes the whole component wide instead of scrolling within it.
             className="min-w-0 flex-1 overflow-auto rounded-lg"
           >
-            <Table ref={tableRef} className="w-full">
+            {/* One width for the table and the footer bar below it. Inside an `overflow-auto`
+                scroller a child's `w-full` resolves against the *visible* width, not the scrollable
+                width — so without this box the footer stopped at the fold whenever the columns
+                overflowed. `w-max` sizes to the table (the widest child); `min-w-full` keeps it
+                filling the scroller when the table is narrower. */}
+            <div className="w-max min-w-full">
+            {/* `overflow-visible` opts out of the primitive's `overflow-hidden` (tailwind-merge
+                lets ours win). It has to: a clipping table is its own scrollport, and the sticky
+                header would then resolve against a box that never scrolls. Safe here because the
+                scroller above is `min-w-0 overflow-auto`, so a wide table scrolls inside it rather
+                than pushing the layout. */}
+            <Table ref={tableRef} className="w-full overflow-visible">
               {/* The header sticks to the scroller above by default — that lives on `TableHeader`
                   in the primitive. Two things this view adds:
 
@@ -228,7 +239,7 @@ function TableViewImpl({
                       >
                         {onRowMove && <GripCell />}
                         {selectable && (
-                          <TableCell isDummy className="h-[40px] w-12" onClick={(e) => e.stopPropagation()}>
+                          <TableCell isDummy className="min-h-[40px] w-12" onClick={(e) => e.stopPropagation()}>
                             {/* What `TableCheckbox` renders, inlined: its props are typed as button
                             attributes, so it cannot express a controlled checkbox. */}
                             <div className="flex items-center justify-center">
@@ -245,8 +256,20 @@ function TableViewImpl({
                           // `undefined` means "you paint it" — distinct from `null`, which is a
                           // deliberate blank.
                           const custom = renderCell?.({ field, row, id, index, fields: visibleFields });
+                          // `fade={false}` and clip instead. The fade is a `mask-image` on every
+                          // cell, close to free on its own but very expensive once a sticky header
+                          // repaints the region each scroll frame: measured on this page,
+                          // mask+sticky costs ~61ms/frame against ~29ms with the mask off and
+                          // ~17ms with neither. `overflow-hidden` is passed back because
+                          // `fade={false}` otherwise switches the cell to `overflow-visible`, and
+                          // the text would spill into the next column.
                           return (
-                            <TableCell key={`${field.path}-${i}`} className="h-[40px]">
+                            <TableCell
+                              key={`${field.path}-${i}`}
+                              className="min-h-[40px]"
+                              fade={false}
+                              childrenClassName="overflow-hidden"
+                            >
                               {/* `isolate` confines the Badge's mix-blend-luminosity to a local
                               stacking context and `transform-gpu` promotes it to its own layer, so
                               the table's post-mount column reflow repaints cleanly instead of
@@ -287,6 +310,7 @@ function TableViewImpl({
                 {addRowLabel}
               </TableEndAction>
             )}
+            </div>
           </div>
         </div>
       </div>
@@ -419,7 +443,12 @@ function SkeletonRows({
           {grip && <TableCell isDummy className="h-[40px] w-8" />}
           {selectable && <TableCell isDummy className="h-[40px] w-12" />}
           {fields.map((field, i) => (
-            <TableCell key={`${field.path}-${i}`} className="h-[40px]">
+            <TableCell
+              key={`${field.path}-${i}`}
+              className="min-h-[40px]"
+              fade={false}
+              childrenClassName="overflow-hidden"
+            >
               {/* Widths cycle rather than repeat, so a column of bars reads as text that has not
                   arrived instead of as a grid. */}
               <SkeletonBar className={["w-[70%]", "w-[45%]", "w-[85%]", "w-[60%]"][(row + i) % 4]} />

package/apps/lib/components/Drawer.tsx

@@ -37,6 +37,7 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 interface DrawerContentProps extends React.ComponentPropsWithoutRef<
   typeof DrawerPrimitive.Content
 > {
+  /** @deprecated No effect here — the drag handle is `DrawerPanel`'s `showHandle`. */
   showHandle?: boolean;
   notch?: React.ReactNode;
   notchSide?: "left" | "right";
@@ -87,7 +88,17 @@ const DrawerPanel = React.forwardRef<HTMLDivElement, DrawerPanelProps>(
       // would render white-on-light = invisible).
       data-theme="light"
       className={cn(
-        "flex flex-1 gap-2 rounded-t-[16px] p-1 bg-[#F0F0F0] min-h-0",
+        // `flex-col` is load-bearing: this panel stacks header / body / footer, and its own
+        // `showHandle` centres the drag handle with `mx-auto`, which only centres in a column.
+        // It was dropped in 37fddd5 alongside the tray's — on the tray that was deliberate (FormDrawer
+        // puts the panel and its summary side by side), here it was not, and every consumer that puts
+        // a header/body/footer straight into a panel rendered them in a row.
+        //
+        // `min-w-0` for the same reason, one axis over: the tray is a row now, so width is its
+        // main axis, and a flex item's default `min-width: auto` pins it to its content — a wide
+        // form pushed the panel straight out past the tray. `min-h-0` alone covered the old
+        // column tray; the row needs both.
+        "flex flex-1 flex-col gap-2 rounded-t-[16px] p-1 bg-[#F0F0F0] min-h-0 min-w-0",
         framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
         className,
       )}
@@ -113,6 +124,12 @@ const DrawerContent = React.forwardRef<
       framed: framedProp,
       wrapperClassName,
       trayClassName,
+      // Destructured only to keep it out of `...props`. The handle belongs to `DrawerPanel` now, so
+      // this does nothing here — but it was never pulled out either, so it was being spread onto the
+      // DOM node and React warned "does not recognize the `showHandle` prop on a DOM element" every
+      // time a drawer opened. Kept in the props type rather than removed: consumers still pass it.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      showHandle,
       ...props
     },
     ref,

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/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: {