torch-glare 2.4.1 → 2.4.2

package/apps/lib/components/Drawer.tsx

@@ -5,6 +5,7 @@ import { Drawer as DrawerPrimitive } from "vaul";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../utils/cn";
+import { Button } from "./Button";
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -47,9 +48,58 @@ interface DrawerContentProps extends React.ComponentPropsWithoutRef<
    */
   framed?: boolean;
   wrapperClassName?: string;
+  /**
+   * @deprecated Use `className` — it now targets the tray directly. Kept as an
+   * alias (merged last, so it still wins) for the pre-`DrawerPanel` API.
+   */
   trayClassName?: string;
 }
 
+interface DrawerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Panel border + inset shadow that pairs with the tray's frame. Default `true`. */
+  framed?: boolean;
+  /** Show the drag handle (bottom sheets). Default `false`. */
+  showHandle?: boolean;
+}
+
+/**
+ * The light `#F0F0F0` content surface inside a `DrawerContent`.
+ *
+ * It is an ordinary child, not something the tray paints — so a drawer can hold a panel
+ * and something else beside it (e.g. a `FormSummary`), each bringing its own background.
+ * Give the tray a `gap-*` to space them.
+ *
+ * ```tsx
+ * <DrawerContent className="gap-[6px]">
+ *   <DrawerPanel>…form…</DrawerPanel>
+ *   <FormSummary … />
+ * </DrawerContent>
+ * ```
+ */
+const DrawerPanel = React.forwardRef<HTMLDivElement, DrawerPanelProps>(
+  ({ className, framed = true, showHandle = false, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      // The content surface is always light (#F0F0F0) regardless of the page
+      // theme, so pin a light theme here. This makes theme-aware content tokens
+      // (DrawerTitle/Description and any consumer content) resolve to their
+      // dark-on-light values instead of following a dark page theme (which
+      // would render white-on-light = invisible).
+      data-theme="light"
+      className={cn(
+        "flex flex-1 gap-2 rounded-t-[16px] p-1 bg-[#F0F0F0] min-h-0",
+        framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
+        className,
+      )}
+      {...props}
+    >
+      {showHandle && <div className="mx-auto h-2 w-[100px] rounded-full bg-[#D4D4D4]" />}
+      {children}
+    </div>
+  ),
+);
+DrawerPanel.displayName = "DrawerPanel";
+
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   DrawerContentProps
@@ -58,7 +108,6 @@ const DrawerContent = React.forwardRef<
     {
       className,
       children,
-      showHandle = true,
       notch,
       notchSide = "left",
       framed: framedProp,
@@ -89,9 +138,12 @@ const DrawerContent = React.forwardRef<
                 : notch}
             </div>
           )}
+          {/* The tray. It frames and positions, but paints nothing over its children —
+              each child brings its own background (see `DrawerPanel`). Supply a `gap-*`
+              via `className` when the tray holds more than one. */}
           <div
             className={cn(
-              "flex flex-1 flex-col min-h-0",
+              "flex flex-1 min-h-0",
               framed
                 ? "p-1.5 bg-black-400 shadow-[0_0_4px_rgba(0,0,0,0.2),0_0_30px_rgba(0,0,0,0.4)]"
                 : "p-0",
@@ -102,27 +154,11 @@ const DrawerContent = React.forwardRef<
                 : framed
                   ? "rounded-t-[22px]"
                   : "",
+              className,
               trayClassName,
             )}
           >
-            <div
-              // The content surface is always light (#F0F0F0) regardless of the
-              // page theme, so pin a light theme here. This makes theme-aware
-              // content tokens (DrawerTitle/Description and any consumer content)
-              // resolve to their dark-on-light values instead of following a dark
-              // page theme (which would render white-on-light = invisible).
-              data-theme="light"
-              className={cn(
-                "flex flex-1 flex-col gap-2 rounded-t-[16px] p-1.5 bg-[#F0F0F0] min-h-0",
-                framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
-                className,
-              )}
-            >
-              {showHandle && !notch && (
-                <div className="mx-auto h-2 w-[100px] rounded-full bg-[#D4D4D4]" />
-              )}
-              {children}
-            </div>
+            {children}
           </div>
         </DrawerPrimitive.Content>
       </DrawerPortal>
