torch-glare 2.4.1 → 2.4.3

package/apps/lib/components/Button.tsx

@@ -305,7 +305,7 @@ export const buttonVariants = cva(
       {
         buttonType: "icon",
         size: "L",
-        className: "w-[34px] h-[34px] p-0 leading-[0]",
+        className: "w-[30px] h-[30px] p-0 leading-[0]",
       },
       {
         buttonType: "icon",

package/apps/lib/components/Card.tsx

@@ -1,33 +1,60 @@
 import { cn } from "../utils/cn";
 import React, { HTMLAttributes } from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-interface Props extends Omit<
-  HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement>,
-  "htmlFor"
-> {
+export const cardStyles = cva(
+  [
+    "flex flex-col justify-start",
+    "gap-2 rounded-[12px] border",
+    "transition-all ease-in-out duration-200",
+    "p-[16px]",
+    "border-border-presentation-global-primary",
+    "bg-background-presentation-form-radiocard-base",
+    "focus:border-border-presentation-state-focus",
+  ],
+  {
+    variants: {
+      variant: {
+        /** Static container — no hover affordance. */
+        default: [],
+        /** Interactive card (a link/label/button surface) — highlights on hover. */
+        clickable: ["cursor-pointer", "hover:border-border-presentation-state-focus"],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface Props
+  extends
+    Omit<
+      HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement>,
+      "htmlFor"
+    >,
+    VariantProps<typeof cardStyles> {
   as?: React.ElementType;
   asChild?: boolean;
   htmlFor?: string;
 }
-export const Card = ({ className, htmlFor, asChild, as: Tag = "section", ...props }: Props) => {
+
+/**
+ * A surface container. Defaults to a **static** card; pass `variant="clickable"` when the whole
+ * card is an interactive target so it gets the hover highlight + pointer cursor.
+ */
+export const Card = ({
+  className,
+  htmlFor,
+  asChild,
+  variant,
+  as: Tag = "section",
+  ...props
+}: Props) => {
   const Component = asChild ? Slot : Tag;
   return (
-    <Component
-      htmlFor={htmlFor}
-      {...props}
-      className={cn(
-        "flex flex-col justify-start",
-        "gap-2 rounded-[12px] border",
-        "transition-all ease-in-out duration-200",
-        "p-[16px]",
-        "border-border-presentation-global-primary",
-        "bg-background-presentation-form-radiocard-base",
-        "hover:border-border-presentation-state-focus",
-        "focus:border-border-presentation-state-focus",
-        className,
-      )}
-    />
+    <Component htmlFor={htmlFor} {...props} className={cn(cardStyles({ variant }), className)} />
   );
 };
 

package/apps/lib/components/ColorPicker.tsx

@@ -0,0 +1,441 @@
+"use client";
+
+import React, {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from "react";
+import * as Slider from "@radix-ui/react-slider";
+
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+import { Group, Input } from "./Input";
+import {
+  clamp,
+  formatHex,
+  hslToRgb,
+  hsvToRgb,
+  parseHex,
+  rgbToHsl,
+  rgbToHsv,
+  round,
+  type HSV,
+} from "../utils/color";
+
+export interface ColorPickerProps {
+  /**
+   * The trigger — a single element that opens the picker (rendered via `asChild`, so it must
+   * forward its ref/props to a DOM node). ColorPicker renders **no trigger of its own**; it
+   * hands the current color to whatever you pass:
+   *
+   * - an **input** (native `<input>`/`<textarea>`, or any element already given a `value` prop)
+   *   receives the hex as its `value`;
+   * - **anything else** receives the hex as its `children` — unless it already has children of
+   *   its own, which are left untouched.
+   */
+  children: ReactElement;
+  /** Current color as a hex string (`#rrggbb` or `#rrggbbaa`). Defaults to `#000000`. */
+  value?: string;
+  /** Called with the new hex string on every change. */
+  onChange?: (hex: string) => void;
+  /** Quick-pick swatches shown at the bottom of the panel. */
+  presets?: string[];
+  /** Show the opacity slider + opacity input and emit `#rrggbbaa` when < 100%. Default true. */
+  alpha?: boolean;
+  disabled?: boolean;
+  theme?: Themes;
+}
+
+/** Native form controls, or any element already driven by a `value` prop, take the hex as `value`. */
+function isInputLike(el: ReactElement): boolean {
+  if (typeof el.type === "string") return el.type === "input" || el.type === "textarea";
+  return "value" in ((el.props ?? {}) as Record<string, unknown>);
+}
+
+type Mode = "hex" | "rgb" | "hsl";
+
+const HUE_GRADIENT =
+  "linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)";
+
+/** Small 8px checkerboard so transparency reads clearly behind swatches / the alpha track. */
+export const CHECKERBOARD: React.CSSProperties = {
+  backgroundColor: "#fff",
+  backgroundImage:
+    "linear-gradient(45deg,#c8c8c8 25%,transparent 25%),linear-gradient(-45deg,#c8c8c8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c8c8c8 75%),linear-gradient(-45deg,transparent 75%,#c8c8c8 75%)",
+  backgroundSize: "8px 8px",
+  backgroundPosition: "0 0,0 4px,4px -4px,-4px 0",
+};
+
+const THUMB_CLS =
+  "block h-[16px] w-[16px] rounded-full border-2 border-white bg-transparent shadow-[0_1px_4px_0_rgba(0,0,0,0.45)] outline-none transition-transform hover:scale-110 focus:ring-2 focus:ring-white/70";
+
+// Compact numeric inputs: allow shrinking below the base `min-w-[30px]` and drop the native
+// number spinners so a full row (3 channels + opacity) never overflows the fixed-width panel.
+const NUM_INPUT_CLS =
+  "min-w-0 px-0 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none";
+
+/**
+ * A full Figma-style color picker: a draggable saturation/value area, hue slider,
+ * optional opacity slider, an eyedropper (where supported), switchable HEX/RGB/HSL
+ * inputs, and preset swatches — all opened from a field-styled swatch trigger.
+ *
+ * The value is always a hex string, kept `#rrggbb` while fully opaque and promoted to
+ * `#rrggbbaa` only when opacity drops below 100%.
+ */
+export const ColorPicker = forwardRef<HTMLElement, ColorPickerProps>(
+  ({ children, value, onChange, presets, alpha = true, disabled, theme }, ref) => {
+    // Internal source of truth is HSV + alpha: keeping HSV (not RGB/hex) means dragging in the
+    // grey column or the black row doesn't discard the chosen hue.
+    const [hsv, setHsv] = useState<HSV>({ h: 0, s: 0, v: 0 });
+    const [a, setA] = useState(1);
+    const [mode, setMode] = useState<Mode>("hex");
+    const lastHexRef = useRef<string | null>(null);
+
+    const rgb = useMemo(() => hsvToRgb(hsv), [hsv]);
+    const hsl = useMemo(() => rgbToHsl(rgb), [rgb]);
+    const hex = useMemo(() => formatHex({ ...rgb, a }), [rgb, a]);
+    const hex6 = useMemo(() => formatHex({ ...rgb, a: 1 }), [rgb]);
+
+    // Sync FROM the controlled value — but skip the echo of our own last emit to avoid loops.
+    useEffect(() => {
+      if (!value) return;
+      if (value === lastHexRef.current) return;
+      const parsed = parseHex(value);
+      if (!parsed) return;
+      setHsv(rgbToHsv(parsed));
+      setA(parsed.a);
+      lastHexRef.current = value;
+    }, [value]);
+
+    const emit = useCallback(
+      (nextHsv: HSV, nextA: number) => {
+        setHsv(nextHsv);
+        setA(nextA);
+        const out = formatHex({ ...hsvToRgb(nextHsv), a: nextA });
+        lastHexRef.current = out;
+        onChange?.(out);
+      },
+      [onChange],
+    );
+
+    const applyHsv = useCallback((next: HSV, nextA = a) => emit(next, nextA), [emit, a]);
+    const applyRgba = useCallback(
+      (r: number, g: number, b: number, nextA = a) =>
+        emit(rgbToHsv({ r, g, b }), clamp(nextA, 0, 1)),
+      [emit, a],
+    );
+
+    // ── Saturation / value area ─────────────────────────────────────────────
+    const svRef = useRef<HTMLDivElement>(null);
+    const readSV = useCallback(
+      (clientX: number, clientY: number) => {
+        const el = svRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const x = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const y = clamp((clientY - rect.top) / rect.height, 0, 1);
+        applyHsv({ h: hsv.h, s: round(x * 100), v: round((1 - y) * 100) });
+      },
+      [applyHsv, hsv.h],
+    );
+
+    const onSVPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+      if (disabled) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      readSV(e.clientX, e.clientY);
+    };
+    const onSVPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+      if (disabled || e.buttons !== 1) return;
+      readSV(e.clientX, e.clientY);
+    };
+
+    // ── Eyedropper (Chromium/Edge only) ─────────────────────────────────────
+    const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
+    const pickWithEyeDropper = async () => {
+      try {
+        const ED = (
+          window as unknown as {
+            EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };
+          }
+        ).EyeDropper;
+        const res = await new ED().open();
+        const parsed = parseHex(res.sRGBHex);
+        if (parsed) applyRgba(parsed.r, parsed.g, parsed.b, parsed.a);
+      } catch {
+        /* user cancelled — ignore */
+      }
+    };
+
+    // ── HEX input draft (free typing, commit on blur / Enter) ────────────────
+    const [hexDraft, setHexDraft] = useState(hex6);
+    const hexFocused = useRef(false);
+    useEffect(() => {
+      if (!hexFocused.current) setHexDraft(hex6);
+    }, [hex6]);
+    const commitHex = () => {
+      const parsed = parseHex(hexDraft);
+      if (parsed) applyRgba(parsed.r, parsed.g, parsed.b, a);
+      else setHexDraft(hex6);
+    };
+
+    const opacityPct = round(a * 100);
+
+    // The trigger is the caller's child — ColorPicker renders none of its own. An input gets the
+    // hex as `value`; anything else gets it as `children` (unless it already has its own).
+    const trigger = useMemo(() => {
+      const childProps = (children.props ?? {}) as Record<string, unknown>;
+
+      if (isInputLike(children)) {
+        return cloneElement(children as ReactElement<Record<string, unknown>>, {
+          value: hex,
+          // A controlled input with no `onChange` warns in React — commit typed hex instead.
+          ...(childProps.onChange
+            ? {}
+            : {
+                onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                  const parsed = parseHex(e.target.value);
+                  if (parsed) applyRgba(parsed.r, parsed.g, parsed.b, parsed.a);
+                },
+              }),
+        });
+      }
+
+      if (childProps.children == null) {
+        return cloneElement(children as ReactElement<Record<string, unknown>>, {}, hex);
+      }
+      return children;
+    }, [children, hex, applyRgba]);
+
+    return (
+      <Popover>
+        <PopoverTrigger asChild disabled={disabled} ref={ref as React.Ref<HTMLButtonElement>}>
+          {trigger}
+        </PopoverTrigger>
+
+        <PopoverContent
+          variant="PresentationStyle"
+          theme={theme}
+          align="start"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          className="w-[300px] max-h-fit overflow-visible p-0"
+        >
+          <div className="flex flex-col gap-3 p-3">
+            {/* Saturation / value */}
+            <div
+              ref={svRef}
+              onPointerDown={onSVPointerDown}
+              onPointerMove={onSVPointerMove}
+              className="relative h-[150px] w-full cursor-crosshair touch-none rounded-[6px]"
+              style={{ backgroundColor: `hsl(${hsv.h},100%,50%)` }}
+            >
+              <div
+                className="absolute inset-0 rounded-[6px]"
+                style={{ backgroundImage: "linear-gradient(to right,#fff,rgba(255,255,255,0))" }}
+              />
+              <div
+                className="absolute inset-0 rounded-[6px]"
+                style={{ backgroundImage: "linear-gradient(to top,#000,rgba(0,0,0,0))" }}
+              />
+              <span
+                className="absolute h-[14px] w-[14px] -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_1px_4px_0_rgba(0,0,0,0.45)]"
+                style={{
+                  left: `${hsv.s}%`,
+                  top: `${100 - hsv.v}%`,
+                  backgroundColor: hex6,
+                }}
+              />
+            </div>
+
+            {/* Eyedropper + hue (+ alpha) sliders */}
+            <div className="flex items-center gap-2">
+              {hasEyeDropper && (
+                <button
+                  type="button"
+                  aria-label="Pick color from screen"
+                  onClick={pickWithEyeDropper}
+                  disabled={disabled}
+                  className="flex h-[28px] w-[28px] shrink-0 items-center justify-center rounded-[6px] border border-border-presentation-action-primary text-content-presentation-action-light-secondary transition-colors hover:bg-background-presentation-form-field-hover"
+                >
+                  <i className="ri-sip-line text-[16px]" />
+                </button>
+              )}
+
+              <div className="flex flex-1 flex-col gap-2">
+                <Slider.Root
+                  className="relative flex h-[14px] w-full touch-none select-none items-center"
+                  min={0}
+                  max={360}
+                  step={1}
+                  value={[hsv.h]}
+                  onValueChange={([h]) => applyHsv({ ...hsv, h })}
+                  disabled={disabled}
+                >
+                  <Slider.Track
+                    className="relative h-[10px] grow rounded-full"
+                    style={{ backgroundImage: HUE_GRADIENT }}
+                  >
+                    <Slider.Range className="absolute h-full rounded-full bg-transparent" />
+                  </Slider.Track>
+                  <Slider.Thumb
+                    className={THUMB_CLS}
+                    style={{ backgroundColor: `hsl(${hsv.h},100%,50%)` }}
+                  />
+                </Slider.Root>
+
+                {alpha && (
+                  <Slider.Root
+                    className="relative flex h-[14px] w-full touch-none select-none items-center"
+                    min={0}
+                    max={1}
+                    step={0.01}
+                    value={[a]}
+                    onValueChange={([na]) => applyHsv(hsv, na)}
+                    disabled={disabled}
+                  >
+                    <Slider.Track
+                      className="relative h-[10px] grow overflow-hidden rounded-full"
+                      style={CHECKERBOARD}
+                    >
+                      <div
+                        className="absolute inset-0"
+                        style={{
+                          backgroundImage: `linear-gradient(to right,rgba(${rgb.r},${rgb.g},${rgb.b},0),rgb(${rgb.r},${rgb.g},${rgb.b}))`,
+                        }}
+                      />
+                      <Slider.Range className="absolute h-full rounded-full bg-transparent" />
+                    </Slider.Track>
+                    <Slider.Thumb className={THUMB_CLS} style={{ backgroundColor: hex }} />
+                  </Slider.Root>
+                )}
+              </div>
+            </div>
+
+            {/* Model switch + numeric inputs */}
+            <div className="flex items-start gap-2">
+              <select
+                value={mode}
+                disabled={disabled}
+                onChange={(e) => setMode(e.target.value as Mode)}
+                className="h-[30px] w-[54px] shrink-0 rounded-[6px] border border-border-presentation-action-primary bg-background-presentation-form-field-primary px-1 typography-body-small-regular text-content-presentation-action-light-primary outline-none"
+              >
+                <option value="hex">HEX</option>
+                <option value="rgb">RGB</option>
+                <option value="hsl">HSL</option>
+              </select>
+
+              <div className="flex min-w-0 flex-1 items-center gap-1">
+                {mode === "hex" && (
+                  <Group size="S" className="min-w-0 flex-1">
+                    <Input
+                      value={hexDraft}
+                      disabled={disabled}
+                      onFocus={() => (hexFocused.current = true)}
+                      onChange={(e) => setHexDraft(e.target.value)}
+                      onBlur={() => {
+                        hexFocused.current = false;
+                        commitHex();
+                      }}
+                      onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
+                      className="min-w-0 text-center"
+                    />
+                  </Group>
+                )}
+
+                {mode === "rgb" &&
+                  (["r", "g", "b"] as const).map((ch) => (
+                    <Group key={ch} size="S" className="min-w-0 flex-1 px-0">
+                      <Input
+                        type="number"
+                        min={0}
+                        max={255}
+                        disabled={disabled}
+                        value={rgb[ch]}
+                        onChange={(e) => {
+                          const n = clamp(Number(e.target.value) || 0, 0, 255);
+                          applyRgba(
+                            ch === "r" ? n : rgb.r,
+                            ch === "g" ? n : rgb.g,
+                            ch === "b" ? n : rgb.b,
+                            a,
+                          );
+                        }}
+                        className={NUM_INPUT_CLS}
+                      />
+                    </Group>
+                  ))}
+
+                {mode === "hsl" &&
+                  (["h", "s", "l"] as const).map((ch) => (
+                    <Group key={ch} size="S" className="min-w-0 flex-1 px-0">
+                      <Input
+                        type="number"
+                        min={0}
+                        max={ch === "h" ? 360 : 100}
+                        disabled={disabled}
+                        value={hsl[ch]}
+                        onChange={(e) => {
+                          const n = clamp(Number(e.target.value) || 0, 0, ch === "h" ? 360 : 100);
+                          const next = { ...hsl, [ch]: n };
+                          const r = hslToRgb(next);
+                          applyRgba(r.r, r.g, r.b, a);
+                        }}
+                        className={NUM_INPUT_CLS}
+                      />
+                    </Group>
+                  ))}
+
+                {alpha && (
+                  <Group size="S" className="w-[48px] shrink-0 gap-0 px-0">
+                    <Input
+                      type="number"
+                      min={0}
+                      max={100}
+                      disabled={disabled}
+                      value={opacityPct}
+                      onChange={(e) => {
+                        const n = clamp(Number(e.target.value) || 0, 0, 100);
+                        applyHsv(hsv, n / 100);
+                      }}
+                      className={NUM_INPUT_CLS}
+                    />
+                    <span className="pr-1 typography-body-small-regular text-content-presentation-action-light-secondary">
+                      %
+                    </span>
+                  </Group>
+                )}
+              </div>
+            </div>
+
+            {/* Presets */}
+            {presets && presets.length > 0 && (
+              <div className="flex flex-wrap items-center gap-1.5 border-t border-border-presentation-global-primary pt-3">
+                {presets.map((c) => (
+                  <button
+                    key={c}
+                    type="button"
+                    aria-label={c}
+                    disabled={disabled}
+                    onClick={() => {
+                      const parsed = parseHex(c);
+                      if (parsed) applyRgba(parsed.r, parsed.g, parsed.b, parsed.a);
+                    }}
+                    style={{ backgroundColor: c }}
+                    className="h-[20px] w-[20px] rounded-[4px] border border-border-presentation-action-primary transition-transform hover:scale-110"
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+ColorPicker.displayName = "ColorPicker";

package/apps/lib/components/ConclusionHeader.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import React, { forwardRef, useState, ButtonHTMLAttributes, ReactNode } from "react";
+import { Badge } from "./Badge";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+export interface ConclusionHeaderProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "onClick"
+> {
+  /** The header text. */
+  label: ReactNode;
+  /** Controlled open state. Omit to let the header manage its own (uncontrolled). */
+  open?: boolean;
+  /** Initial open state when uncontrolled (default `true`). */
+  defaultOpen?: boolean;
+  /** Called with the next open state when the header is clicked. */
+  onOpenChange?: (open: boolean) => void;
+  /** Disabled — greys the label and shows a "Disabled" badge instead of the chevron. */
+  disabled?: boolean;
+  /** Badge text shown when `disabled` (default `"Disabled"`). */
+  disabledLabel?: string;
+  theme?: Themes;
+  className?: string;
+}
+
+/**
+ * `ConclusionHeader` — a clickable section header, per the "Conclusion-Header-2.0" design.
+ *
+ * The surfaces are **button overlays**, not an input field: at rest the label stands alone;
+ * on hover the row gains a `Button/ContStyle-Hover` pill and the chevron a `Button/Secondary`
+ * box. The chevron is hidden at rest while open, shows sideways when closed (left in LTR,
+ * right in RTL), and flips to down on hover. When `disabled` the label greys out, truncates
+ * at 120px, and a gray-subtle `Badge` replaces the chevron.
+ *
+ * Direction is inherited from the ambient `dir` — the RTL design variants are the LTR ones
+ * mirrored, which the logical properties here produce automatically.
+ *
+ * Works controlled (`open` + `onOpenChange`) or uncontrolled.
+ *
+ * ```tsx
+ * <ConclusionHeader label="Total" defaultOpen onOpenChange={setOpen} />
+ * {open && <section>…</section>}
+ * ```
+ */
+export const ConclusionHeader = forwardRef<HTMLButtonElement, ConclusionHeaderProps>(
+  (
+    {
+      label,
+      open: openProp,
+      defaultOpen = true,
+      onOpenChange,
+      disabled = false,
+      disabledLabel = "Disabled",
+      theme,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    // Controlled when `open` is passed; otherwise manage state internally.
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = openProp ?? internalOpen;
+
+    const toggle = () => {
+      if (disabled) return;
+      if (openProp === undefined) setInternalOpen((o) => !o);
+      onOpenChange?.(!open);
+    };
+
+    return (
+      <button
+        {...props}
+        ref={ref}
+        type="button"
+        disabled={disabled}
+        aria-expanded={disabled ? undefined : open}
+        data-theme={theme}
+        data-state={open ? "open" : "closed"}
+        onClick={toggle}
+        className={cn(
+          // The hover surface is ONE full-width pill (design: 216×28, r6); the chevron box
+          // sits flush inside its trailing end, 6px off the label.
+          "group/collapsible flex h-[28px] w-full items-center gap-[6px] overflow-hidden rounded-[6px]",
+          "transition-all duration-200 ease-in-out",
+          "outline-none focus-visible:ring-1 focus-visible:ring-border-presentation-state-focus",
+          disabled
+            ? "cursor-not-allowed"
+            : // Design insets the label by 4px once the pill appears.
+              "cursor-pointer hover:bg-background-presentation-button-contstyle-hover hover:ps-[4px]",
+          className,
+        )}
+      >
+        {disabled ? (
+          <>
+            {/* Design: label shrinks to 120px and the badge sits right beside it, not at the end. */}
+            <span
+              className={cn(
+                "max-w-[120px] shrink-0 truncate text-start",
+                "typography-headers-medium-medium",
+                "text-content-presentation-global-secondary",
+              )}
+            >
+              {label}
+            </span>
+            <Badge label={disabledLabel} badgeStyle="subtle" color="gray" size="S" />
+          </>
+        ) : (
+          <>
+            <span
+              className={cn(
+                "min-w-0 flex-1 truncate text-start",
+                // Design: En/Header/Medium/Medium — 18px / 510 / 132% / -0.18px.
+                "typography-headers-medium-medium",
+                "text-content-presentation-global-primary",
+              )}
+            >
+              {label}
+            </span>
+
+            {/* Chevron — bare when closed at rest; gains a Button/Secondary box on hover. */}
+            <span
+              className={cn(
+                "flex size-[28px] shrink-0 items-center justify-center rounded-[6px] p-[5px]",
+                "text-content-presentation-global-primary",
+                "transition-all duration-200 ease-in-out",
+                "group-hover/collapsible:bg-background-presentation-button-secondary",
+                // Hidden at rest while open; always visible when closed; hover reveals.
+                open ? "opacity-0 group-hover/collapsible:opacity-100" : "opacity-100",
+              )}
+            >
+              <i
+                className={cn(
+                  "ri-arrow-down-s-line text-[18px] transition-transform duration-200 ease-in-out",
+                  // Down when open; sideways when closed (left LTR / right RTL); hover → down.
+                  !open && "ltr:rotate-90 rtl:-rotate-90 group-hover/collapsible:!rotate-0",
+                )}
+              />
+            </span>
+          </>
+        )}
+      </button>
+    );
+  },
+);
+
+ConclusionHeader.displayName = "ConclusionHeader";

package/apps/lib/components/DatePicker.tsx

@@ -35,6 +35,8 @@ interface DatePickerProps extends HTMLAttributes<HTMLInputElement> {
   calendarProps?: CalendarProps;
   timePicker?: boolean;
   value?: Date | Date[] | DateRange;
+  /** Transparent border/background so the picker blends into a table cell. */
+  onTable?: boolean;
 }
 
 export const DatePicker = forwardRef(