torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/Form.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form";
-
-import { cn } from "../utils/cn";
-import { Label } from "./Label";
-import { Themes } from "../utils/types";
-import { ReactNode } from "react";
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-    label?: ReactNode; // main label
-    requiredLabel?: ReactNode; // normal text with required style
-    secondaryLabel?: ReactNode; // normal text with secondary style
-    as?: React.ElementType;
-    asChild?: boolean;
-    size?: "S" | "M" | "L";
-    variant?: "SystemStyle" | "PresentationStyle";
-    theme?: Themes;
-    labelsClassName?: string;
-    labelDirections?: "vertical" | "horizontal";
-    childrenDirections?: "vertical" | "horizontal";
-  }
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

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

@@ -1,73 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-
-/**
- * How a field row lays out its label against its control.
- *
- * `"flexible"` is the responsive one: stacked, then label-beside-control once the field row itself
- * is past the container `md` breakpoint. It is what you get by leaving `fieldDirection` unset — and
- * it is assignable so you can ask for it back where something else defaults you away from it, most
- * notably a `FormRenderer` drawer, which pins `"vertical"`.
- */
-export type FieldDirection = "horizontal" | "vertical" | "flexible";
-
-/** 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);
-
-/**
- * Field chrome mode — how much layout a field draws around its control.
- *
- * - `false` (the default) — the full `FieldSection` row: label, required marker, stacked hint.
- * - `"table"` — a `FormBuilder.Table` cell: no row chrome, errors as a tooltip on the control,
- *   and the control takes the flush table border treatment via `onTable`.
- * - `"bare"` — chrome-less anywhere else, e.g. a `DataViews` filter or config panel: no row and
- *   no stacked hint, but the control keeps its normal standalone border.
- *
- * The two chrome-less modes are deliberately distinct: dropping the label row and taking the
- * table border are different decisions, and only a real table cell wants both.
- */
-export type CellMode = "table" | "bare" | false;
-
-export const CellContext = createContext<CellMode>(false);
-
-/** The raw mode. Prefer `useBare` / `useOnTable` — they express the two real questions. */
-export const useCellMode = () => useContext(CellContext);
-/** True when the field renders without `FieldSection` chrome — `"table"` **or** `"bare"`. */
-export const useBare = () => useContext(CellContext) !== false;
-/** True only inside a `FormBuilder.Table` cell — drives the control's `onTable` border style. */
-export const useOnTable = () => useContext(CellContext) === "table";
-
-/**
- * Step registry — a `FormRenderer.Step` provides this so the fields rendered inside it can
- * register their `name`, and the stepper validates just those names before advancing. `null`
- * when not inside a stepper.
- *
- * The stepper itself lives in `FormRenderer` — it is chrome. This registry stays here because
- * the *fields* are what register into it (see `fields/FieldShell.tsx`), and FormBuilder must
- * stand alone without FormRenderer installed. FormRenderer's `StepSlot` imports it from here;
- * the dependency never points the other way.
- */
-export interface StepRegistry {
-  register: (name: string) => void;
-  unregister: (name: string) => void;
-}
-export const StepContext = createContext<StepRegistry | null>(null);
-export const useStepRegistry = () => useContext(StepContext);

package/apps/lib/components/FormBuilder/field-kind.ts

@@ -1,28 +0,0 @@
-import React from "react";
-import type { FieldKind } from "./types";
-
-/**
- * The stamp that tells a consumer what a `FormBuilder.*` field produces.
- *
- * A form is normally read by the resolver and the submit handler, both of which know the shape
- * they expect. Some consumers do not: `DataViews.Filters` is handed arbitrary fields as children
- * and has to turn each one's value into a filter — a list, a numeric range, a date range — without
- * being told which is which.
- *
- * The alternative is comparing `element.type` against an imported component, which breaks across
- * duplicated module instances and silently stops matching after a hot reload. A property on the
- * component survives both.
- */
-
-const KEY = "__fieldKind";
-
-export function markFieldKind<T>(component: T, kind: FieldKind): T {
-  (component as Record<string, unknown>)[KEY] = kind;
-  return component;
-}
-
-/** The kind stamped on an element's component, or `undefined` if it is not a marked field. */
-export function fieldKindOf(node: React.ReactNode): FieldKind | undefined {
-  if (!React.isValidElement(node)) return undefined;
-  return (node.type as unknown as Record<string, unknown> | undefined)?.[KEY] as FieldKind | undefined;
-}

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

@@ -1,60 +0,0 @@
-"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

@@ -1,59 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-"use client";
-
-import { DatePicker } from "../../DatePicker";
-import { useOnTable } 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 onTable = useOnTable();
-
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <DatePicker
-          mode={props.mode ?? "single"}
-          timePicker={props.timePicker}
-          dateFormat={props.dateFormat}
-          value={field.value}
-          onTable={onTable}
-          onChange={(e) =>
-            field.onChange((e as unknown as { target: { value: unknown } }).target.value)
-          }
-        />
-      )}
-    </FieldShell>
-  );
-}

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

@@ -1,74 +0,0 @@
-"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

@@ -1,163 +0,0 @@
-"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, useBare } from "../context";
-import type { FieldHintSpec } from "../types";
-
-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";
-  /** Alerts stacked under the validation error. See `FieldHintSpec`. */
-  hints?: FieldHintSpec[];
-  /** 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 `FormRenderer.Step` (if any) so the stepper can
- * validate per step.
- */
-export function FieldShell({
-  name,
-  label,
-  description,
-  required,
-  fullWidth,
-  hidden,
-  direction: directionProp,
-  hints,
-  children,
-}: FieldShellProps) {
-  const form = useFormContext();
-  const bare = useBare();
-  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;
-
-  // Chrome-less mode — a `FormBuilder.Table` cell (`"table"`) or a panel field (`"bare"`).
-  // Render just the control: no FieldSection label/row, and 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. The control's border treatment is the caller's call, via `useOnTable`.
-  if (bare) {
-    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={<FieldMessages message={fieldError} hints={hints} />}
-    >
-      <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>
-  );
-}
-
-/**
- * The stack under a field: the validation error first (it is the actionable one), then any author
- * `hints` in order. Renders nothing when there is neither, so a field without hints is unchanged.
- */
-function FieldMessages({ message, hints }: { message?: string; hints?: FieldHintSpec[] }) {
-  if (!message && !hints?.length) return null;
-  return (
-    <div className="flex flex-col items-start gap-[4px]">
-      {message && <FieldHint state="error" label={message} />}
-      {hints?.map((hint, i) => (
-        <FieldHint key={i} state={hint.state ?? "info"} label={hint.label} icon={hint.icon} />
-      ))}
-    </div>
-  );
-}
-
-/**
- * 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;
-}