torch-glare 2.5.3 → 2.5.5

package/apps/lib/components/Select.tsx

@@ -3,8 +3,7 @@ import React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../utils/cn";
 import { cva, VariantProps } from "class-variance-authority";
-import { Button } from "./Button";
-import { Tooltip } from "./Tooltip";
+import { ActionButton } from "./ActionButton";
 import { MenuItemStyles } from "./DropdownMenu";
 import { Themes } from "../utils/types";
 
@@ -18,6 +17,7 @@ const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
     VariantProps<typeof PopoverTriggerStyles> & {
+      /** Marks the trigger invalid: any non-undefined value turns on the negative border. */
       errors?: string;
       icon?: string;
       theme?: Themes;
@@ -38,51 +38,50 @@ const SelectTrigger = React.forwardRef<
     ref,
   ) => {
     return (
-      <Tooltip toolTipSide={"top"} open={errors !== undefined} text={errors}>
-        <SelectPrimitive.Trigger
-          data-theme={theme}
-          ref={ref}
-          className={cn(
-            PopoverTriggerStyles({
-              size,
-              variant,
-              error: errors !== undefined,
-              onTable,
-            }),
-            className,
-          )}
-          {...props}
+      <SelectPrimitive.Trigger
+        data-theme={theme}
+        ref={ref}
+        className={cn(
+          PopoverTriggerStyles({
+            size,
+            variant,
+            error: errors !== undefined,
+            onTable,
+          }),
+          className,
+        )}
+        {...props}
+      >
+        <p
+          className={cn({
+            "[&_span]:text-[#A0A0A0]": !props.value,
+          })}
         >
-          <p
-            className={cn({
-              "[&_span]:text-[#A0A0A0]": !props.value,
-            })}
-          >
-            {children}
-          </p>
+          {children}
+        </p>
 
-          <Button
-            as={"span"}
-            buttonType="icon"
-            size={"L"}
-            className={cn([
-              "group-aria-expanded:bg-background-presentation-action-hover",
-              "group-aria-expanded:text-white",
-            ])}
-          >
-            <i
-              className={cn(
-                "ri-arrow-down-s-line transition-all duration-100 ease-in-out group-aria-expanded:rotate-180",
-                { "!text-[12px]": size === "S" },
-                { "!text-[16px]": size === "M" },
-                { "!text-[18px]": size === "L" },
-                { "!text-[26px]": size === "XL" },
-                { icon: icon },
-              )}
-            />
-          </Button>
-        </SelectPrimitive.Trigger>
-      </Tooltip>
+        {/* The shared in-field action button. Its box tracks the trigger height the same way
+            InputField's does — a 30px field takes the 22px button, a 40px field the 32px one. */}
+        <ActionButton
+          as={"span"}
+          size={size === "XL" ? "M" : size === "S" ? "XS" : "S"}
+          className={cn([
+            "group-aria-expanded:bg-background-presentation-action-hover",
+            "group-aria-expanded:text-white",
+          ])}
+        >
+          <i
+            className={cn(
+              "ri-arrow-down-s-line transition-all duration-100 ease-in-out group-aria-expanded:rotate-180",
+              { "!text-[12px]": size === "S" },
+              { "!text-[16px]": size === "M" },
+              { "!text-[18px]": size === "L" },
+              { "!text-[26px]": size === "XL" },
+              { icon: icon },
+            )}
+          />
+        </ActionButton>
+      </SelectPrimitive.Trigger>
     );
   },
 );
@@ -139,10 +138,19 @@ const SelectContent = React.forwardRef<
         ref={ref}
         className={cn(SelectContentStyles({ variant }), className)}
         position={position}
+        // Never taller than 368px, and never taller than the space Radix has on screen. Valid because
+        // `position` defaults to "popper", which is what publishes the variable.
+        style={{
+          maxHeight: "min(368px, var(--radix-select-content-available-height, 100vh))",
+          ...props.style,
+        }}
         {...props}
       >
