torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/FormSummary.tsx

@@ -1,282 +0,0 @@
-"use client";
-
-import { Children, Fragment, createContext, useContext, useId, useState, ReactNode } from "react";
-import { useWatch, type Control, type FieldValues, type UseFormReturn } from "react-hook-form";
-
-import { cn } from "../utils/cn";
-import { Group, Input, Trilling } from "./Input";
-import { ConclusionHeader } from "./ConclusionHeader";
-
-/**
- * The form the rows read from. `undefined` means "fall back to the surrounding
- * FormProvider" — which is what react-hook-form's `useWatch` does with no `control`.
- */
-const ControlContext = createContext<Control | undefined>(undefined);
-
-/** Format a computed amount with thousands separators and fixed decimals (2 → "1,299.00"). */
-export function formatAmount(value: unknown, decimals = 2): string {
-  if (value == null || value === "") return "";
-  const n = typeof value === "number" ? value : Number(String(value).replace(/,/g, ""));
-  if (Number.isNaN(n)) return "";
-  return new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(n);
-}
-
-/** Currency-code color. Maps to Glare's semantic state tokens. */
-export type SummaryTone = "neutral" | "success" | "info";
-
-const toneStyles: Record<SummaryTone, string> = {
-  neutral: "text-content-presentation-action-light-secondary",
-  success: "text-content-presentation-state-success",
-  info: "text-content-presentation-state-information",
-};
-
-export interface FormSummaryProps<T extends FieldValues = FieldValues> {
-  /** Panel title, e.g. "Invoice" (bold). */
-  title: ReactNode;
-  /** Muted text beside the title, e.g. "Summary". */
-  subtitle?: ReactNode;
-  /**
-   * The form to read values from. Required when the panel renders **outside** the
-   * `<FormBuilder>` (the usual case — the two sit side by side, so hoist `useForm`
-   * and hand the same instance to both). Omit it only when the panel is a child of
-   * the form, in which case it reads the surrounding context.
-   */
-  form?: UseFormReturn<T>;
-  /** Panel width (default `228px`, matching the design). */
-  width?: number | string;
-  className?: string;
-  children: ReactNode;
-}
-
-/**
- * `FormSummary` — a read-only calculation panel displayed **beside a form**.
- *
- * Each `FormSummary.Row` declares a `compute(values)` that runs against the **live** form
- * values (via react-hook-form `useWatch`), so every total recalculates as the user types.
- *
- * It renders *outside* the form, so hoist the form and share it:
- *
- * ```tsx
- * const form = useForm({ resolver, defaultValues })
- *
- * <div className="flex items-start gap-4">
- *   <FormBuilder form={form} onSubmit={save} className="flex-1">…fields…</FormBuilder>
- *   <FormSummary form={form} title="Invoice" subtitle="Summary">…rows…</FormSummary>
- * </div>
- * ```
- */
-function FormSummaryRoot<T extends FieldValues = FieldValues>({
-  title,
-  subtitle,
-  form,
-  width = 228,
-  className,
-  children,
-}: FormSummaryProps<T>) {
-  // The design stacks the header and every group in ONE 12px-gap column, with the dividers
-  // as their own items — so they're interleaved here rather than drawn with `divide-y`,
-  // which can only sit flush against a child's edge and couldn't be centred in its block.
-  const groups = Children.toArray(children).filter(Boolean);
-
-  return (
-    <ControlContext.Provider value={form?.control as Control | undefined}>
-      <aside
-        data-theme="dark"
-        style={{ width: typeof width === "number" ? `${width}px` : width }}
-        className={cn(
-          "flex h-full flex-col gap-3 overflow-hidden rounded-[16px] bg-black text-white",
-          className,
-        )}
-      >
-        {/* 48px tall: 12 + 24 + 12, aligned with the groups at px-2. Pinned — only the
-            groups below it scroll. */}
-        <header className="flex shrink-0 items-baseline gap-1 px-2 py-3">
-          <span className="typography-body-large-medium text-white">{title}</span>
-          {subtitle && (
-            <span className="typography-body-medium-regular text-[#A0A0A0]">{subtitle}</span>
-          )}
-        </header>
-
-        {/* Takes the remaining height and scrolls when the groups outrun it, as in the
-            design (its group column is taller than the panel). `min-h-0` is required —
-            without it this flex child refuses to shrink below its content and the panel
-            grows instead of scrolling. */}
-        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pb-3 scrollbar-hide">
-          {groups.map((group, i) => (
-            <Fragment key={i}>
-              {/* Full-bleed divider: a 16px block with the line at its centre, so the 12px
-                  column gap either side lands the line 20px clear of both groups. */}
-              {i > 0 && (
-                <div className="flex h-4 items-center" aria-hidden>
-                  <div className="h-px w-full bg-[#2C2D2E]" />
-                </div>
-              )}
-              {group}
-            </Fragment>
-          ))}
-        </div>
-      </aside>
-    </ControlContext.Provider>
-  );
-}
-
-export interface FormSummaryGroupProps {
-  title?: ReactNode;
-  /** Make the group collapsible via a `ConclusionHeader` title (default `true` when titled). */
-  collapsible?: boolean;
-  /** Initial open state when collapsible (default `true`). */
-  defaultOpen?: boolean;
-  className?: string;
-  children: ReactNode;
-}
-
-/**
- * A titled group of summary rows. When it has a `title` it is **collapsible**: the title
- * is a `ConclusionHeader` whose chevron opens/closes just this group's rows.
- */
-function FormSummaryGroup({
-  title,
-  collapsible = true,
-  defaultOpen = true,
-  className,
-  children,
-}: FormSummaryGroupProps) {
-  const [open, setOpen] = useState(defaultOpen);
-  const bodyId = useId();
-  const isCollapsible = collapsible && title != null;
-  const shown = !isCollapsible || open;
-
-  return (
-    // No `gap` here: the body collapses to zero height, and a flex gap would survive it as
-    // dead space. The 12px below the title is `pt-3` on the body — inside what collapses.
-    // No vertical padding either: the panel's 12px column gap is the only spacing between
-    // groups, and the dividers carry their own.
-    <section className={cn("flex flex-col px-2", className)}>
-      {title != null &&
-        (isCollapsible ? (
-          <ConclusionHeader
-            label={title}
-            open={open}
-            onOpenChange={setOpen}
-            aria-controls={bodyId}
-          />
-        ) : (
-          <h3 className="typography-body-large-medium text-white">{title}</h3>
-        ))}
-
-      {/* Fold/unfold: `grid-rows-[0fr → 1fr]` animates to the rows' natural height without
-          measuring it, so the group stays a pure-CSS transition. The inner `overflow-hidden`
-          is what the 0fr track actually clips — it must stay a bare wrapper. */}
-      <div
-        id={bodyId}
-        // Collapsed rows keep their inputs in the DOM, so `inert` is what takes them out of
-        // the tab order and the a11y tree — `overflow-hidden` alone would still let focus in.
-        inert={!shown}
-        aria-hidden={!shown}
-        className={cn(
-          "grid transition-[grid-template-rows,opacity] duration-200 ease-in-out",
-          "motion-reduce:transition-none",
-          shown ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-        )}
-      >
-        <div className="overflow-hidden">
-          {/* Rows sit flush with the header (both at the section's px-2), 12px apart. */}
-          <div className={cn("flex flex-col gap-3", title != null && "pt-3")}>{children}</div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export interface FormSummaryRowProps<T extends FieldValues = FieldValues> {
-  label: ReactNode;
-  /**
-   * The calculation. Receives the **live** form values and returns the row's value.
-   * Omit it and pass `value` for a static row.
-   */
-  compute?: (values: T) => number | string | undefined | null;
-  /** Static value (used when there's no `compute`). */
-  value?: number | string | null;
-  /** Currency code shown beside the label, e.g. "IQD" / "USD". */
-  currency?: ReactNode;
-  /** Color of the currency code. */
-  tone?: SummaryTone;
-  /** The primary result — renders with a lighter, emphasized border. */
-  emphasized?: boolean;
-  /** Decimal places (default 2 → `0.00`). */
-  decimals?: number;
-  /** Trailing slot inside the field, e.g. an `ActionButton`. */
-  action?: ReactNode;
-  /** Override the default number formatting. */
-  format?: (value: number | string | undefined | null) => string;
-  className?: string;
-}
-
-/**
- * One summary row: a label above a read-only, right-aligned value field.
- *
- * Uses the raw `Input` primitives (`Group`/`Input`/`Trilling`) rather than `InputField`,
- * which always wraps in a Popover/Tooltip and whose `className` targets the wrapper —
- * so it can't right-align the value text.
- */
-function FormSummaryRow<T extends FieldValues = FieldValues>({
-  label,
-  compute,
-  value,
-  currency,
-  tone = "neutral",
-  emphasized,
-  decimals = 2,
-  action,
-  format,
-  className,
-}: FormSummaryRowProps<T>) {
-  // Subscribes to the form's values — recomputes as the user types. `control` comes
-  // from the panel's `form` prop; with none, useWatch falls back to a surrounding
-  // FormProvider (so the panel still works as a child of the form).
-  const control = useContext(ControlContext);
-  const values = useWatch({ control }) as T;
-  const raw = compute ? compute(values) : value;
-  const text = format ? format(raw) : formatAmount(raw, decimals);
-
-  return (
-    // 18px label + 4px + 30px field = the design's 52px row.
-    <div className={cn("flex flex-col gap-1", className)}>
-      <span className="typography-body-small-regular text-[#E5E5E5]">{label}</span>
-
-      <Group
-        size="S"
-        variant="PresentationStyle"
-        className={cn("w-full", emphasized && "!border-black-400")}
-      >
-        {/* readOnly, not disabled — `disabled` triggers the greyed-out field styles.
-            `mask-image:none` cancels Input's fade-out-to-the-right gradient, which
-            would otherwise fade the tail of a right-aligned value. */}
-        <Input readOnly value={text} tabIndex={-1} className="cursor-default [mask-image:none]" />
-
-        {/* The currency code rides in the field's trailing slot, not the label — it shares
-            the slot with `action`, which is why both live in one `Trilling`. */}
-        {(currency || action) && (
-          <Trilling>
-            {currency && (
-              <span className={cn("pe-1 typography-body-small-medium", toneStyles[tone])}>
-                {currency}
-              </span>
-            )}
-            {action}
-          </Trilling>
-        )}
-      </Group>
-    </div>
-  );
-}
-
-export const FormSummary = Object.assign(FormSummaryRoot, {
-  Group: FormSummaryGroup,
-  Row: FormSummaryRow,
-});
-
-FormSummaryRoot.displayName = "FormSummary";

package/apps/lib/components/HeaderBar.tsx

@@ -1,117 +0,0 @@
-import React, { forwardRef } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-
-/**
- * HeaderBar
- *
- * A variant-driven header chip showing two text pieces inside a single
- * rounded container:
- *  - `label` -> the colored emphasis pill (BADGE piece)
- *  - `title` -> the plain text (PLAIN piece)
- *
- * The `variant` controls BOTH the colors AND the DOM order:
- *  - "new"  / "edit"  -> [badge(label)] [plain(title)]   (badge on the LEFT)
- *  - "detail"         -> [plain(title)] [badge(label)]    (badge on the RIGHT)
- *
- * Example usage:
- *  - new:    <HeaderBar variant="new"    label="New"   title="sales iNVOICE" />
- *  - edit:   <HeaderBar variant="edit"   label="edit"  title="sales iNVOICE" />
- *  - detail: <HeaderBar variant="detail" label="de-344" title="sales iNVOICE" />
- *            (renders plain "sales iNVOICE" on the LEFT, colored "de-344" on the RIGHT)
- */
-
-// 28px / weight 510 — the design's `Font/Size/Display/Medium`, which is exactly what this class
-// carries. Shared by the badge and the plain title so the two pieces cannot drift apart.
-const headerTextStyles = "typography-display-medium-medium uppercase [font-feature-settings:'cv05'_on]";
-
-// Colored pill holding `label`. 32px tall, 4px side padding, 8px radius — Figma `Header.Badge`.
-const badgeStyles = cva(["flex", "h-8", "items-center", "justify-center", "rounded-lg", "px-1"], {
-  variants: {
-    variant: {
-      new: "bg-blue-sparkle-alpha-50",
-      edit: "bg-orange-alpha-50",
-      // `White Alpha/15`, not /30 — the detail chip is the faintest of the three.
-      detail: "bg-white-alpha-15",
-    },
-  },
-  defaultVariants: {
-    variant: "new",
-  },
-});
-
-// Text inside the colored pill.
-const badgeTextStyles = cva([headerTextStyles], {
-  variants: {
-    variant: {
-      new: "text-blue-sparkle-200",
-      edit: "text-orange-200",
-      detail: "text-white-00",
-    },
-  },
-  defaultVariants: {
-    variant: "new",
-  },
-});
-
-interface HeaderBarProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeStyles> {
-  theme?: Themes;
-  /** The colored emphasis pill text. */
-  label: string;
-  /** The plain text. */
-  title: string;
-}
-
-const HeaderBar = forwardRef<HTMLDivElement, HeaderBarProps>(
-  ({ variant = "new", label, title, theme, className, ...props }, ref) => {
-    const badge = (
-      <div className={cn(badgeStyles({ variant }))}>
-        <p className={cn(badgeTextStyles({ variant }))}>{label}</p>
-      </div>
-    );
-
-    // The plain title sits in its own 32px box with 6px side padding — that padding, not a row
-    // `gap`, is what separates it from the badge (matching the design's `padding` frame).
-    const plain = (
-      <div className="flex h-8 items-center justify-center px-1.5">
-        <p className={cn(headerTextStyles, "text-white-00")}>{title}</p>
-      </div>
-    );
-
-    return (
-      <div
-        ref={ref}
-        data-theme={theme}
-        className={cn(
-          "inline-flex flex-col items-start overflow-hidden rounded-[14px] border border-black-600 bg-black-1000 p-1.5 shadow-[0_0_32px_2px_rgba(0,0,0,0.05),0_0_32px_2px_rgba(0,0,0,0.05)]",
-          className,
-        )}
-        {...props}
-      >
-        {/* `detail` genuinely swaps the two children rather than using `flex-row-reverse`. The
-            visual result is the same in LTR, but reversing the row would flip the pair the wrong
-            way under `dir="rtl"` and would read out of order to a screen reader. */}
-        <div className="flex items-center">
-          {variant === "detail" ? (
-            <>
-              {plain}
-              {badge}
-            </>
-          ) : (
-            <>
-              {badge}
-              {plain}
-            </>
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
-HeaderBar.displayName = "HeaderBar";
-
-export default HeaderBar;
-export { HeaderBar };

package/apps/lib/components/ImageAttachment.tsx

@@ -1,209 +0,0 @@
-import { forwardRef, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
-import { Button } from "./Button";
-import { cva } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogCancel,
-} from "./AlertDialog";
-
-const dropZoneStyles = cva(
-  [
-    // Dashed drop zone that fills the field box (design: Attachment-Field-1.0 "Upload-Button").
-    // Transparent fill so the surrounding #f9f9f9 box shows through the dashed border.
-    "flex-1 h-[65px] flex flex-col rounded-[8px] border-dashed !border-2 transition-all duration-300 ease-in-out",
-    "!border-border-presentation-action-borderstyle bg-transparent",
-    "hover:bg-background-presentation-badge-gray-subtle",
-  ],
-  {
-    variants: {
-      active: {
-        true: "!bg-background-presentation-badge-gray-subtle !border-border-presentation-badge-gray",
-      },
-    },
-  },
-);
-
-interface Props extends InputHTMLAttributes<HTMLInputElement | HTMLDivElement> {
-  isDropAreaActive?: boolean;
-  mainLabel: string;
-  secondaryLabel: string;
-  theme?: Themes;
-  expandLabel?: ReactNode;
-  children?: ReactNode;
-  getRootProps?: () => Record<string, unknown>;
-}
-
-const ImageAttachment = forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      isDropAreaActive,
-      mainLabel,
-      theme,
-      secondaryLabel,
-      className,
-      getRootProps,
-      children,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} so it isn't leaked onto the <input>
-      expandLabel,
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    return (
-      // The #f9f9f9 field box (design: Attachment-Field-1.0). Holds an optional preview
-      // (children) on the leading side and the dashed drop zone filling the rest.
-      <section
-        className={cn(
-          "flex w-full items-center gap-[10px] rounded-[8px] bg-background-presentation-form-field-primary",
-          className,
-        )}
-      >
-        {children}
-        <Button
-          {...getRootProps?.()}
-          theme={theme}
-          as="label"
-          id={props.id}
-          variant="PrimeContStyle"
-          className={cn(dropZoneStyles({ active: isDropAreaActive }))}
-          containerClassName="flex-col"
-        >
-          <h1 className="text-content-presentation-action-light-primary typography-body-large-medium">
-            {mainLabel}
-          </h1>
-          <p className="text-content-presentation-action-light-secondary typography-body-small-medium">
-            {secondaryLabel}
-          </p>
-          <input ref={ref} {...props} type="file" hidden />
-        </Button>
-      </section>
-    );
-  },
-);
-
-ImageAttachment.displayName = "ImageAttachment";
-
-export { ImageAttachment, ExpandableImage, AttachmentImagePreview };
-
-interface ExpandableImageProps extends HTMLAttributes<HTMLDivElement> {
-  previewSrc: string;
-  expandLabel: ReactNode;
-  placeholderLabel?: string;
-  theme?: Themes;
-}
-
-const ExpandableImage = ({
-  theme,
-  previewSrc,
-  expandLabel,
-  placeholderLabel = "Upload Image",
-  className,
-  ...props
-}: ExpandableImageProps) => {
-  return (
-    // Pic-Container-1.0: a 65×65 square thumbnail (or the placeholder), with an Expand
-    // overlay revealed on hover.
-    <section
-      style={props.style}
-      data-theme={theme}
-      className={cn(
-        "group relative flex size-[65px] shrink-0 items-center justify-center overflow-hidden rounded-[8px] border-none",
-        className,
-      )}
-    >
-      {previewSrc ? <SelectedImg src={previewSrc} /> : <PlaceHolder label={placeholderLabel} />}
-
-      {previewSrc && (
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <button className="absolute z-10 flex h-full w-full flex-col items-center justify-center gap-[2px] bg-black/50 opacity-0 transition-all duration-200 ease-in-out hover:opacity-100">
-              <i className="ri-fullscreen-line text-content-presentation-global-hover text-[24px] leading-none" />
-              <p className="text-content-presentation-global-hover typography-labels-small-regular m-0 max-w-[50px] break-words text-center">
-                {expandLabel}
-              </p>
-            </button>
-          </AlertDialogTrigger>
-          <AlertDialogContent className="w-fit bg-transparent border-none">
-            {props.children}
-          </AlertDialogContent>
-        </AlertDialog>
-      )}
-    </section>
-  );
-};
-
-function PlaceHolder({ label }: { label: string }) {
-  return (
-    // Pic-Container-1.0 default: ocean fill + dashed blue-purple border; on hover it goes gray.
-    // (Was styled with a `badge-blue-purple` token that does not exist — a no-op until now.)
-    <section
-      className={cn([
-        "size-[65px] gap-[2px] flex flex-col justify-center items-center px-1",
-        " rounded-[8px] border-2 border-dashed",
-        " border-blue-purple-300 bg-background-presentation-badge-ocean-subtle",
-        " transition-all duration-300 ease-in-out",
-        " group-hover:bg-background-presentation-badge-gray-subtle group-hover:border-border-presentation-badge-gray",
-      ])}
-    >
-      <i className="ri-attachment-line text-blue-purple-800 group-hover:text-content-presentation-badge-gray text-[24px] h-[24px]"></i>
-      <p className="text-blue-purple-800 typography-labels-small-regular group-hover:text-content-presentation-badge-gray px-1 py-[2px] text-center">
-        {label}
-      </p>
-    </section>
-  );
-}
-
-function SelectedImg({ src }: { src: string }) {
-  return (
-    <section className="size-full shrink-0 overflow-hidden rounded-[8px] border border-border-presentation-global-primary bg-white">
-      <img alt="" src={src} className="h-full w-full object-cover object-center" />
-    </section>
-  );
-}
-
-interface AttachmentImagePreviewProps extends HTMLAttributes<HTMLDivElement> {
-  src: string;
-  header?: ReactNode;
-  theme?: Themes;
-}
-
-function AttachmentImagePreview({
-  theme,
-  src,
-  header,
-  className,
-  ...props
-}: AttachmentImagePreviewProps) {
-  return (
-    <section
-      {...props}
-      data-theme={theme}
-      className={cn(
-        " overflow-hidden flex flex-col items-center justify-center w-80 p-2 gap-2 rounded-md border shadow-md border-border-presentation-global-primary bg-background-presentation-form-base",
-        className,
-      )}
-    >
-      <section className="flex items-center justify-between w-full m-0">
-        <p className="m-0 text-content-presentation-global-primary typography-display-medium-semibold">
-          {header}
-        </p>
-        <AlertDialogCancel asChild>
-          <Button theme={theme} size="M" buttonType="icon">
-            <i className="ri-close-line text-[16px]"></i>
-          </Button>
-        </AlertDialogCancel>
-      </section>
-
-      <img
-        className="w-full object-cover object-center rounded-md  border shadow-md border-border-presentation-global-primary"
-        src={src}
-      />
-
-      <section className="flex items-center justify-end w-full gap-2">{props.children}</section>
-    </section>
-  );
-}