94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
import type { CreateFlowStep } from "../types";
|
||
import { CREATE_FLOW_SCREEN_REGISTRY } from "../utils/createFlowScreenRegistry";
|
||
|
||
/**
|
||
* Shared page gutters for create-flow chrome and step shells.
|
||
* Six viewport bands collapse to three values: 20px below `md`, 48px from `md`,
|
||
* 64px from `lg` (320–639 / 640–1023 / 1024+).
|
||
*/
|
||
export const CREATE_FLOW_PAGE_GUTTER_CLASS = "px-5 md:px-12 lg:px-16";
|
||
|
||
/**
|
||
* Wizard viewport frame. `dvh` tracks mobile browser chrome so the action bar
|
||
* stays on-screen; `max-h-dvh` keeps the flex column from overflowing it.
|
||
*/
|
||
export const CREATE_FLOW_VIEWPORT_FRAME_CLASS =
|
||
"relative flex h-dvh max-h-dvh min-h-0 flex-col overflow-hidden";
|
||
|
||
/** Design-system scrollbar for create-flow scroll regions (not `scrollbar-hide`). */
|
||
export const CREATE_FLOW_SCROLL_REGION_CLASS = "scrollbar-design";
|
||
|
||
/**
|
||
* Fade above the fixed action bar so content that continues below the fold is
|
||
* visible as a continuation cue (Figma Scrim / footer overlay).
|
||
*/
|
||
export const CREATE_FLOW_FOOTER_SCRIM_CLASS =
|
||
"pointer-events-none absolute inset-x-0 top-0 z-[1] h-8 -translate-y-full bg-gradient-to-t from-[var(--color-surface-default-primary,#000)] to-transparent";
|
||
|
||
/**
|
||
* Single column: full width below `lg` so tablet widths use available space;
|
||
* 640px from `--breakpoint-lg` up (two-column layouts start at `lg`).
|
||
*/
|
||
export const CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS =
|
||
"w-full min-w-0 lg:max-w-[640px]";
|
||
|
||
/** Grid cell: same cap as column max, centered when the track is wider than 640px. */
|
||
export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
|
||
"w-full min-w-0 lg:mx-auto lg:max-w-[640px]";
|
||
|
||
/** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */
|
||
export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS =
|
||
"w-full min-w-0 lg:max-w-[1328px]";
|
||
|
||
/** Review / card-stack frames (Figma Flow — Review max 1440). */
|
||
export const CREATE_FLOW_WIDE_MAX_CLASS = "w-full min-w-0 lg:max-w-[1440px]";
|
||
|
||
/**
|
||
* Lockup+card and card-stack `<main>`: keep `items-start` so a tall card can
|
||
* scroll from the top. Pair with {@link CREATE_FLOW_MD_CENTERED_SHELL_CLASS}.
|
||
*/
|
||
export const CREATE_FLOW_MD_CENTERED_MAIN_CLASS =
|
||
"items-start justify-center overflow-y-auto";
|
||
|
||
/**
|
||
* Center the step in the nav–footer band from `md` when it fits (`my-auto`),
|
||
* and drop the mobile top inset so that centering is not biased downward.
|
||
*/
|
||
export const CREATE_FLOW_MD_CENTERED_SHELL_CLASS = "md:my-auto md:pt-0";
|
||
|
||
/**
|
||
* Card-stack steps only (Figma compact card stack): wider than header lockup so the card grid /
|
||
* pyramid fits (max 860px). Header lockup stays {@link CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}.
|
||
* Card–card gap uses `gap-2` in `CardStack` (same on mobile and md+).
|
||
*/
|
||
export const CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS =
|
||
"w-full min-w-0 md:max-w-[min(100%,860px)]";
|
||
|
||
/**
|
||
* Inner max-width for step content and the action bar, so the primary button
|
||
* lines up with the nearest content column above 1440.
|
||
*/
|
||
export function getCreateFlowContentMaxClass(options: {
|
||
step: CreateFlowStep | null | undefined;
|
||
isTemplateReview?: boolean;
|
||
isTemplatesPicker?: boolean;
|
||
}): string {
|
||
if (options.isTemplateReview || options.isTemplatesPicker) {
|
||
return CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS;
|
||
}
|
||
if (!options.step) {
|
||
return CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS;
|
||
}
|
||
switch (CREATE_FLOW_SCREEN_REGISTRY[options.step].layoutKind) {
|
||
case "select":
|
||
case "right-rail":
|
||
case "completed":
|
||
case "review":
|
||
return CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS;
|
||
case "card":
|
||
return CREATE_FLOW_WIDE_MAX_CLASS;
|
||
default:
|
||
return CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS;
|
||
}
|
||
}
|