torch-glare 2.5.3 → 2.5.5

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

@@ -9,7 +9,7 @@ import {
   FocusEvent,
 } from "react";
 import { cn } from "../utils/cn";
-import { Tooltip, ToolTipSide } from "./Tooltip";
+import { ToolTipSide } from "./Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Themes } from "../utils/types";
 import { Icon, Input, Group, Trilling } from "./Input";
@@ -22,8 +22,13 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "va
   size?: "XS" | "S" | "M"; // this is used to change the size style of the component
   variant?: "SystemStyle" | "PresentationStyle";
   icon?: ReactNode; // to add left side icon 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;
   label?: string;
   required?: boolean;
@@ -45,6 +50,7 @@ export const BadgeField = 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,
     className,
     actionButton,
@@ -102,75 +108,73 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
 
     return (
       <Popover open={isPopoverOpen}>
-        <Tooltip toolTipSide={toolTipSide} open={errorMessage !== undefined} text={errorMessage}>
-          <PopoverTrigger asChild>
-            <Group
-              dir={dir}
-              error={errorMessage !== undefined}
-              onTable={onTable}
-              data-theme={theme}
-              variant={variant}
-              tabIndex={isPopoverOpen ? 0 : -1}
-              onKeyDown={handleKeyDown}
-              size={size === "XS" ? "S" : size}
-              ref={inputGroupRef}
-              onFocus={(e: FocusEvent<HTMLDivElement>) => {
-                setDropDownListWidth(e.currentTarget.offsetWidth);
+        <PopoverTrigger asChild>
+          <Group
+            dir={dir}
+            error={errorMessage !== undefined}
+            onTable={onTable}
+            data-theme={theme}
+            variant={variant}
+            tabIndex={isPopoverOpen ? 0 : -1}
+            onKeyDown={handleKeyDown}
+            size={size === "XS" ? "S" : size}
+            ref={inputGroupRef}
+            onFocus={(e: FocusEvent<HTMLDivElement>) => {
+              setDropDownListWidth(e.currentTarget.offsetWidth);
+            }}
+            className={cn(
+              "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
+              {
+                "flex-wrap justify-start": isPopoverOpen,
+                "h-fit": isPopoverOpen,
+              },
+              className,
+            )}
+          >
+            {icon && <Icon>{icon}</Icon>}
+
+            {selectedTagsStack.map((tag, index) => (
+              <Badge
+                key={tag.id}
+                size={size}
+                color={tag.variant as VariantProps<typeof badgeStyles>["color"]}
+                label={tag.name}
+                isClosable={true}
+                onClose={() => handleUnselectTag(tag.id)}
+                className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
+                tabIndex={focusedTagIndex === index ? 0 : -1}
+              />
+            ))}
+
+            <Input
+              {...props}
+              value={searchTags}
+              onChange={(e) => {
+                filterTagsBySearch(e.target.value);
               }}
+              onFocus={(e) => {
+                props.onFocus?.(e);
+                setFocusedTagIndex(null);
+                setIsPopoverOpen(true);
+              }}
+              ref={inputRef}
               className={cn(
-                "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
+                "min-w-[100px] w-full", // Added w-full to Input
                 {
-                  "flex-wrap justify-start": isPopoverOpen,
-                  "h-fit": isPopoverOpen,
+                  "!h-[18px]": size === "XS",
+                  "!h-[22px]": size === "S",
+                  "!h-[24px]": size === "M",
                 },
-                className,
-              )}
-            >
-              {icon && <Icon>{icon}</Icon>}
-
-              {selectedTagsStack.map((tag, index) => (
-                <Badge
-                  key={tag.id}
-                  size={size}
-                  color={tag.variant as VariantProps<typeof badgeStyles>["color"]}
-                  label={tag.name}
-                  isClosable={true}
-                  onClose={() => handleUnselectTag(tag.id)}
-                  className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
-                  tabIndex={focusedTagIndex === index ? 0 : -1}
-                />
-              ))}
-
-              <Input
-                {...props}
-                value={searchTags}
-                onChange={(e) => {
-                  filterTagsBySearch(e.target.value);
-                }}
-                onFocus={(e) => {
-                  props.onFocus?.(e);
-                  setFocusedTagIndex(null);
-                  setIsPopoverOpen(true);
-                }}
-                ref={inputRef}
-                className={cn(
-                  "min-w-[100px] w-full", // Added w-full to Input
-                  {
-                    "!h-[18px]": size === "XS",
-                    "!h-[22px]": size === "S",
-                    "!h-[24px]": size === "M",
-                  },
-                )}
-              />
-              {actionButton && (
-                <Trilling className="py-0">
-                  {/* Keep the ActionButton right aligned */}
-                  {actionButton}
-                </Trilling>
               )}
-            </Group>
-          </PopoverTrigger>
-        </Tooltip>
+            />
+            {actionButton && (
+              <Trilling className="py-0">
+                {/* Keep the ActionButton right aligned */}
+                {actionButton}
+              </Trilling>
+            )}
+          </Group>
+        </PopoverTrigger>
 
         <PopoverContent
           dir={dir}
@@ -222,7 +226,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/Card.tsx

@@ -6,7 +6,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 export const cardStyles = cva(
   [
     "flex flex-col justify-start",
-    "gap-2 rounded-[12px] border",
+    // `radius/xl` is 12px — the same value this literal had, now taken from the shared scale.
+    "gap-2 rounded-radius-xl border",
     "transition-all ease-in-out duration-200",
     "p-[16px]",
     "border-border-presentation-global-primary",

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/ContextMenu.tsx

@@ -139,16 +139,27 @@ const ContextMenuContent = React.forwardRef<
         data-theme={theme}
         ref={ref}
         collisionPadding={collisionPadding}
-        // Cap at maxHeight, but never exceed the space Radix has after collision
-        // handling. The menu scrolls (overflow on the surface) past this height.
+        // Cap at maxHeight, but never exceed the space Radix has after collision handling. The
+        // `100vh` fallback is load-bearing: an undefined var invalidates the whole `min()`, so
+        // `max-height` would resolve to `none` and the panel — which no longer scrolls itself —
+        // would grow unbounded with its rows clipped and unreachable.
         style={{
-          maxHeight: `min(${maxHeight}px, var(--radix-context-menu-content-available-height))`,
+          maxHeight: `min(${maxHeight}px, var(--radix-context-menu-content-available-height, 100vh))`,
           ...style,
         }}
         className={cn(menuContentStyles({ variant }), className)}
         {...props}
       >
-        {autoGroup ? autoGroupChildren(children) : children}
+        {/* Dedicated scroll viewport, matching Select's: the cap lives on the panel above, this
+            fills what is left and scrolls. `min-h-0` is what makes it work — a flex item will not
+            shrink below its content, so without it the list grows past the panel and the panel's
+            `overflow-hidden` just clips the rows with no scrollbar.
+
+            `gap-1` is re-declared here because `autoGroupChildren` emits several siblings (a group,
+            a label, a separator…) and this is now the element they are siblings within. */}
+        <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+          {autoGroup ? autoGroupChildren(children) : children}
+        </div>
       </ContextMenuPrimitive.Content>
     </ContextMenuPrimitive.Portal>
   ),
@@ -180,18 +191,45 @@ const ContextMenuSubContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
     variant?: "PresentationStyle";
     autoGroup?: boolean;
+    maxHeight?: number;
   }
->(({ className, variant = "PresentationStyle", autoGroup = true, children, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.SubContent
-      ref={ref}
-      className={cn(menuContentStyles({ variant }), className)}
-      {...props}
-    >
-      {autoGroup ? autoGroupChildren(children) : children}
-    </ContextMenuPrimitive.SubContent>
-  </ContextMenuPrimitive.Portal>
-));
+>(
+  (
+    {
+      className,
+      variant = "PresentationStyle",
+      autoGroup = true,
+      collisionPadding = 8,
+      maxHeight = 320,
+      // Destructured out of `{...props}` so the spread below cannot clobber the cap. Radix
+      // re-publishes the namespaced available-height var on SubContent, so the same expression
+      // Content uses works here unchanged.
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        ref={ref}
+        collisionPadding={collisionPadding}
+        style={{
+          maxHeight: `min(${maxHeight}px, var(--radix-context-menu-content-available-height, 100vh))`,
+          ...style,
+        }}
+        className={cn(menuContentStyles({ variant }), className)}
+        {...props}
+      >
+        {/* Same panel-clips / viewport-scrolls split as Content. A submenu is a peer surface, so it
+            shares the 320px default rather than getting a smaller one of its own. */}
+        <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+          {autoGroup ? autoGroupChildren(children) : children}
+        </div>
+      </ContextMenuPrimitive.SubContent>
+    </ContextMenuPrimitive.Portal>
+  ),
+);
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuItem = React.forwardRef<
@@ -487,16 +525,19 @@ const menuContentStyles = cva(
     "rounded-[14px]",
     "min-w-[240px]",
     "outline-none",
-    "overflow-y-auto",
-    "overflow-x-hidden",
+    // The panel clips; the inner viewport below owns scrolling. Height is capped inline on the
+    // Content element from `min(maxHeight, available-height)` — no `max-h-*` class here on
+    // purpose, so the inline value governs.
+    "overflow-hidden",
     // Only animate the OPEN (enter) state. An exit animation on [data-state=closed]
     // holds the old DOM node during close, which breaks close/reposition on a
     // second right-click (Radix issue #2572).
     "data-[state=open]:animate-in",
     "data-[state=open]:fade-in-0",
-    "scrollbar-hide",
     "backdrop-blur-[21px]",
-    "flex gap-1 flex-col",
+    // No `gap` here: the panel has exactly one child (the scroll viewport), so a gap between
+    // siblings has nothing to act on. The 4px between groups/labels lives on that viewport.
+    "flex flex-col",
   ],
   {
     variants: {
@@ -506,9 +547,11 @@ const menuContentStyles = cva(
           "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
-      defaultVariants: {
-        variant: "PresentationStyle",
-      },
+    },
+    // Was nested inside `variants`, where cva reads it as a variant group named
+    // "defaultVariants" and no default is ever applied. `menuGroupStyles` below has it right.
+    defaultVariants: {
+      variant: "PresentationStyle",
     },
   },
 );

package/apps/lib/components/DataViews/context.ts

@@ -129,8 +129,8 @@ export interface FiltersContextValue {
   setFilters: (filters: FilterState) => void;
   /**
    * What each filter control is, read off the `FormBuilder` children of `DataViews.Filters` —
-   * never derived from the rows. The root collects them as well, so `Filters.Summary` can label a
-   * chip even when it is rendered outside `Filters`.
+   * never derived from the rows. The root collects them as well, so a consumer such as
+   * `Filters.Presets` can resolve a field by path even when it is rendered outside `Filters`.
    */
   filterFields: readonly FilterFieldDescriptor[];
 }

package/apps/lib/components/DataViews/data-views.tsx

@@ -264,9 +264,9 @@ function DataViewsRoot({
     [isPanelOpen, setPanelOpen],
   );
 
-  // The descriptors as well as the value: `Filters.Summary` needs labels for its chips, and it is
-  // routinely rendered outside `Filters` — above the table, in a toolbar — where it cannot reach
-  // the context `Filters` provides to its own children.
+  // The descriptors as well as the value: a consumer such as `Filters.Presets` resolves a field by
+  // path, and may be rendered outside `Filters` — above the table, in a toolbar — where it cannot
+  // reach the context `Filters` provides to its own children.
   const filterFields = useMemo(() => collectFilterFields(children), [children]);
 
   const setFilters = useCallback(

package/apps/lib/components/DataViews/filters/filters.tsx

@@ -10,7 +10,6 @@ import { FiltersContext, useDataViewsFilters } from "../context";
 import { collectFilterFields, renderFields } from "./children";
 import { Custom } from "./custom";
 import { Presets } from "./presets";
-import { Summary } from "./summary";
 import { Sync } from "./sync";
 import { toFormValues } from "./values";
 import type { FiltersProps } from "../types";
@@ -155,5 +154,4 @@ function FiltersRoot({
 export const Filters = Object.assign(FiltersRoot, {
   Presets,
   Custom,
-  Summary,
 });