@@ -233,18 +269,23 @@ const DrawerNotchClose = React.forwardRef<
   HTMLButtonElement,
   React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, children, ...props }, ref) => (
-  <button
+  <Button
     ref={ref}
     type="button"
     aria-label="Close"
+    buttonType="icon"
+    size="S"
+    variant="PrimeContStyle"
     className={cn(
-      "inline-flex h-[22px] w-[22px] items-center justify-center rounded-[13px] bg-white/15 text-content-presentation-global-primary transition-colors hover:bg-white/25",
+      // Glare Button (icon, S = 22×22) with the notch's own circular radius + translucent look
+      // (S is otherwise rounded-[4px]).
+      "!rounded-[13px] bg-white/15 text-white hover:bg-white/25 hover:text-white",
       className,
     )}
     {...props}
   >
-    {children ?? <i className="ri-close-fill text-[14px]" />}
-  </button>
+    {children ?? <i className="ri-close-fill !text-[14px]" />}
+  </Button>
 ));
 DrawerNotchClose.displayName = "DrawerNotchClose";
 
@@ -346,6 +387,7 @@ export {
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
+  DrawerPanel,
   DrawerHeader,
   DrawerHeaderTitle,
   DrawerHeaderActions,

package/apps/lib/components/FormBuilder/DisplayField.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+import { cn } from "../../utils/cn";
+
+export interface DisplayFieldProps {
+  label?: ReactNode;
+  /** Plain string value — falls back to an em-dash when empty. */
+  value?: string | null;
+  /** Rich value (badges, chips, formatted nodes) — takes precedence over `value`. */
+  valueNode?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Read-only field: a label above its value. Used by FormBuilder's `mode: "view"`
+ * so the same config renders as a detail view. Mirrors the products-services
+ * `DisplayField` (label + value/valueNode, em-dash fallback).
+ */
+export function DisplayField({ label, value, valueNode, className }: DisplayFieldProps) {
+  return (
+    <div className={cn("flex w-full flex-col gap-1.5", className)}>
+      {label != null && (
+        <p className="typography-body-small-regular text-content-presentation-global-secondary">
+          {label}
+        </p>
+      )}
+      {valueNode != null ? (
+        <div className="typography-body-medium-medium text-content-presentation-global-primary">
+          {valueNode}
+        </div>
+      ) : (
+        <span className="typography-body-medium-medium text-content-presentation-global-primary">
+          {value != null && value !== "" ? value : "—"}
+        </span>
+      )}
+    </div>
+  );
+}
+
+DisplayField.displayName = "DisplayField";

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export type FormBuilderMode = "edit" | "view";
+export type FieldDirection = "horizontal" | "vertical";
+
+/** Loading flag — drives the Submit spinner and disables inputs. */
+export const LoadingContext = createContext<boolean>(false);
+export const useLoading = () => useContext(LoadingContext);
+
+/** Edit vs read-only. Fields render `DisplayField` in `"view"`. */
+export const ModeContext = createContext<FormBuilderMode>("edit");
+export const useMode = () => useContext(ModeContext);
+
+/**
+ * The `<form>`'s `id`. Provided by the FormBuilder root so a `FormBuilder.Submit` rendered
+ * **outside** the `<form>` element — the absolute header's action pill, or the drawer header —
+ * can still submit it via native `form={id}` association without the caller wiring an id by hand.
+ */
+export const FormIdContext = createContext<string | undefined>(undefined);
+export const useFormId = () => useContext(FormIdContext);
+
+/**
+ * Field row direction — set via `FormBuilder`'s `fieldDirection` prop. `undefined` (the default)
+ * means "don't force one": `FieldSection` then uses its own responsive `flexible` layout, which
+ * stacks on small screens and goes two-column at `lg`. Only set this to pin a direction.
+ */
+export const DirectionContext = createContext<FieldDirection | undefined>(undefined);
+export const useDirection = () => useContext(DirectionContext);
+
+/**
+ * Cell mode — set to `true` by `FormBuilder.Table` around each cell's field so `FieldShell`
+ * renders just the control (no label/row chrome) and surfaces validation errors as a tooltip
+ * on the control instead of a stacked hint. Off (`false`) everywhere else, so normal fields
+ * keep their full `FieldSection` layout.
+ */
+export const CellContext = createContext<boolean>(false);
+export const useCell = () => useContext(CellContext);
+
+/**
+ * Step registry — a `FormBuilder.Step` provides this so the fields rendered
+ * inside it can register their `name`. `FormBuilder.Next` then validates just
+ * those names before advancing. `null` when not inside a stepper.
+ */
+export interface StepRegistry {
+  register: (name: string) => void;
+  unregister: (name: string) => void;
+}
+export const StepContext = createContext<StepRegistry | null>(null);
+export const useStepRegistry = () => useContext(StepContext);
+
+/** Stepper state shared by the nav + Back/Next/Submit buttons. */
+export interface StepperContextValue {
+  currentStep: number;
+  totalSteps: number;
+  titles: string[];
+  isFirstStep: boolean;
+  isLastStep: boolean;
+  goToNext: () => void | Promise<void>;
+  goToPrevious: () => void;
+  goToStep: (index: number) => void;
+  /** Field names registered per step, for per-step validation. */
+  stepFields: Record<number, Set<string>>;
+}
+export const StepperContext = createContext<StepperContextValue | null>(null);
+export const useStepper = () => {
+  const ctx = useContext(StepperContext);
+  if (!ctx) throw new Error("FormBuilder.Step/Back/Next must be used within FormBuilder.Stepper");
+  return ctx;
+};

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { LabeledCheckBox } from "../../LabeledCheckBox";
+import { RadioGroup } from "../../Radio";
+import { RadioCard } from "../../RadioCard";
+import { useLoading } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { CheckboxFieldProps, RadioCardsFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * `FormBuilder.Checkbox` — a single boolean checkbox. The field `label` sits in the
+ * normal label column; an optional `subLabel` renders inline beside the checkbox (via
+ * the clickable `LabeledCheckBox`).
+ */
+export function CheckboxField({ subLabel, ...props }: CheckboxFieldProps) {
+  const loading = useLoading();
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind: "boolean", value: v })}>
+      {(field) => (
+        <div className="flex w-full items-center ps-2.5">
+          <LabeledCheckBox
+            id={props.name}
+            label={subLabel ?? ""}
+            checked={!!field.value}
+            size="S"
+            onCheckedChange={(checked) => field.onChange(checked === true)}
+            disabled={props.disabled || loading}
+          />
+        </div>
+      )}
+    </FieldShell>
+  );
+}
+
+/** `FormBuilder.RadioCards` — radio options rendered as cards (Glare `RadioCard`). */
+export function RadioCardsField(props: RadioCardsFieldProps) {
+  const loading = useLoading();
+  const options = props.options.map((o) => ({
+    label: typeof o.label === "string" ? o.label : String(o.value),
+    value: o.value,
+  }));
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind: "option", value: v, options })}>
+      {(field) => (
+        <RadioGroup
+          value={field.value ?? ""}
+          onValueChange={field.onChange}
+          className="grid w-full grid-cols-2 gap-3"
+        >
+          {props.options.map((opt) => (
+            <RadioCard
+              key={opt.value}
+              id={`${props.name}-${opt.value}`}
+              value={opt.value}
+              headerLabel={opt.label}
+              description={opt.description}
+              disabled={opt.disabled || props.disabled || loading}
+            />
+          ))}
+        </RadioGroup>
+      )}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,76 @@
+"use client";
+
+import { InputField } from "../../InputField";
+import { ColorPicker, CHECKERBOARD } from "../../ColorPicker";
+import { useLoading } from "../context";
+import type { ColorFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * `FormBuilder.Color` — an `InputField` holding the hex text, with a trailing action button that
+ * carries the colour itself. That button is the `ColorPicker` trigger: clicking it opens the full
+ * palette. Value is a hex string.
+ */
+export function ColorField(props: ColorFieldProps) {
+  const loading = useLoading();
+
+  return (
+    <FieldShell
+      {...props}
+      view={(v) =>
+        v
+          ? {
+              valueNode: (
+                <span className="inline-flex items-center gap-2">
+                  <span
+                    className="h-4 w-4 rounded-[4px] border border-border-presentation-action-primary"
+                    style={{ background: String(v) }}
+                  />
+                  {String(v)}
+                </span>
+              ),
+            }
+          : { value: "" }
+      }
+    >
+      {(field) => {
+        const value = typeof field.value === "string" ? field.value : "";
+        const disabled = props.disabled || loading;
+        return (
+          // The InputField IS the trigger: ColorPicker detects it as an input (it takes a `value`)
+          // and feeds it the hex, so clicking the field opens the palette.
+          <ColorPicker
+            value={value || undefined}
+            onChange={field.onChange}
+            presets={props.presets}
+            alpha={props.alpha ?? true}
+            disabled={disabled}
+          >
+            <InputField
+              // Explicit — otherwise Radix's trigger `type="button"` would land on the input.
+              type="text"
+              value={value}
+              onChange={(e) => field.onChange(e.target.value)}
+              placeholder={props.placeholder ?? "#000000"}
+              disabled={disabled}
+              className="w-full"
+              // The trailing action button holds the colour itself.
+              childrenSide={
+                <span
+                  aria-hidden
+                  className="block h-[26px] w-[26px] shrink-0 overflow-hidden rounded-[6px] border border-border-presentation-action-primary"
+                  style={CHECKERBOARD}
+                >
+                  <span
+                    className="block h-full w-full"
+                    style={{ backgroundColor: value || "#000000" }}
+                  />
+                </span>
+              }
+            />
+          </ColorPicker>
+        );
+      }}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import type { CustomFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/** `FormBuilder.Custom` — render any control, keeping the FieldSection + validation wiring. */
+export function CustomField(props: CustomFieldProps) {
+  return (
+    <FieldShell
+      {...props}
+      view={(v) => ({ valueNode: props.formatView ? props.formatView(v) : String(v ?? "—") })}
+    >
+      {(field, fieldState) => props.render({ field, fieldState })}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { DatePicker } from "../../DatePicker";
+import { useCell } from "../context";
+import { formatFieldView } from "../viewFormat";
+import type { DateFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/**
+ * `FormBuilder.Date` (single) — and, via `mode`/`timePicker`, the presets
+ * `.DateRange` (value `{from,to}`), `.DateMultiple` (value `Date[]`), and
+ * `.DateTime` (date + time). All back onto the one Glare `DatePicker`.
+ */
+export function DateField(props: DateFieldProps) {
+  const kind = props.mode === "range" ? "daterange" : props.mode === "multiple" ? "dates" : "date";
+  const cell = useCell();
+
+  return (
+    <FieldShell {...props} view={(v) => formatFieldView({ kind, value: v })}>
+      {(field) => (
+        <DatePicker
+          mode={props.mode ?? "single"}
+          timePicker={props.timePicker}
+          dateFormat={props.dateFormat}
+          value={field.value}
+          onTable={cell}
+          onChange={(e) =>
+            field.onChange((e as unknown as { target: { value: unknown } }).target.value)
+          }
+        />
+      )}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,79 @@
+"use client";
+
+import { useFormContext, useFieldArray, type FieldValues, type ArrayPath } from "react-hook-form";
+
+import { Button } from "../../Button";
+import { Card } from "../../Card";
+import { useMode } from "../context";
+import type { FieldArrayProps } from "../types";
+
+/**
+ * `FormBuilder.FieldArray` — a repeating list of sub-fields (RHF `useFieldArray`).
+ * `children` renders one row's fields; name them `${rowName}.field`. Add/Remove is
+ * hidden in view mode.
+ */
+export function FieldArray(props: FieldArrayProps) {
+  const form = useFormContext<FieldValues>();
+  const mode = useMode();
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: props.name as ArrayPath<FieldValues>,
+  });
+
+  if (props.hidden) return null;
+
+  const addButton = mode !== "view" && (
+    <Button
+      type="button"
+      size="S"
+      variant="BorderStyle"
+      onClick={() => append((props.defaultItem ?? {}) as never)}
+    >
+      <i className="ri-add-line" />
+      {props.addLabel ?? "Add"}
+    </Button>
+  );
+
+  return (
+    <section className="grid w-full max-w-[1200px] gap-3 px-[12px] py-[16px]">
+      <div className="flex items-center justify-between">
+        {props.label ? (
+          <span className="typography-body-medium-medium text-content-presentation-global-primary">
+            {props.label}
+          </span>
+        ) : (
+          <span />
+        )}
+        {addButton}
+      </div>
+      {props.description && (
+        <p className="typography-body-small-regular text-content-presentation-global-secondary">
+          {props.description}
+        </p>
+      )}
+
+      <div className="flex flex-col gap-3">
+        {fields.map((f, index) => (
+          <Card key={f.id} className="relative gap-3 pr-8">
+            {mode !== "view" && (
+              <button
+                type="button"
+                aria-label="Remove"
+                onClick={() => remove(index)}
+                className="absolute right-2 top-2 inline-flex h-[22px] w-[22px] items-center justify-center rounded-full text-content-presentation-state-negative transition-colors hover:bg-background-presentation-action-hover"
+              >
+                <i className="ri-close-line text-[16px]" />
+              </button>
+            )}
+            {props.children(`${props.name}.${index}`, index, () => remove(index))}
+          </Card>
+        ))}
+        {fields.length === 0 && (
+          <p className="typography-body-small-regular text-content-presentation-global-secondary">
+            No items yet.
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}