torch-glare 2.4.4 → 2.5.0

package/apps/lib/components/FormBuilder/fields/TableField.tsx

@@ -21,7 +21,16 @@ import {
 
 import { cn } from "../../../utils/cn";
 import { SectionBlock } from "../../SectionBlock";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../Table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEndAction,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableScroller,
+} from "../../Table";
 import { Checkbox } from "../../Checkbox";
 import { Button } from "../../Button";
 import { CellContext, useLoading } from "../context";
@@ -50,6 +59,8 @@ export function TableField(props: TableFieldProps) {
 
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [sort, setSort] = useState<{ key: string; dir: "asc" | "desc" } | null>(null);
+  // Drag-resized column widths, keyed by column index; falls back to `column.width`.
+  const [resized, setResized] = useState<Record<number, number>>({});
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -112,6 +123,25 @@ export function TableField(props: TableFieldProps) {
 
   const totalCols = columns.length + (showHandle ? 1 : 0) + (showSelect ? 1 : 0);
 
+  // Under the browser's default `table-layout: auto`, a column's `width` is only a hint —
+  // content (an input's intrinsic size, a currency prefix) silently widens it, which is why
+  // a `width: 110` column used to render at 200-odd px. When every column declares a width
+  // we can switch to fixed layout and have them honoured exactly. Mixed/absent widths keep
+  // auto layout, since under fixed layout an unsized column would collapse to nothing.
+  //
+  // Fixed layout also needs a *definite* table width — with `width: auto` the browser sizes
+  // the table from content and then redistributes, throwing the declared widths (and any
+  // drag-resize) away. So the widths are owned here and totalled onto the table, which is
+  // what lets a drag grow the table instead of stealing space from the next column.
+  const DUMMY_COL_WIDTH = 40; // the design's onset / selector columns
+  const colWidth = (col: TableColumn, ci: number) => resized[ci] ?? col.width;
+  const fixedLayout = columns.length > 0 && columns.every((col, ci) => !!colWidth(col, ci));
+  const tableWidth = fixedLayout
+    ? columns.reduce((sum, col, ci) => sum + (colWidth(col, ci) ?? 0), 0) +
+      (showHandle ? DUMMY_COL_WIDTH : 0) +
+      (showSelect ? DUMMY_COL_WIDTH : 0)
+    : undefined;
+
   const rowCells = (rowName: string, index: number) => (
     <>
       {showSelect && (
@@ -126,25 +156,35 @@ export function TableField(props: TableFieldProps) {
       {columns.map((col, ci) => (
         <TableCell
           key={ci}
-          style={col.width ? { width: col.width } : undefined}
-          childrenClassName={cn(
-            "min-w-0 w-full [&:has(input)]:bg-transparent",
-            col.align && ALIGN[col.align],
-          )}
+          style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
+          // Column widths come from `col.width`, so opt out of TableCell's 200px floor —
+          // otherwise a narrow column (e.g. `width: 110`) silently renders at 200px.
+          minWidth={0}
+          // Every cell here holds a form control, and the right-edge fade washes out whatever
+          // sits at its end — a Select's chevron, a date picker's button.
+          fade={false}
+          childrenClassName={cn("min-w-0 w-full", col.align && ALIGN[col.align])}
         >
-          <CellContext.Provider value={true}>{col.cell(rowName, index)}</CellContext.Provider>
+          <CellContext.Provider value="table">{col.cell(rowName, index)}</CellContext.Provider>
         </TableCell>
       ))}
     </>
   );
 
   const table = (
-    <Table>
+    // `min-w-full` so the grid still spans the card when the columns are narrower than it,
+    // while staying free to overflow (and scroll) when they aren't.
+    <Table
+      className={cn("min-w-full", fixedLayout && "[table-layout:fixed]")}
+      style={tableWidth ? { width: tableWidth } : undefined}
+    >
       <TableHeader>
         <TableRow>
-          {showHandle && <TableHead isDummy />}
+          {/* Fixed 40px, per the design — and so these unsized columns can't absorb the
+              table's slack width and push the data columns off-screen. */}
+          {showHandle && <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }} />}
           {showSelect && (
-            <TableHead isDummy>
+            <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }}>
               <Checkbox
                 size="S"
                 checked={allSelected ? true : someSelected ? "indeterminate" : false}
@@ -155,7 +195,11 @@ export function TableField(props: TableFieldProps) {
           {columns.map((col, ci) => (
             <TableHead
               key={ci}
+              // Width goes on the <th> too, so header and body columns agree.
+              style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
+              onResize={(w) => setResized((prev) => ({ ...prev, [ci]: w }))}
               sortType={col.sortKey && sort?.key === col.sortKey ? sort.dir : undefined}
+              sortLabel={typeof col.header === "string" ? col.header : undefined}
               onSort={col.sortKey ? () => applySort(col.sortKey as string) : undefined}
             >
               {col.header}
@@ -183,58 +227,40 @@ export function TableField(props: TableFieldProps) {
 
         {fields.length === 0 && (
           <TableRow>
-            <TableCell colSpan={totalCols}>
+            <TableCell colSpan={totalCols} minWidth={0}>
               <span className="typography-body-small-regular text-content-presentation-global-secondary">
                 No rows yet.
               </span>
             </TableCell>
           </TableRow>
         )}
-
-        <TableRow className="h-[40px]">
-          <TableCell
-            colSpan={totalCols}
-            className="border-t-2 border-transparent hover:border-border-presentation-table-action-hover hover:bg-background-presentation-table-acton-hover"
-          >
-            <button
-              type="button"
-              disabled={loading}
-              onClick={() => append((props.defaultItem ?? {}) as never)}
-              className="flex w-full items-center justify-start gap-2 typography-body-medium-semibold text-content-presentation-action-light-primary [&_i]:text-[20px]"
-            >
-              <i className="ri-add-line" />
-              {props.addLabel ?? "Add New"}
-            </button>
-          </TableCell>
-        </TableRow>
       </TableBody>
     </Table>
   );
 
   // Header actions on the right of the SectionBlock title row: a "Delete Row" that's disabled
-  // until rows are selected, and a primary "Add New".
+  // until rows are selected, and a primary "Add New". They live outside the scroll container,
+  // so they stay put while the grid scrolls sideways.
   const headerActions = (
     <>
       {selectable && (
         <Button
           type="button"
-          size="S"
+          size="M"
           variant="BorderStyle"
           disabled={loading || selected.size === 0}
           onClick={deleteSelected}
         >
-          <i className="ri-delete-bin-line" />
           Delete Row
         </Button>
       )}
       <Button
         type="button"
-        size="S"
+        size="M"
         variant="BluColStyle"
         disabled={loading}
         onClick={() => append((props.defaultItem ?? {}) as never)}
       >
-        <i className="ri-add-line" />
         {props.addLabel ?? "Add New"}
       </Button>
     </>
@@ -242,32 +268,34 @@ export function TableField(props: TableFieldProps) {
 
   return (
     <SectionBlock
+      variant="Table"
       title={props.title}
       color={props.color}
       icon={props.icon}
       action={headerActions}
-      bodyClassName="px-[16px]"
-      // The bottom "Add New" footer is the last element, so drop SectionBlock's default
-      // bottom padding to keep the table flush with the card edge (matches the Figma).
-      containerClassName="pb-0"
     >
-      <div className="flex w-full flex-col gap-2">
-        {props.description && (
-          <p className="typography-body-small-regular text-content-presentation-global-secondary">
-            {props.description}
-          </p>
+      {props.description && (
+        <p className="px-[16px] pt-[12px] typography-body-small-regular text-content-presentation-global-secondary">
+          {props.description}
+        </p>
+      )}
+
+      {/* The table is the only horizontally scrolling element … */}
+      <TableScroller>
+        {showHandle ? (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            {table}
+          </DndContext>
+        ) : (
+          table
         )}
+      </TableScroller>
 
-        <div className="w-full overflow-x-auto">
-          {showHandle ? (
-            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
-              {table}
-            </DndContext>
-          ) : (
-            table
-          )}
-        </div>
-      </div>
+      {/* … so this stays visible no matter how far right the columns are scrolled. */}
+      <TableEndAction disabled={loading} onClick={() => append((props.defaultItem ?? {}) as never)}>
+        <i className="ri-add-line" />
+        {props.addLabel ?? "Add New"}
+      </TableEndAction>
     </SectionBlock>
   );
 }

package/apps/lib/components/FormBuilder/fields/TextField.tsx

@@ -6,7 +6,7 @@ import type { ControllerRenderProps, FieldValues } from "react-hook-form";
 import { InputField } from "../../InputField";
 import { Textarea } from "../../Textarea";
 import { PasswordLevel } from "../../PasswordLevel";
-import { useLoading, useCell } from "../context";
+import { useLoading, useOnTable } from "../context";
 import { formatNumber } from "../numberFormat";
 import type { BaseFieldProps, CurrencyFieldProps, PasswordFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
@@ -107,7 +107,7 @@ function NumberInput({
 
 function TextLike({ props, type }: { props: BaseFieldProps; type: "text" | "email" | "password" }) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -117,7 +117,7 @@ function TextLike({ props, type }: { props: BaseFieldProps; type: "text" | "emai
           value={field.value ?? ""}
           placeholder={props.placeholder}
           disabled={props.disabled || loading}
-          onTable={cell}
+          onTable={onTable}
           className="w-full"
         />
       )}
@@ -133,7 +133,7 @@ export function EmailField(props: BaseFieldProps) {
 }
 export function PasswordField(props: PasswordFieldProps) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -144,7 +144,7 @@ export function PasswordField(props: PasswordFieldProps) {
             value={field.value ?? ""}
             placeholder={props.placeholder}
             disabled={props.disabled || loading}
-            onTable={cell}
+            onTable={onTable}
             className="w-full"
           />
           {props.strengthMeter && <PasswordLevel value={field.value ?? ""} />}
@@ -156,7 +156,7 @@ export function PasswordField(props: PasswordFieldProps) {
 
 export function NumberField(props: BaseFieldProps) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -164,7 +164,7 @@ export function NumberField(props: BaseFieldProps) {
           field={field}
           placeholder={props.placeholder}
           disabled={props.disabled || loading}
-          onTable={cell}
+          onTable={onTable}
         />
       )}
     </FieldShell>
@@ -173,7 +173,7 @@ export function NumberField(props: BaseFieldProps) {
 
 export function CurrencyField(props: CurrencyFieldProps) {
   const loading = useLoading();
-  const cell = useCell();
+  const onTable = useOnTable();
   return (
     <FieldShell {...props}>
       {(field) => (
@@ -186,7 +186,7 @@ export function CurrencyField(props: CurrencyFieldProps) {
           }
           placeholder={props.placeholder}
           disabled={props.disabled || loading}
-          onTable={cell}
+          onTable={onTable}
         />
       )}
     </FieldShell>

package/apps/lib/components/FormBuilder/form-builder.tsx

@@ -6,8 +6,9 @@ import { useForm, type FieldValues } from "react-hook-form";
 
 import { cn } from "../../utils/cn";
 import { Form } from "../Form";
-import { SectionBlock, type SectionColor } from "../SectionBlock";
+import { SectionBlock, type SectionColor, type SectionVariant } from "../SectionBlock";
 import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
+import { markFieldKind } from "./field-kind";
 import { Header } from "./header";
 import type { FormBuilderRootProps } from "./types";
 import {
@@ -57,13 +58,21 @@ export interface SectionProps {
   title?: ReactNode;
   color?: SectionColor;
   icon?: ReactNode;
+  /**
+   * `"Table"` switches to the full-bleed table shell — no body padding, a rule under
+   * the header, and the card clipped to its radius. `FormBuilder.Table` uses it; pass
+   * it here only when hand-composing a table inside a section.
+   */
+  variant?: SectionVariant;
+  /** Right-aligned content on the title row — e.g. action buttons. */
+  action?: ReactNode;
   children: ReactNode;
 }
 
 /** `FormBuilder.Section` — a titled Glare SectionBlock grouping fields. */
-function Section({ title, color, icon, children }: SectionProps) {
+function Section({ title, color, icon, variant, action, children }: SectionProps) {
   return (
-    <SectionBlock title={title} color={color} icon={icon}>
+    <SectionBlock title={title} color={color} icon={icon} variant={variant} action={action}>
       {children}
     </SectionBlock>
   );
@@ -89,6 +98,7 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   values,
   loading = false,
   fieldDirection,
+  layout = "page",
   resetOnSuccess,
   conclusion,
   className,
@@ -140,10 +150,18 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
     rest
   );
 
-  // The fields column caps at 1200px and centers — as the middle column of the grid, and
-  // standalone.
+  // The fields column caps at 1100px and centers — as the middle column of the grid, and
+  // standalone. `layout="bare"` drops the cap and the gutters so an embedded form fills its
+  // container instead: 48px of padding a side is most of a settings rail.
   const fieldsInner = (
-    <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4 px-[48px]">{fields}</div>
+    <div
+      className={cn(
+        "flex w-full flex-col gap-4",
+        layout === "page" && "mx-auto max-w-[1100px] px-[48px]",
+      )}
+    >
+      {fields}
+    </div>
   );
 
   const formEl = (
@@ -276,3 +294,45 @@ export const FormBuilder = Object.assign(FormBuilderRoot, {
   Back,
   Next,
 });
+
+/**
+ * What each field produces, for consumers that read a form they did not author.
+ *
+ * Stamped here rather than on the field definitions because the aliases — `DateRange`, `Tags`,
+ * `Image` — only exist in the table above, and a reader checking "is this list complete?" should
+ * have one place to look. `Tags` and `MultiSelect` are the same component, so the repeat is
+ * harmless.
+ */
+(
+  [
+    [FormBuilder.Text, "text"],
+    [FormBuilder.Email, "text"],
+    [FormBuilder.Password, "text"],
+    [FormBuilder.Textarea, "text"],
+    [FormBuilder.Otp, "text"],
+    [FormBuilder.Color, "text"],
+    [FormBuilder.Phone, "text"],
+    [FormBuilder.Number, "number"],
+    [FormBuilder.Currency, "number"],
+    [FormBuilder.Select, "choice"],
+    [FormBuilder.SearchableSelect, "choice"],
+    [FormBuilder.RadioList, "choice"],
+    [FormBuilder.RadioCards, "choice"],
+    [FormBuilder.MultiSelect, "multiChoice"],
+    [FormBuilder.Tags, "multiChoice"],
+    [FormBuilder.CheckboxGroup, "multiChoice"],
+    [FormBuilder.TreeSelect, "multiChoice"],
+    [FormBuilder.Checkbox, "boolean"],
+    [FormBuilder.SwitchBox, "boolean"],
+    [FormBuilder.Date, "date"],
+    [FormBuilder.DateRange, "date"],
+    [FormBuilder.DateTime, "date"],
+    [FormBuilder.DateMultiple, "date"],
+    [FormBuilder.Slider, "slider"],
+    [FormBuilder.Custom, "custom"],
+    [FormBuilder.File, "custom"],
+    [FormBuilder.Image, "custom"],
+    [FormBuilder.Signature, "custom"],
+    [FormBuilder.RichText, "custom"],
+  ] as const
+).forEach(([component, kind]) => markFieldKind(component, kind));

package/apps/lib/components/FormBuilder/index.ts

@@ -1,12 +1,14 @@
 export { FormBuilder } from "./form-builder";
 export type { SectionProps } from "./form-builder";
+export { fieldKindOf, markFieldKind } from "./field-kind";
 export { FormHeaderBar } from "./header";
 export type { HeaderProps, HeaderVariant, FormHeaderBarProps } from "./header";
 export { RichTextField } from "../TextEditor/RichTextField";
 export type { StepProps } from "./stepper";
-export type { FieldDirection } from "./context";
+export type { FieldDirection, CellMode } from "./context";
 export type {
   BaseFieldProps,
+  FieldKind,
   OptionItem,
   SelectFieldProps,
   SearchableSelectFieldProps,

package/apps/lib/components/FormBuilder/types.ts

@@ -11,6 +11,35 @@ import type {
 import type { FieldDirection } from "./context";
 import type { SectionColor } from "../SectionBlock";
 
+/**
+ * What shape of value a field produces, stamped on each `FormBuilder.*` field component.
+ *
+ * This is for consumers that have to interpret a form they did not author — `DataViews.Filters`
+ * reads it to decide whether a child's value becomes a list, a numeric range or a date range. It
+ * describes the field, not any one consumer's use of it.
+ *
+ * Read it with `fieldKindOf(element)` rather than comparing `element.type` against an imported
+ * component: identity comparison breaks across duplicated module instances and stops matching
+ * after a hot reload.
+ */
+export type FieldKind =
+  /** A string value — `Text`, `Textarea`, `Email`, `Password`, `Color`, `Phone`, `Otp`. */
+  | "text"
+  /** A number — `Number`, `Currency`. */
+  | "number"
+  /** One of a supplied list — `Select`, `SearchableSelect`, `RadioList`, `RadioCards`. */
+  | "choice"
+  /** Several of a supplied list — `MultiSelect`, `Tags`, `CheckboxGroup`, `TreeSelect`. */
+  | "multiChoice"
+  /** A boolean — `Checkbox`, `SwitchBox`. */
+  | "boolean"
+  /** A date or date range — `Date`, `DateRange`, `DateTime`, `DateMultiple`. */
+  | "date"
+  /** Two numbers when `range`, otherwise one — `Slider`. */
+  | "slider"
+  /** Whatever the caller renders — `Custom`, `File`, `Image`, `Signature`, `RichText`. */
+  | "custom";
+
 /** Props shared by every `FormBuilder.*` field. `name` is the RHF path. */
 export interface BaseFieldProps {
   name: string;
@@ -249,6 +278,17 @@ export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
   loading?: boolean;
   /** Field row direction. Defaults to horizontal (vertical inside a drawer). */
   fieldDirection?: FieldDirection;
+  /**
+   * How the fields column is framed.
+   *
+   * `"page"` (the default) is the full-page form: centred, capped at 1100px, and held off the
+   * edges by 48px gutters.
+   *
+   * `"bare"` drops all three so the fields fill whatever they are placed inside. Use it when the
+   * form is embedded in something narrow — a 260px settings rail has no room to give up 96px to
+   * gutters, and its controls would overflow the panel rather than fill it.
+   */
+  layout?: "page" | "bare";
   /** Reset to defaults after a successful submit. */
   resetOnSuccess?: boolean;
   /**

package/apps/lib/components/Input.tsx

@@ -198,6 +198,9 @@ export const GroupStyles = cva(
           "hover:caret-border-presentation-state-negative",
         ],
       },
+      // Transparent border/background so the control blends into a table cell. The hover and
+      // focus shadows are deliberately left alone — a cell control lifts exactly like any
+      // other field.
       onTable: {
         true: ["border-transparent", "bg-transparent"],
       },

package/apps/lib/components/SearchableTable.tsx

@@ -224,12 +224,13 @@ export function SearchableTable<T extends Record<string, unknown>>({
                   data-theme="dark"
                   className="w-full rounded-[10px] overflow-hidden"
                 >
-                  <TableHeader className="bg-black-alpha-20 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]">
-                    <TableRow className="h-[44px] [&_button]:bg-white-alpha-40 [&>th]:border-white-alpha-20">
+                  <TableHeader className="backdrop-blur-none bg-black-alpha-20 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]">
+                    <TableRow className="h-[44px] [&_button:not([data-slot=resize-handle])]:bg-white-alpha-40 [&>th]:border-white-alpha-20">
                       {columns.map((col) => (
                         <TableHead
                           key={col.key}
-                          className="cursor-default typography-body-medium-medium text-white"
+                          className="cursor-default"
+                          contentClassName="typography-body-medium-medium text-white"
                         >
                           {col.header}
                         </TableHead>
@@ -252,7 +253,7 @@ export function SearchableTable<T extends Record<string, unknown>>({
                           {columns.map((col) => (
                             <TableCell
                               key={col.key}
-                              className="border-b border-white-alpha-20 text-white px-[8px] !whitespace-nowrap !break-normal"
+                              className="h-[40px] border-b border-white-alpha-20 text-white px-[8px] !whitespace-nowrap !break-normal"
                             >
                               {col.render ? col.render(row) : String(row[col.key] ?? "")}
                             </TableCell>

package/apps/lib/components/SectionBlock.tsx

@@ -21,9 +21,61 @@ const titleBadge = cva(
   },
 );
 
+const container = cva(
+  "flex w-full px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+  {
+    variants: {
+      variant: {
+        Default: "pt-[6px] pb-[24px]",
+        // No bottom padding — the table's end-action row is the last element and meets
+        // the card edge; `overflow-hidden` clips it to the 16px radius.
+        Table: "pt-[6px] pb-0 overflow-hidden",
+      },
+    },
+    defaultVariants: { variant: "Default" },
+  },
+);
+
+const header = cva("flex px-[6px] justify-between gap-3", {
+  variants: {
+    variant: {
+      Default: "items-center",
+      Table: "items-start",
+    },
+  },
+  defaultVariants: { variant: "Default" },
+});
+
+const body = cva("flex w-full flex-col", {
+  variants: {
+    variant: {
+      Default: "px-[42px] gap-[2px]",
+      // Full bleed, with the rule that separates the header from the table.
+      Table: "mt-[6px] border-t border-border-presentation-global-primary overflow-hidden",
+    },
+  },
+  defaultVariants: { variant: "Default" },
+});
+
+const rail = cva("flex w-full min-w-[300px] flex-col items-start", {
+  variants: {
+    variant: {
+      // Hairline between each direct child (form rows).
+      Default: "divide-y divide-gray-300",
+      // The table draws its own row borders — a divide rule would double up on the
+      // table / scroller / end-action siblings.
+      Table: "",
+    },
+  },
+  defaultVariants: { variant: "Default" },
+});
+
 export type SectionColor = NonNullable<VariantProps<typeof titleBadge>["color"]>;
+export type SectionVariant = NonNullable<VariantProps<typeof container>["variant"]>;
 
-export interface SectionBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+export interface SectionBlockProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof container> {
   color?: SectionColor;
   title?: ReactNode;
   icon?: ReactNode;
@@ -39,6 +91,7 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
     {
       children,
       color,
+      variant,
       title,
       action,
       className,
@@ -53,15 +106,11 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
     return (
       <div
         ref={ref}
-        className={cn(
-          "flex  w-full pt-[6px] pb-[24px] px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
-          className,
-          containerClassName,
-        )}
+        className={cn(container({ variant }), className, containerClassName)}
         {...props}
       >
         {(title || action) && (
-          <div className={cn("flex px-[6px] items-center justify-between gap-3", headerClassName)}>
+          <div className={cn(header({ variant }), headerClassName)}>
             {title ? (
               <div className={cn(titleBadge({ color }))}>
                 <span className="flex items-center gap-1.5">
@@ -75,10 +124,8 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
             {action && <div className="flex shrink-0 items-center gap-2">{action}</div>}
           </div>
         )}
-        <div className={cn("flex px-[42px] flex-col gap-[2px] px-[42px]", bodyClassName)}>
-          <div className="flex w-full divide-y divide-gray-300 min-w-[300px]  flex-col items-start ">
-            {children}
-          </div>
+        <div className={cn(body({ variant }), bodyClassName)}>
+          <div className={cn(rail({ variant }))}>{children}</div>
         </div>
       </div>
     );

package/apps/lib/components/Select.tsx

@@ -293,7 +293,9 @@ const PopoverTriggerStyles = cva(
           "hover:caret-border-presentation-state-negative",
         ],
       },
-      // Transparent border/background so the trigger blends into a table cell.
+      // Transparent border/background so the trigger blends into a table cell. The hover and
+      // focus shadows are deliberately left alone — a cell control lifts exactly like any
+      // other field.
       onTable: {
         true: ["border-transparent", "bg-transparent"],
       },