torch-glare 2.4.1 → 2.4.3

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/context.ts

@@ -0,0 +1,68 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+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);
+
+/**
+ * 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>>;
+  /** Steps that have passed validation — stay checked even after navigating back. */
+  completedSteps: Set<number>;
+}
+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,60 @@
+"use client";
+
+import { LabeledCheckBox } from "../../LabeledCheckBox";
+import { RadioGroup } from "../../Radio";
+import { RadioCard } from "../../RadioCard";
+import { useLoading } from "../context";
+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}>
+      {(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();
+  return (
+    <FieldShell {...props}>
+      {(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,59 @@
+"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}>
+      {(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,11 @@
+"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}>{(field, fieldState) => props.render({ field, fieldState })}</FieldShell>
+  );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { DatePicker } from "../../DatePicker";
+import { useCell } from "../context";
+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 cell = useCell();
+
+  return (
+    <FieldShell {...props}>
+      {(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,74 @@
+"use client";
+
+import { useFormContext, useFieldArray, type FieldValues, type ArrayPath } from "react-hook-form";
+
+import { Button } from "../../Button";
+import { Card } from "../../Card";
+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`.
+ */
+export function FieldArray(props: FieldArrayProps) {
+  const form = useFormContext<FieldValues>();
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: props.name as ArrayPath<FieldValues>,
+  });
+
+  if (props.hidden) return null;
+
+  const addButton = (
+    <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">
+            <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>
+  );
+}

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

@@ -0,0 +1,148 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import {
+  useFormContext,
+  useFormState,
+  type ControllerRenderProps,
+  type ControllerFieldState,
+  type FieldErrors,
+  type FieldValues,
+  type FieldPath,
+} from "react-hook-form";
+
+import { FieldSection } from "../../../layouts/FieldSection";
+import { FormField, FormItem, FormControl } from "../../Form";
+import { FieldHint } from "../../FieldHint";
+import { Tooltip } from "../../Tooltip";
+import { useDirection, useStepRegistry, useCell } from "../context";
+
+export interface FieldShellProps {
+  name: string;
+  label?: ReactNode;
+  description?: ReactNode;
+  required?: boolean;
+  fullWidth?: boolean;
+  hidden?: boolean;
+  /** Force the field's layout direction, overriding the form's `useDirection()` context. */
+  direction?: "horizontal" | "vertical" | "flexible";
+  /** The input, wired to the react-hook-form field. */
+  children: (
+    field: ControllerRenderProps<FieldValues, string>,
+    fieldState: ControllerFieldState,
+  ) => ReactNode;
+}
+
+/**
+ * Shared wrapper for every `FormBuilder.*` field: the FieldSection row + the RHF
+ * `FormField`/`FormItem`/`FormControl`/`FormMessage` scaffolding. Also registers the
+ * field name into the enclosing `FormBuilder.Step` (if any) so the stepper can
+ * validate per step.
+ */
+export function FieldShell({
+  name,
+  label,
+  description,
+  required,
+  fullWidth,
+  hidden,
+  direction: directionProp,
+  children,
+}: FieldShellProps) {
+  const form = useFormContext();
+  const cell = useCell();
+  const ctxDirection = useDirection();
+  // A field may pin its own direction (e.g. RichText forces vertical), else the form's. When
+  // neither is set this stays `undefined` — FieldSection then falls back to its responsive
+  // `flexible` layout rather than a fixed two-column one.
+  const direction = directionProp ?? ctxDirection;
+  const step = useStepRegistry();
+
+  // Read this field's error at the shell level (not inside the FormField render) so
+  // the FieldHint can go in FieldSection's `childrenUnderLabel` — under the label.
+  // Subscribe to the whole `errors` object and resolve the field's path ourselves:
+  // `getFieldState(name)` misses controls that register late (DatePicker, RichText),
+  // whereas the errors object always carries every failing key from the resolver.
+  const { errors } = useFormState({ control: form.control });
+  const fieldError = resolveFieldError(errors, name);
+
+  useEffect(() => {
+    if (!step) return;
+    step.register(name);
+    return () => step.unregister(name);
+  }, [step, name]);
+
+  if (hidden) return null;
+
+  // Cell mode (inside FormBuilder.Table): render just the control — no FieldSection label/row.
+  // Errors surface as a tooltip on the control rather than a stacked FieldHint, so a row stays
+  // one line tall. Step registration above still applies.
+  if (cell) {
+    return (
+      <FormField
+        control={form.control}
+        name={name as FieldPath<FieldValues>}
+        render={({ field, fieldState }) => (
+          <FormItem className="w-full">
+            <FormControl>
+              <Tooltip
+                open={Boolean(fieldError)}
+                text={fieldError ?? ""}
+                toolTipSide="top"
+                variant="highlight"
+              >
+                <div className="w-full">{children(field, fieldState)}</div>
+              </Tooltip>
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  return (
+    <FieldSection
+      label={label}
+      requiredLabel={required ? "(Required)" : undefined}
+      secondaryLabel={description}
+      direction={direction}
+      className={fullWidth ? "max-w-full" : undefined}
+      childrenUnderLabel={<FieldError message={fieldError} />}
+    >
+      <FormField
+        control={form.control}
+        name={name as FieldPath<FieldValues>}
+        render={({ field, fieldState }) => (
+          <FormItem className="w-full">
+            <FormControl>
+              <div className="w-full">{children(field, fieldState)}</div>
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    </FieldSection>
+  );
+}
+
+/** Validation error, shown as a `FieldHint` alert (no tooltip); null when there's none. */
+function FieldError({ message }: { message?: string }) {
+  if (!message) return null;
+  return <FieldHint state="error" label={message} />;
+}
+
+/**
+ * Resolve a field's error message from the RHF `errors` tree by its dotted `name`
+ * (handles nested field-array paths like `contacts.0.email`). Reading the errors
+ * object directly is more reliable than `getFieldState` for controls that register
+ * late (DatePicker, RichText), whose hints were otherwise missing.
+ */
+function resolveFieldError(errors: FieldErrors, name: string): string | undefined {
+  const node = name
+    .split(".")
+    .reduce<unknown>(
+      (acc, key) => (acc == null ? undefined : (acc as Record<string, unknown>)[key]),
+      errors,
+    );
+  const message = (node as { message?: unknown } | undefined)?.message;
+  return typeof message === "string" ? message : undefined;
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { ImageAttachment } from "../../ImageAttachment";
+import { useLoading } from "../context";
+import type { FileFieldProps } from "../types";
+import { FieldShell } from "./FieldShell";
+
+/** `FormBuilder.File` / `.Image` — stores the selected `File` (consumer uploads). */
+export function FileField(props: FileFieldProps & { image?: boolean }) {
+  const loading = useLoading();
+  return (
+    <FieldShell {...props}>
+      {(field) => {
+        const current: unknown = field.value;
+        const fileName = Array.isArray(current)
+          ? `${current.length} file(s)`
+          : current instanceof File
+            ? current.name
+            : "";
+        return (
+          <ImageAttachment
+            mainLabel={props.placeholder ?? (props.image ? "Upload image" : "Upload file")}
+            secondaryLabel={
+              fileName || (typeof props.description === "string" ? props.description : "")
+            }
+            accept={props.accept ?? (props.image ? "image/*" : undefined)}
+            multiple={props.multiple}
+            disabled={props.disabled || loading}
+            onChange={(e) => {
+              const files = (e.target as HTMLInputElement).files;
+              if (!files || files.length === 0) return;
+              field.onChange(props.multiple ? Array.from(files) : files[0]);
+            }}
+          />
+        );
+      }}
+    </FieldShell>
+  );
+}