torch-glare 2.5.3 → 2.5.5

package/apps/lib/components/TabSwitch.tsx

@@ -31,13 +31,16 @@ const trackStyles = cva(
     "rounded-[10px]",
     "bg-background-presentation-body-primary",
     "shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)]",
+    // Contains the active pill's drop-shadow: it is clipped at the track's rounded edge instead
+    // of bleeding onto whatever sits behind the switcher.
+    "overflow-hidden",
   ],
   {
     variants: {
       size: {
-        S: ["gap-[2px] p-[2px]"],
-        M: ["gap-[2px] p-[2px]"],
-        L: ["gap-[3px] p-[3px]"],
+        S: ["p-[2px]"],
+        M: ["p-[2px]"],
+        L: ["p-[3px] rounded-[12px]"],
       },
     },
     defaultVariants: { size: "M" },
@@ -48,7 +51,7 @@ const trackStyles = cva(
 // transparent and lighten on hover.
 const optionStyles = cva(
   [
-    "flex items-center justify-center gap-[4px]",
+    "flex items-center justify-center",
     "rounded-[8px]",
     "font-[510] leading-none",
     "transition-all duration-200 ease-in-out",
@@ -61,7 +64,7 @@ const optionStyles = cva(
       size: {
         S: ["h-5 px-2 text-[12px]", "[&_svg]:h-3 [&_svg]:w-3", "[&_i]:text-[12px]"],
         M: ["h-6 px-3 text-[14px]", "[&_svg]:h-[14px] [&_svg]:w-[14px]", "[&_i]:text-[14px]"],
-        L: ["h-8 px-4 text-[16px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
+        L: ["h-8 px-4 text-[16px] rounded-[10px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
       },
       active: {
         // Active option = a solid raised WHITE pill with dark text, in every
@@ -78,6 +81,8 @@ const optionStyles = cva(
           // keeps both states the same width — without it, selecting a tab resizes the pill and
           // shoves its neighbours. The design's own 4px gap absorbs the 1px.
           "border border-black/5",
+          // The pill casts outward to look raised; the track clips it (`overflow-hidden` on
+          // `trackStyles`) so the shadow never spills past the container.
           "drop-shadow-[0px_0px_5px_rgba(0,0,0,0.25)]",
         ],
         false: [
@@ -116,22 +121,23 @@ function TabSwitchInner<T extends string = string>(
     >
       {options.map((option, idx) => {
         const active = option.value === value;
+        const isDisabled = disabled || option.disabled;
+        // A divider is drawn only between two INACTIVE options — the raised pill is never flanked
+        // by a rule, so the two dividers touching it fade out.
         const prevActive = idx > 0 && options[idx - 1].value === value;
-        // A divider sits between two inactive options only — the active pill is
-        // never flanked by one.
         const showDivider = idx > 0 && !active && !prevActive;
-        const isDisabled = disabled || option.disabled;
 
         return (
           <div key={option.value} className="flex items-center">
             {idx > 0 && (
               <div
                 aria-hidden
+                // The slot is ALWAYS rendered and only its ink changes. Unmounting it instead cost
+                // the track 7px (`w-px` + `mx-[3px]`) every time one went away, so picking a tab
+                // resized the track and shoved its neighbours — with three options, selecting the
+                // middle one dropped both dividers and moved the track 14px.
                 className={cn(
-                  // The slot is always here, and only its ink changes. Unmounting it instead cost
-                  // the track 7px every time the rule below hid one, so picking a tab resized the
-                  // track and shoved its neighbours sideways.
-                  "mx-[3px] h-3 w-px",
+                  "h-3 w-px",
                   showDivider ? "bg-border-presentation-action-disabled" : "bg-transparent",
                 )}
               />

package/apps/lib/components/Table.tsx

@@ -32,7 +32,7 @@ const Table = React.forwardRef<
     // worked example.
     //
     // `[border-collapse:separate]` is what lets the header cells keep their borders while stuck.
-    className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
+    className={cn("overflow-visible w-auto [border-collapse:separate] border-spacing-0", className)}
     {...props}
   >
     {props.children}

package/apps/lib/components/Textarea.tsx

@@ -7,12 +7,19 @@ import { cva, VariantProps } from "class-variance-authority";
 const textareaStyles = cva(
   [
     "border",
-    "rounded-[8px]",
+    // `radius/xl` (12px). Figma's TextArea-Field has two sizes — S is `radius/lg` (8px) and M is
+    // `radius/xl` — and this component has no size variant: it renders its `Label` wrapper at
+    // `size="M"` below, so M is the size it actually is. Supporting S properly needs a real `size`
+    // prop, which is an API change rather than a radius one.
+    "rounded-radius-xl",
     "px-[8px]",
     "py-[12px]",
     "outline-none",
     "typography-body-large-regular",
-    "!min-h-[36px]",
+    // A floor for the empty field — without one, `field-sizing: content` collapses it to a single
+    // 50px line. No `!` — twMerge does not dedupe an important class against a plain one, so `!`
+    // here would make the height impossible to override from a caller's `className`.
+    "min-h-[200px]",
     "transition-[border,background-color,color,caret-color,box-shadow]",
     "ease-in-out",
     "duration-150",
@@ -29,7 +36,7 @@ const textareaStyles = cva(
     "disabled:text-border-presentation-action-disabled",
     "disabled:cursor-not-allowed",
     "disabled:placeholder-border-presentation-action-disabled",
-    "field-sizing-content w-full min-w-[100px] max-w-[100%]",
+    "w-full min-w-[100px] max-w-[100%]",
   ],
   {
     variants: {
@@ -54,6 +61,14 @@ interface TextareaProps
   secondaryLabel?: string; // Additional label text
   direction?: "row" | "column";
   theme?: "dark" | "light" | "default";
+  /**
+   * Grow the field to fit its content as the user types, instead of scrolling inside a fixed box.
+   * On by default, via CSS `field-sizing: content`. Set a `max-h-*` on the field to cap the growth —
+   * past the cap it scrolls. Note `rows` has no effect while this is on: the browser sizes the field
+   * from its content, so an empty field starts at one line. Pass `autoResize={false}` for the old
+   * fixed-height box with a drag handle.
+   */
+  autoResize?: boolean;
 }
 
 // Textarea component definition
@@ -68,6 +83,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       direction = "row",
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       theme, // excluded from ...props spread
+      autoResize = true,
       ...props
     },
     ref,
@@ -82,7 +98,16 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         size={"M"}
         className={cn(className)}
       >
-        <textarea className={cn(textareaStyles({ state }))} ref={ref} {...props} />
+        <textarea
+          // Auto-grow is pure CSS. Written as an arbitrary *property* rather than as
+          // `field-sizing-content`: that utility only exists in Tailwind v4 and this project is on
+          // v3, where it compiled to no rule at all and left the computed `field-sizing` at `fixed`.
+          // The drag handle goes away with it — the height is content-driven, and a manual drag
+          // would pin it and silently stop the growing.
+          className={cn(textareaStyles({ state }), autoResize && "[field-sizing:content] resize-none")}
+          ref={ref}
+          {...props}
+        />
       </Label>
     );
   },

package/apps/lib/components/TreeDropDown.tsx

@@ -6,9 +6,9 @@ import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
 const TreeDropDownVariants = cva(
   [
     "cursor-pointer flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
-    "text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
+    "text-content-system-global-primary border-s-[2px] border-transparent outline-none",
     "hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:gap-[14px]",
-    "rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
+    "rounded-e-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
   ],
   {
     variants: {
@@ -20,19 +20,31 @@ const TreeDropDownVariants = cva(
         true: "hover:gap-[8px]",
       },
     },
+    // The active row is a fixed dark slab, so its colours are pinned locally rather than taken from
+    // the theme. Previously the fill was theme-invariant while the text was not: on a light-themed
+    // page the row rendered near-black with near-black text, and the label was unreadable. The
+    // values below are exactly what the dark sidebar already rendered, so its look is unchanged.
     compoundVariants: [
       {
         active: true,
         variant: "default",
         className: [
-          "bg-background-system-action-primary-hover border-border-system-action-primary-hover [&_button]:bg-purple-alpha-15 hover:bg-background-system-action-primary-hover hover:border-border-system-action-primary-hover",
+          "bg-purple-1000 border-purple-600 [&_button]:bg-purple-alpha-15",
+          "hover:bg-purple-1000 hover:border-purple-600",
+          // Descendants carry their own theme-driven text colours (headings, badges), so the
+          // foreground has to be forced here or it follows the page instead of the slab.
+          "text-content-presentation-global-primary-light",
+          "[&_*]:!text-content-presentation-global-primary-light",
         ],
       },
       {
         active: true,
         variant: "secondary",
         className: [
-          "bg-wavy-navy-1000 border-border-system-action-field-hover-selected [&_button]:bg-blue-sparkle-alpha-15 hover:bg-wavy-navy-1000 hover:border-border-system-action-field-hover-selected",
+          "bg-wavy-navy-1000 border-blue-sparkle-600 [&_button]:bg-blue-sparkle-alpha-15",
+          "hover:bg-wavy-navy-1000 hover:border-blue-sparkle-600",
+          "text-content-presentation-global-primary-light",
+          "[&_*]:!text-content-presentation-global-primary-light",
         ],
       },
     ],
@@ -86,14 +98,14 @@ export const TreeDropDown = ({
       </div>
       <div
         className={cn(
-          "mt-0 pl-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out",
+          "mt-0 ps-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out",
           {
             "max-h-[20000px] mt-1": isActive,
             "max-h-0": !isActive,
           },
         )}
       >
-        <span className="h-full w-[1px] bg-border-system-global-primary absolute left-[21px] top-0 rounded-sm z-10" />
+        <span className="h-full w-[1px] bg-border-system-global-primary absolute start-[21px] top-0 rounded-sm z-10" />
         <div className={cn("h-full flex flex-col gap-1 w-full", childrenContainerClassName)}>
           {props.children}
         </div>

package/apps/lib/layouts/FieldSection.tsx

@@ -27,6 +27,14 @@ export function FieldSection({
   childrenUnderLabel,
   ...props
 }: Props) {
+  // Which copy of `childrenUnderLabel` is visible, driven purely by the `@md` container
+  // breakpoint (this section's own width reaching 650px) — deliberately not by `direction`.
+  // Pinning it per-direction breaks the common case: `FormRenderer` forces `direction="vertical"`
+  // inside a drawer and FormBuilder puts the field's validation error in this slot, so a vertical
+  // form would strand every error under the label at any width.
+  const underLabelSlot = direction === "vertical" ? "hidden" : "hidden @md:block";
+  const underChildrenSlot = direction === "vertical" ? "block" : "block @md:hidden";
+
   return (
     <section
       {...props}
@@ -54,11 +62,29 @@ export function FieldSection({
           )}
 
           {secondaryLabel && <Label size={size} secondaryLabel={secondaryLabel} />}
-          {childrenUnderLabel}
+
+          {/* Stacked (below `@md`): the label column IS the full width, so under the label is the
+              natural spot. Hidden once `@md` splits the row into two columns — the copy in the
+              children column takes over there. Exactly one of the two is ever displayed. */}
+          {childrenUnderLabel && (
+            <div data-slot="under-label" className={cn(underLabelSlot)}>
+              {childrenUnderLabel}
+            </div>
+          )}
         </div>
 
         {/* Flexible section that takes up the remaining space */}
-        <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
+        <div className="grid grid-cols-1 place-items-end gap-[12px]">
+          {children}
+
+          {/* Two-column (`@md` and up): the hint belongs under the control it describes, not
+              stranded at the bottom of the 350px label column. */}
+          {childrenUnderLabel && (
+            <div data-slot="under-children" className={cn("w-full", underChildrenSlot)}>
+              {childrenUnderLabel}
+            </div>
+          )}
+        </div>
       </div>
     </section>
   );

package/apps/lib/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.3",
+  "version": "2.5.5",
   "generatedBy": "scripts/bin/generateRegistry",
   "npmVersions": {
     "@dnd-kit/core": "^6.3.1",
@@ -186,7 +186,7 @@
         "react-day-picker"
       ],
       "registryDependencies": [
-        "components/Button",
+        "components/ActionButton",
         "components/SimpleSelect",
         "utils/cn"
       ]
@@ -457,25 +457,13 @@
         "components/Button",
         "components/Drawer",
         "components/FormBuilder",
-        "components/FormStepper",
         "components/HeaderBar",
         "components/SectionBlock",
+        "components/Stepper",
         "components/TabFormItem",
         "utils/cn"
       ]
     },
-    {
-      "name": "FormStepper",
-      "type": "components",
-      "path": "components/FormStepper.tsx",
-      "npmDependencies": [
-        "class-variance-authority"
-      ],
-      "registryDependencies": [
-        "utils/cn",
-        "utils/types"
-      ]
-    },
     {
       "name": "FormSummary",
       "type": "components",
@@ -714,6 +702,7 @@
         "class-variance-authority"
       ],
       "registryDependencies": [
+        "components/ActionButton",
         "components/Button",
         "components/DropdownMenu",
         "components/Input",
@@ -743,6 +732,7 @@
       "path": "components/SearchableTree.tsx",
       "npmDependencies": [],
       "registryDependencies": [
+        "components/ActionButton",
         "components/Button",
         "components/Input",
         "components/Popover",
@@ -757,6 +747,7 @@
       "path": "components/SearchableTreeDialog.tsx",
       "npmDependencies": [],
       "registryDependencies": [
+        "components/ActionButton",
         "components/Button",
         "components/Dialog",
         "components/Input",
@@ -793,9 +784,8 @@
         "class-variance-authority"
       ],
       "registryDependencies": [
-        "components/Button",
+        "components/ActionButton",
         "components/DropdownMenu",
-        "components/Tooltip",
         "utils/cn",
         "utils/types"
       ]