torch-glare 2.4.2 → 2.4.4

package/apps/lib/components/FormRenderer/detail.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "../../utils/cn";
+import { formBarItemStyles } from "../TabFormItem";
+import { FormHeaderBar, type HeaderVariant } from "../FormBuilder/header";
+
+/**
+ * Detail-tabs — a display-only view where a left **sidebar** switches the main area between
+ * **`FormBuilder.Section` panels** (a detail page, not a form). It lives on `FormRenderer`
+ * (`FormRenderer.Sidebar` / `.Sidebar.Item` / `.Tab`) so `FormBuilder` stays form-only. Built on
+ * the same Radix Tabs primitive shadcn uses: the sidebar is the `Tabs.List`, each `Sidebar.Item` a
+ * `Tabs.Trigger`, each `Tab` a `Tabs.Content` — so the fixed rail and the panels share tab state.
+ */
+
+export interface DetailSidebarProps {
+  children: React.ReactNode;
+}
+
+/**
+ * `FormRenderer.Sidebar` — the tab rail, sitting where a `FormBuilder.Stepper`'s nav would.
+ * Renders **nothing itself**: the FormRenderer root detects it and places its `Sidebar.Item`
+ * children (the tab triggers) into the fixed rail.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- children are read by the FormRenderer root
+function DetailSidebarRoot(_props: DetailSidebarProps) {
+  return null;
+}
+(DetailSidebarRoot as unknown as { __isDetailSidebar: boolean }).__isDetailSidebar = true;
+
+export interface DetailSidebarItemProps {
+  /** Ties this row to the `FormRenderer.Tab` of the same `value` — clicking it shows that panel. */
+  value: string;
+  /** Leading icon (e.g. a Remix `<i className="ri-…" />`). */
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * `FormRenderer.Sidebar.Item` — a rail nav row, rendered as a Radix `Tabs.Trigger` styled with the
+ * `TabFormItem` `tree` look. Radix drives the active state (`data-state="active"` → black pill).
+ */
+function DetailSidebarItem({ value, icon, children }: DetailSidebarItemProps) {
+  return (
+    <TabsPrimitive.Trigger
+      value={value}
+      className={cn(
+        formBarItemStyles({ componentType: "tree" }),
+        "h-[32px] w-full justify-start gap-2 rounded-[10px] px-[6px] [&_i]:text-[16px]",
+        // Radix sets `data-state` on the trigger; the active tab is the filled (black) pill.
+        "data-[state=active]:bg-background-presentation-tab-topbar-selected data-[state=active]:text-content-presentation-tab-action-selected",
+        "data-[state=active]:hover:bg-background-presentation-tab-topbar-selected data-[state=active]:hover:px-[6px]",
+      )}
+    >
+      {icon}
+      <span className="flex-1 truncate text-left typography-body-medium-medium">{children}</span>
+    </TabsPrimitive.Trigger>
+  );
+}
+
+export const DetailSidebar = Object.assign(DetailSidebarRoot, {
+  Item: DetailSidebarItem,
+});
+
+export function isDetailSidebarElement(
+  node: React.ReactNode,
+): node is React.ReactElement<DetailSidebarProps> {
+  return (
+    React.isValidElement(node) &&
+    (node.type as { __isDetailSidebar?: boolean })?.__isDetailSidebar === true
+  );
+}
+
+export interface DetailRowProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}
+
+/**
+ * `FormRenderer.Row` — a read-only label/value cell for detail content (the display counterpart of a
+ * form field). Drop several inside a `FormRenderer.Grid` within a `FormBuilder.Section`.
+ */
+export function DetailRow({ label, value }: DetailRowProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="typography-body-small-regular text-content-presentation-global-secondary">
+        {label}
+      </span>
+      <span className="typography-body-medium-medium text-content-presentation-global-primary">
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export interface DetailGridProps {
+  /** Column count (default 2). */
+  columns?: 1 | 2 | 3;
+  children: React.ReactNode;
+}
+
+const GRID_COLS: Record<NonNullable<DetailGridProps["columns"]>, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+};
+
+/**
+ * `FormRenderer.Grid` — arranges `FormRenderer.Row`s in an equal-column grid spanning the **full
+ * section width** (default 2 columns, so cells split in half). Padded so the rows breathe inside a
+ * `FormBuilder.Section` (clear of the title badge, roomy row + column spacing).
+ */
+export function DetailGrid({ columns = 2, children }: DetailGridProps) {
+  return (
+    <div className={cn("grid w-full gap-x-12 gap-y-5 py-3", GRID_COLS[columns])}>{children}</div>
+  );
+}
+
+export interface DetailTabProps {
+  /** Ties this panel to the `Sidebar.Item` of the same `value`. */
+  value: string;
+  /** The panel body — typically `FormBuilder.Section` display blocks. */
+  children: React.ReactNode;
+}
+
+/**
+ * `FormRenderer.Tab` — a content panel shown when its `value` is the active tab. Renders
+ * **nothing itself**: the FormRenderer root detects it and mounts it as a Radix `Tabs.Content`
+ * (kept mounted, inactive ones hidden).
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- read by the FormRenderer root
+export function DetailTab(_props: DetailTabProps) {
+  return null;
+}
+(DetailTab as unknown as { __isDetailTab: boolean }).__isDetailTab = true;
+
+export function isDetailTabElement(
+  node: React.ReactNode,
+): node is React.ReactElement<DetailTabProps> {
+  return (
+    React.isValidElement(node) && (node.type as { __isDetailTab?: boolean })?.__isDetailTab === true
+  );
+}
+
+export interface DetailTabsViewProps {
+  header?: { title: string; label?: string; variant?: HeaderVariant };
+  /** Header action buttons (Print / Approve / …). */
+  actions?: React.ReactNode;
+  /** The `FormRenderer.Sidebar` element — its children are the tab triggers. */
+  sidebar: React.ReactElement<DetailSidebarProps>;
+  /** The `FormRenderer.Tab` elements — the content panels. */
+  tabs: React.ReactElement<DetailTabProps>[];
+  className?: string;
+}
+
+/**
+ * The detail-tabs surface: the floating header over a fixed left rail (the sidebar) + a scrolling
+ * content column showing the active tab. Radix `Tabs.Root` owns the state (uncontrolled, defaults to
+ * the first tab). The rail matches the stepper's rail position; only the content column scrolls.
+ */
+export function DetailTabsView({ header, actions, sidebar, tabs, className }: DetailTabsViewProps) {
+  const defaultValue = tabs[0]?.props.value;
+
+  return (
+    <TabsPrimitive.Root
+      orientation="vertical"
+      defaultValue={defaultValue}
+      className={cn("h-full w-full @container", className)}
+    >
+      {/* Scroll shell — mirrors FormBuilder's: the absolute header floats over the body. */}
+      <div className="relative isolate flex h-full w-full flex-col overflow-hidden rounded-2xl bg-background-presentation-body-primary">
+        {header && (
+          <FormHeaderBar title={header.title} label={header.label} variant={header.variant}>
+            {actions}
+          </FormHeaderBar>
+        )}
+
+        <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-row">
+          {/* The fixed rail — the tab list. `pt-[72px]` clears the floating header. */}
+          <TabsPrimitive.List asChild>
+            <aside className="flex h-full w-[216px] shrink-0 flex-col gap-1 overflow-y-auto border-r border-border-presentation-global-primary bg-black-alpha-5 px-2 pb-6 pt-[72px] scrollbar-hide">
+              {sidebar.props.children}
+            </aside>
+          </TabsPrimitive.List>
+
+          {/* The only scrolling region — the active tab's Sections. */}
+          <div className="flex min-h-0 w-full flex-1 flex-col overflow-y-auto px-6 py-6 pt-[72px] scrollbar-hide">
+            <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4">
+              {tabs.map((panel) => (
+                <TabsPrimitive.Content
+                  key={panel.props.value}
+                  value={panel.props.value}
+                  forceMount
+                  className="flex flex-col gap-4 outline-none data-[state=inactive]:hidden"
+                >
+                  {panel.props.children}
+                </TabsPrimitive.Content>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </TabsPrimitive.Root>
+  );
+}

package/apps/lib/components/FormRenderer/form-renderer.tsx

@@ -1,10 +1,20 @@
 "use client";
 
-import { useId } from "react";
+import { Children, useId } from "react";
 import { FieldValues } from "react-hook-form";
 
 import { FormBuilder } from "../FormBuilder";
-import { FormIdContext, LoadingContext, ModeContext } from "../FormBuilder/context";
+import { FormIdContext, LoadingContext } from "../FormBuilder/context";
+import { StepperActions } from "../FormBuilder/stepper";
+import {
+  DetailSidebar,
+  DetailTab,
+  DetailGrid,
+  DetailRow,
+  DetailTabsView,
+  isDetailSidebarElement,
+  isDetailTabElement,
+} from "./detail";
 import { FormDrawer } from "./FormDrawer";
 import type { FormRendererProps } from "./types";
 
@@ -16,8 +26,12 @@ import type { FormRendererProps } from "./types";
  * FormRenderer never manufactures a Submit — you compose it and hand it to `actions`
  * (`actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}`). It renders in the form's
  * header action pill (page) or the drawer header (drawer), and auto-targets this form.
+ *
+ * Give it `FormRenderer.Sidebar` + `FormRenderer.Tab` children instead of fields and it switches to
+ * a **detail-tabs** view: a display-only page (no `<form>`) whose sidebar swaps `FormBuilder.Section`
+ * panels — the sidebar sits where a stepper's rail would.
  */
-export function FormRenderer<T extends FieldValues = FieldValues>({
+function FormRendererRoot<T extends FieldValues = FieldValues>({
   children,
   id,
   onSubmit,
@@ -25,7 +39,6 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
   resolver,
   defaultValues,
   values,
-  mode = "edit",
   loading,
   resetOnSuccess,
   fieldDirection,
@@ -52,16 +65,33 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
   const autoId = useId();
   const formId = id ?? autoId;
 
+  // Detail-tabs mode: a `FormRenderer.Sidebar` + `FormRenderer.Tab` children mean a display-only
+  // detail page (no `<form>`) — the sidebar swaps Section panels via Radix Tabs. Detected here so
+  // the form props below are simply unused.
+  const childArray = Children.toArray(children);
+  const detailSidebar = childArray.find(isDetailSidebarElement);
+  const detailTabs = childArray.filter(isDetailTabElement);
+  if (detailSidebar && detailTabs.length > 0) {
+    return (
+      <DetailTabsView
+        header={header}
+        actions={actions}
+        sidebar={detailSidebar}
+        tabs={detailTabs}
+        className={className}
+      />
+    );
+  }
+
   const inner = (
     <FormBuilder
       id={formId}
       form={form}
-      onSubmit={onSubmit}
+      onSubmit={onSubmit ?? (() => {})}
       onInvalid={onInvalid}
       resolver={resolver}
       defaultValues={defaultValues}
       values={values}
-      mode={mode}
       loading={loading}
       fieldDirection={effectiveDirection}
       resetOnSuccess={resetOnSuccess}
@@ -73,7 +103,8 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
     >
       {useHeader && (
         <FormBuilder.Header title={header!.title} label={header!.label} variant={header!.variant}>
-          {actions}
+          {/* A stepper form prepends chevron Back/Next + a divider before the Submit. */}
+          {actions && <StepperActions>{actions}</StepperActions>}
         </FormBuilder.Header>
       )}
 
@@ -90,15 +121,13 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
         badge={badge ?? header?.label}
         variant={header?.variant}
         summary={summary}
-        // The drawer header sits outside the `<form>`, so re-supply the form/loading/mode context
-        // a bare `FormBuilder.Submit` reads (on the page it gets these from the FormBuilder tree).
+        // The drawer header sits outside the `<form>`, so re-supply the form-id and loading
+        // context a bare `FormBuilder.Submit` reads (on the page it gets these from the tree).
         actions={
           actions ? (
-            <ModeContext.Provider value={mode}>
-              <LoadingContext.Provider value={!!loading}>
-                <FormIdContext.Provider value={formId}>{actions}</FormIdContext.Provider>
-              </LoadingContext.Provider>
-            </ModeContext.Provider>
+            <LoadingContext.Provider value={!!loading}>
+              <FormIdContext.Provider value={formId}>{actions}</FormIdContext.Provider>
+            </LoadingContext.Provider>
           ) : undefined
         }
         onOpenInNewTab={onOpenInNewTab}
@@ -111,3 +140,15 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
   // Page display: FormBuilder already placed `summary` as the grid's conclusion column.
   return inner;
 }
+
+/**
+ * FormRenderer — see {@link FormRendererRoot}. The compound statics drive the display-only
+ * **detail-tabs** view: `FormRenderer.Sidebar` (the rail) + `FormRenderer.Sidebar.Item` (a tab) +
+ * `FormRenderer.Tab` (a `FormBuilder.Section` panel).
+ */
+export const FormRenderer = Object.assign(FormRendererRoot, {
+  Sidebar: DetailSidebar,
+  Tab: DetailTab,
+  Grid: DetailGrid,
+  Row: DetailRow,
+});

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

@@ -1,9 +1,11 @@
 export { FormRenderer } from "./form-renderer";
 export { FormDrawer } from "./FormDrawer";
 export type { FormDrawerProps } from "./FormDrawer";
+export type { FormRendererProps, FormRendererDisplay, FieldDirection } from "./types";
 export type {
-  FormRendererProps,
-  FormRendererMode,
-  FormRendererDisplay,
-  FieldDirection,
-} from "./types";
+  DetailSidebarProps,
+  DetailSidebarItemProps,
+  DetailTabProps,
+  DetailRowProps,
+  DetailGridProps,
+} from "./detail";

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

@@ -15,7 +15,6 @@ import type {
  * form's header / drawer action bar) where you place the Save.
  */
 
-export type FormRendererMode = "edit" | "view";
 export type FormRendererDisplay = "page" | "drawer";
 export type FieldDirection = "horizontal" | "vertical";
 
@@ -24,12 +23,12 @@ export interface FormRendererProps<T extends FieldValues = FieldValues> {
   children: ReactNode;
 
   // --- react-hook-form root (forwarded to FormBuilder) ---
-  onSubmit: (values: T) => void | Promise<void>;
+  /** Submit handler. Optional — a display-only detail-tabs view (`FormRenderer.Sidebar`) has no form. */
+  onSubmit?: (values: T) => void | Promise<void>;
   onInvalid?: (errors: FieldErrors<T>) => void;
   resolver?: Resolver<T>;
   defaultValues?: DefaultValues<T>;
   values?: T;
-  mode?: FormRendererMode;
   loading?: boolean;
   resetOnSuccess?: boolean;
   /** Row layout; defaults to vertical inside a drawer. */

package/apps/lib/components/Popover.tsx

@@ -239,10 +239,14 @@ const popoverStyles = cva(
           "bg-background-system-body-primary",
           "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
         ],
+        // Adopts the DropdownMenu surface (`menuContentStyles`): backdrop-blurred, borderless
+        // rounded-14 panel with a soft ambient shadow — keeping the original background color.
         PresentationStyle: [
-          "border-border-presentation-global-primary",
+          "border-transparent",
+          "rounded-[14px]",
+          "backdrop-blur-[21px]",
           "bg-background-presentation-form-base",
-          "shadow-[0px_0px_10px_0px_rgba(0,0,0,0.4),0px_4px_4px_0px_rgba(0,0,0,0.2)]",
+          "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
         ],
       },
       overlayBlur: {

package/apps/lib/components/SearchableSelect.tsx

@@ -24,6 +24,9 @@ export interface SearchableSelectOption {
   value: string;
   label: string;
   icon?: ReactNode;
+  /** Text used for client-side filtering. Defaults to `label` — set it to match on a subset
+   *  (e.g. a country name only, when the label also shows a dial code). */
+  searchText?: string;
 }
 
 interface Props {
@@ -38,6 +41,7 @@ interface Props {
   theme?: Themes;
   dir?: string;
   className?: string;
+  inputClassName?: string;
   /** Transparent border/background so the trigger blends into a table cell. */
   onTable?: boolean;
 
@@ -107,6 +111,7 @@ export function SearchableSelect({
   theme,
   dir,
   className,
+  inputClassName,
   onTable,
   filterClientSide = true,
   onSearchChange,
@@ -155,7 +160,7 @@ export function SearchableSelect({
     if (!filterClientSide) return options;
     const q = search.trim().toLowerCase();
     if (!q) return options;
-    return options.filter((o) => o.label.toLowerCase().includes(q));
+    return options.filter((o) => (o.searchText ?? o.label).toLowerCase().includes(q));
   }, [options, search, filterClientSide]);
 
   const selectedOption = options.find((o) => o.value === value) ?? null;
@@ -201,7 +206,7 @@ export function SearchableSelect({
               setOpen(true);
             }}
             onBlur={() => setSearching(false)}
-            className={cn("min-w-[100px] flex-1", {
+            className={cn("min-w-[100px] flex-1", inputClassName, {
               "!h-[18px]": size === "XS",
               "!h-[22px]": size === "S",
               "!h-[24px]": size === "M",

package/apps/lib/layouts/FieldSection.tsx

@@ -31,32 +31,35 @@ export function FieldSection({
     <section
       {...props}
       data-theme={theme}
-      className={cn(
-        "grid py-[16px] px-[12px] w-full max-w-[1200px] min-w-[0px] ",
-        direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
-        direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
-        direction === "flexible" &&
-          "grid-rows-[auto_1fr] gap-[12px] lg:grid-cols-[350px_1fr] lg:grid-rows-[1fr] lg:gap-[24px]",
-        className,
-      )}
+      className={cn("w-full max-w-[1200px] min-w-[0px] @container", className)}
     >
-      {/* Fixed width section for labels */}
-      <div className="flex flex-col gap-[12px]">
-        {label && (
-          <Label
-            size={size}
-            label={label}
-            requiredLabel={requiredLabel}
-            labelDirections={"horizontal"}
-          />
+      <div
+        className={cn(
+          "grid py-[16px] px-[12px] w-full min-w-[0px]",
+          direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
+          direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
+          direction === "flexible" &&
+          "grid-rows-[auto_1fr] gap-[12px] @md:grid-cols-[350px_1fr] @md:grid-rows-[1fr] @md:gap-[24px]",
         )}
+      >
+        {/* Fixed width section for labels */}
+        <div className="flex flex-col gap-[12px]">
+          {label && (
+            <Label
+              size={size}
+              label={label}
+              requiredLabel={requiredLabel}
+              labelDirections={"horizontal"}
+            />
+          )}
 
-        {secondaryLabel && <Label size={size} secondaryLabel={secondaryLabel} />}
-        {childrenUnderLabel}
-      </div>
+          {secondaryLabel && <Label size={size} secondaryLabel={secondaryLabel} />}
+          {childrenUnderLabel}
+        </div>
 
-      {/* Flexible section that takes up the remaining space */}
-      <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
+        {/* Flexible section that takes up the remaining space */}
+        <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
+      </div>
     </section>
   );
 }

package/apps/lib/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.2",
+  "version": "2.4.4",
   "generatedBy": "scripts/bin/generateRegistry",
   "items": [
     {