-        {/* Dedicated scroll viewport + boxed group, matching SearchableSelect's menu surface. */}
-        <SelectPrimitive.Viewport className="overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
+        {/* Dedicated scroll viewport + boxed group, matching SearchableSelect's menu surface.
+            `flex-1 min-h-0` is what makes it scroll: without `min-h-0` a flex item refuses to shrink
+            below its content, so the list grew past the panel and `overflow-hidden` simply clipped
+            the rows off with no scrollbar. */}
+        <SelectPrimitive.Viewport className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide">
           <div className="flex flex-col gap-[1px] overflow-hidden rounded-[10px]">{children}</div>
         </SelectPrimitive.Viewport>
       </SelectPrimitive.Content>
@@ -176,7 +184,7 @@ const SelectItem = React.forwardRef<
   >
     <div>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator className="ml-auto flex shrink-0">
+      <SelectPrimitive.ItemIndicator className="ms-auto flex shrink-0">
         <i className="ri-check-line text-[16px]" />
       </SelectPrimitive.ItemIndicator>
     </div>
@@ -230,7 +238,8 @@ const SelectContentStyles = cva(
     "data-[state=open]:animate-in",
     "data-[state=open]:fade-in-0",
     "z-[1000]",
-    "max-h-[368px]",
+    // Panel height is set inline below from `min(368px, available-height)`; the class is kept off
+    // deliberately so the inline value governs.
   ],
   {
     variants: {
@@ -253,7 +262,11 @@ const SelectContentStyles = cva(
 
 const PopoverTriggerStyles = cva(
   [
-    "flex flex-row rounded-[8px] justify-between items-center outline-none",
+    // No radius here — every `size` variant sets its own. `twMerge` does NOT dedupe the
+    // `rounded-radius-*` classes (they are custom scale keys, not values it recognises), so a
+    // radius on the base would survive alongside the variant's and let CSS source order pick the
+    // winner: `md` is generated before `lg`, so a base `lg` would silently beat size S's `md`.
+    "flex flex-row justify-between items-center outline-none",
     "[&_span]:text-content-presentation-action-light-primary",
     "typography-body-small-regular",
     "[&_p]:px-[10px] [&_p]:whitespace-nowrap",
@@ -299,12 +312,31 @@ const PopoverTriggerStyles = cva(
       onTable: {
         true: ["border-transparent", "bg-transparent"],
       },
+      // No `[&_span]:h-/w-` here: the chevron is an `ActionButton` and sizes itself from its own
+      // `size` prop. Those descendant rules used to force its box, and being descendant selectors
+      // they outranked the button's own classes — they also hit the SelectValue text span, which
+      // only escaped being squashed because an inline element ignores width/height.
       size: {
-        S: ["rounded-[6px] [&_span]:h-[22px] [&_span]:w-[22px] [&_p]:typography-body-small-medium"],
-        M: ["[&_span]:h-[26px] [&_span]:w-[26px] [&_p]:typography-body-medium-medium"],
-        L: ["[&_span]:h-[28px] [&_span]:w-[28px] [&_p]:typography-body-large-medium"],
+        // 24px tall — below the field scale's smallest step (30px), so it keeps its own
+        // `radius/md` rather than being rounded up to the 8px a real field would use.
+        // Heights are explicit because the trigger used to be sized by whichever chevron box the
+        // `[&_span]` rules imposed; now that the chevron sizes itself, the field must state its own.
+        //
+        // Every size states its padding so that `2×border + 2×padding + chevron` is exactly the
+        // trigger height — the chevron then sits an equal distance from all four edges instead of
+        // being flush to the border horizontally and centred vertically. Only XL had any padding
+        // before, which is why it was the only size that looked right.
+        //
+        // L and XL are the real field heights (30/40) and land on Figma's 4px. S and M have no
+        // Figma counterpart, so they take 3px — the most that still fits their chevron exactly.
+        S: ["h-[24px] p-[2px] rounded-radius-md [&_p]:typography-body-small-medium"],
+        // 28px and 30px — the field scale's S step (30px) is `radius/lg`.
+        M: ["h-[28px] p-[2px] rounded-radius-lg [&_p]:typography-body-medium-medium"],
+        L: ["h-[30px] p-[3px] rounded-radius-lg [&_p]:typography-body-large-medium"],
+        // 40px tall, so it is exactly InputField M and takes that size's `radius/xl` (12px).
+        // It sat at 8px before — the one place a 40px field in the system rounded like a 30px one.
         XL: [
-          "h-[40px] p-[4px] rounded-[8px] [&_span]:h-[32px] [&_span]:w-[32px] [&_p]:typography-body-large-regular [&_p]:px-[4px]",
+          "h-[40px] p-[3px] rounded-radius-xl [&_p]:typography-body-large-regular [&_p]:px-[4px]",
         ],
       },
     },

package/apps/lib/components/SimpleSelect.tsx

@@ -13,7 +13,7 @@ const SimpleSelectDropDown = ({ className, children, onClick }: SimpleSelectDrop
   return (
     <div
       className={cn(
-        "absolute min-w-[100px] z-[20] top-[27px] left-0",
+        "absolute min-w-[100px] z-[20] top-[27px] start-0",
         dropdownMenuStyles({ variant: "SystemStyle" }),
         className,
       )}
@@ -97,7 +97,7 @@ const SimpleSelectValue = ({
         "w-fit",
         "rounded-[6px]",
         "outline-none",
-        "pl-[8px]",
+        "ps-[8px]",
         className,
       ])}
     >

package/apps/lib/components/SlideDatePicker.tsx

@@ -47,7 +47,11 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
     const defaultPickerValue = {
       year: String(today.getFullYear()),
       month: String(today.getMonth() + 1),
-      day: String(today.getDate()),
+      // Zero-padded to match `getDayArray`, which emits "01".."31". Unpadded, a single-digit day
+      // ("5") matches no item in the wheel, so the picker cannot select the current date and falls
+      // back to the first day of the month — the field then shows the wrong date. Only reproducible
+      // on the 1st–9th, which is why it survived this long.
+      day: String(today.getDate()).padStart(2, "0"),
       hour: String(today.getHours()),
       minute: String(today.getMinutes()),
       time: today.getHours() < 12 ? "AM" : "PM",
@@ -60,7 +64,9 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
 
     const currentYear = new Date().getFullYear();
     const years = Array.from({ length: 200 }, (_, i) => `${currentYear - 100 + i}`);
-    const months = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, ""));
+    // No padding: these must match `defaultPickerValue.month`, which is unpadded. (This previously
+    // read `padStart(2, "")` — an empty pad string, so it never padded anything.)
+    const months = Array.from({ length: 12 }, (_, i) => String(i + 1));
     const days = getDayArray(Number(pickerValue.year), Number(pickerValue.month));
     const monthsNames = [
       "January",
@@ -143,9 +149,14 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
 
     return (
       <Popover onOpenChange={setIsOpen}>
-        <PopoverTrigger ref={triggerRef} asChild data-theme={theme} className="w-full flex-1">
+        {/* `theme` is deliberately NOT passed to the field: only the picker panel below is pinned
+            dark. The field follows the surrounding page instead, so it matches the other inputs
+            next to it. Note it must not be handed down as `data-theme` either — `asChild` merges
+            trigger props onto the child, which would land the attribute on the bare <input> and
+            leave its text resolving dark tokens inside a light field (white on white). */}
+        <PopoverTrigger ref={triggerRef} asChild className="w-full flex-1">
           {isValidElement(children) ? (
-            cloneElement(children as React.ReactElement<HTMLInputElement>, {
+            cloneElement(children as React.ReactElement<HTMLInputElement & { theme?: string }>, {
               value:
                 (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
               type: "input",