torch-glare 2.5.3 → 2.5.4

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/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.3",
+  "version": "2.5.4",
   "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,7 +784,7 @@
         "class-variance-authority"
       ],
       "registryDependencies": [
-        "components/Button",
+        "components/ActionButton",
         "components/DropdownMenu",
         "components/Tooltip",
         "utils/cn",