@fairmint/ui 0.2.25 → 0.2.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,26 @@
1
+ import { ReactNode } from 'react';
2
+ export interface ConfidentialityBannerProps {
3
+ /**
4
+ * Banner message. Typically a one-line legal / policy notice that
5
+ * the viewer must see before interacting with the page.
6
+ */
7
+ children: ReactNode;
8
+ /**
9
+ * Icon rendered to the left of the message. Defaults to a lock glyph.
10
+ * Pass `null` to omit the icon entirely.
11
+ */
12
+ icon?: ReactNode;
13
+ }
14
+ /**
15
+ * Thin gradient ribbon used at the very top of confidential / gated
16
+ * pages (e.g., offering pages, board-pack distributions). Sits above
17
+ * the page's regular sticky header so the disclaimer is the first
18
+ * thing the viewer sees.
19
+ *
20
+ * Visual treatment is the Fairmint indigo→purple gradient at 8%
21
+ * opacity, with a 1px bottom border and a center-aligned message. The
22
+ * lock glyph signals "private, do not share" without leaning on
23
+ * heavy "WARNING" framing.
24
+ */
25
+ export declare function ConfidentialityBanner({ children, icon }: ConfidentialityBannerProps): import("react/jsx-runtime").JSX.Element;
26
+ //# sourceMappingURL=ConfidentialityBanner.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ConfidentialityBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/ConfidentialityBanner/ConfidentialityBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,0BAA0B,2CAuBnF"}
@@ -0,0 +1,51 @@
1
+ import { ReactNode } from 'react';
2
+ export interface DataRowProps {
3
+ /** Left-aligned label. */
4
+ label: string;
5
+ /**
6
+ * Right-aligned value.
7
+ *
8
+ * - `string` — rendered as styled `Text` (accent-aware).
9
+ * - `ReactNode` — rendered as-is. Pass `<StackedValue values={...}/>`
10
+ * for a vertical list, or any other JSX (badges, icons, links).
11
+ * - `null` — renders a `<RedactedValue>` placeholder. No real
12
+ * value lives in the DOM, so a pre-auth dev-tools inspection
13
+ * reveals nothing.
14
+ */
15
+ value: ReactNode | null;
16
+ /**
17
+ * When true, a string `value` renders in success-green bold weight.
18
+ * Use for highlighted rows like fees, carry, or "yes" answers.
19
+ */
20
+ accent?: boolean;
21
+ }
22
+ /**
23
+ * One label / value row used by terms panels, profile sections, and
24
+ * any "definition list" UX.
25
+ *
26
+ * The `null` → redacted placeholder convention is a security primitive:
27
+ * when content is behind a gate, pass `null` and the placeholder shows
28
+ * a dotted strip without leaking the real value into the DOM.
29
+ */
30
+ export declare function DataRow({ label, value, accent }: DataRowProps): import("react/jsx-runtime").JSX.Element;
31
+ export interface StackedValueProps {
32
+ /** List of strings to render as a vertical, right-aligned stack. */
33
+ values: ReadonlyArray<string>;
34
+ }
35
+ /**
36
+ * Right-aligned vertical stack of values. Compose with `DataRow`
37
+ * when a single label has multiple values (e.g., "Funding: USDC / USDT
38
+ * / Wire" rendered as three lines stacked under the "Funding" label).
39
+ */
40
+ export declare function StackedValue({ values }: StackedValueProps): import("react/jsx-runtime").JSX.Element;
41
+ export interface RedactedValueProps {
42
+ /** Width of the placeholder strip in pixels. @default 80 */
43
+ width?: number;
44
+ }
45
+ /**
46
+ * Source-safe placeholder — a fixed-width dotted strip rendered when
47
+ * a value is gated. No real value lives in the DOM, so a pre-auth
48
+ * dev-tools inspection reveals nothing.
49
+ */
50
+ export declare function RedactedValue({ width }?: RedactedValueProps): import("react/jsx-runtime").JSX.Element;
51
+ //# sourceMappingURL=DataRow.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataRow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/DataRow/DataRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,YAAY,2CAuBrE;AAED,MAAM,WAAW,iBAAiB;IAChC,oEAAoE;IACpE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAUzD;AAED,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAU,EAAE,GAAE,kBAAuB,2CAapE"}
@@ -0,0 +1,23 @@
1
+ import { ReactNode } from 'react';
2
+ import { TextProps } from '../../primitives/layout';
3
+ export interface EyebrowProps extends Omit<TextProps, "children" | "size" | "fw" | "tt" | "c"> {
4
+ /** Eyebrow text content. */
5
+ children: ReactNode;
6
+ /** Eyebrow size. Defaults to `xs`. */
7
+ size?: "xs" | "sm";
8
+ /**
9
+ * Text color. Defaults to `neutralColors[500]`. Override when the
10
+ * eyebrow sits on a dark background or needs to match an accent.
11
+ */
12
+ c?: string;
13
+ }
14
+ /**
15
+ * Small uppercase letter-spaced label used above titles, in card
16
+ * headers, and as section eyebrows throughout the Fairmint apps.
17
+ *
18
+ * Standardizes the `Text size="xs" tt="uppercase" fw={700}
19
+ * c={neutralColors[500]} style={{ letterSpacing: "0.08em" }}`
20
+ * incantation that was scattered across screens.
21
+ */
22
+ export declare function Eyebrow({ children, size, c, ...rest }: EyebrowProps): import("react/jsx-runtime").JSX.Element;
23
+ //# sourceMappingURL=Eyebrow.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Eyebrow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Eyebrow/Eyebrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;IAC5F,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,CAAsB,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAM/F"}
@@ -0,0 +1,26 @@
1
+ import { ReactNode } from 'react';
2
+ export interface RadioCardProps {
3
+ /** Whether this card is currently selected. */
4
+ selected: boolean;
5
+ /** Primary label (top-left). */
6
+ title: ReactNode;
7
+ /** Supporting description below the title. */
8
+ description?: ReactNode;
9
+ /** Optional pill / chip rendered next to the title (top-right). */
10
+ badge?: ReactNode;
11
+ /** Optional leading slot (icon / small avatar / number badge). */
12
+ leading?: ReactNode;
13
+ /** Triggered when the card is clicked. */
14
+ onSelect: () => void;
15
+ }
16
+ /**
17
+ * Selectable card with a title + description and a radio dot affordance.
18
+ *
19
+ * Used for any "pick one from a few" UX: funding methods, accreditation
20
+ * categories, tax classifications, plan tiers, etc. The visual treatment
21
+ * (indigo border + tinted background when active, radio dot on the
22
+ * right) is the standard Fairmint pattern so users learn it once and
23
+ * apply it everywhere.
24
+ */
25
+ export declare function RadioCard({ selected, title, description, badge, leading, onSelect, }: RadioCardProps): import("react/jsx-runtime").JSX.Element;
26
+ //# sourceMappingURL=RadioCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/RadioCard/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,cAAc,2CAiEhB"}
@@ -0,0 +1,32 @@
1
+ import { ReactNode } from 'react';
2
+ export interface StepCardProps {
3
+ /** 1-indexed step number shown in the indicator when not done. */
4
+ index: number;
5
+ /** Step title. */
6
+ title: string;
7
+ /** Optional supporting text below the title. */
8
+ description?: string;
9
+ /** When true, the indicator flips from the number to a check glyph. */
10
+ done?: boolean;
11
+ /**
12
+ * Override the icon shown when `done === true`. Defaults to a check
13
+ * mark inside a circle. Accept-as-ReactNode so consumers don't need
14
+ * to import an icon library.
15
+ */
16
+ doneIcon?: ReactNode;
17
+ /** Step content rendered below the header. */
18
+ children: ReactNode;
19
+ }
20
+ /**
21
+ * Numbered step card used in multi-section wizards and form flows.
22
+ *
23
+ * The numbered indicator on the left flips to a check when the step is
24
+ * marked done — a quiet progress signal that doesn't compete with the
25
+ * right-column summary or page-level progress UI. Each step sits in
26
+ * its own `Paper` for clear visual separation.
27
+ *
28
+ * The header indicator is the focal point; consumers control the body
29
+ * via `children`.
30
+ */
31
+ export declare function StepCard({ index, title, description, done, doneIcon, children, }: StepCardProps): import("react/jsx-runtime").JSX.Element;
32
+ //# sourceMappingURL=StepCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StepCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StepCard/StepCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC,MAAM,WAAW,aAAa;IAC5B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,aAAa,2CA8Cf"}
@@ -1,17 +1,59 @@
1
1
  import { ReactNode } from 'react';
2
2
  export interface DocumentRowProps {
3
- /** Document name. */
3
+ /** Primary title — usually the file or agreement name. */
4
4
  name: string;
5
- /** Document type label (e.g., "Agreement", "Tax Form"). */
5
+ /**
6
+ * Description below the title. Accepts a `ReactNode` so consumers can mix
7
+ * Badges, Text, dates, and inline metadata (companyName, seriesName, etc.)
8
+ * without working around a single-string subtitle slot.
9
+ */
10
+ caption?: ReactNode;
11
+ /**
12
+ * @deprecated Use `caption` directly. When `caption` is omitted and
13
+ * `type` and/or `date` is supplied, they are joined with " · " to
14
+ * produce a string caption. Preserved for backwards compatibility
15
+ * with the previous, ListRow-backed API.
16
+ */
6
17
  type?: string;
7
- /** Date the document was created or signed (ISO string). */
18
+ /**
19
+ * @deprecated Use `caption` directly. The date is now consumer-
20
+ * formatted; pass a formatted string via `caption` instead. Preserved
21
+ * for backwards compatibility.
22
+ */
8
23
  date?: string;
9
- /** Right section actions (e.g., download button). */
24
+ /**
25
+ * Leading visual — defaults to a tinted file-icon `ThemeIcon`. Pass a
26
+ * custom node (an icon, a badge, a small Avatar, etc.) when you want
27
+ * a different leading affordance.
28
+ */
29
+ icon?: ReactNode;
30
+ /** Right-side content — download button, lock badge, preview link, etc. */
10
31
  rightSection?: ReactNode;
11
- /** Click handler — opens document viewer. */
32
+ /**
33
+ * Drill-in chevron. Defaults to `false` — the right-side glyph (a
34
+ * download icon, a preview link, a status badge) usually conveys the
35
+ * affordance and the chevron is visual noise. Set to `true` for "row
36
+ * that opens a detail view" patterns.
37
+ */
38
+ showChevron?: boolean;
39
+ /** Click handler. */
12
40
  onClick?: () => void;
13
- /** Entrance animation delay in seconds. */
41
+ /** Entrance animation delay in seconds. Omit to skip animation. */
14
42
  animationDelay?: number;
43
+ /** aria-label for the clickable wrapper. Defaults to `name`. */
44
+ ariaLabel?: string;
15
45
  }
16
- export declare function DocumentRow({ name, type, date, rightSection, onClick, animationDelay, }: DocumentRowProps): import("react/jsx-runtime").JSX.Element;
46
+ /**
47
+ * Document list item — title, free-form caption, optional leading icon,
48
+ * optional right-side affordance, optional drill-in chevron.
49
+ *
50
+ * Designed against three real consumers (investorv2's `OpportunityDocuments`,
51
+ * `SignSection` legal-doc list, and the mobile card view on `/documents`)
52
+ * so the shape covers the actual patterns rather than an imagined one.
53
+ *
54
+ * Backwards-compat note: the previous `type` + `date` API still works.
55
+ * When `caption` is omitted, the legacy props are joined with " · " into
56
+ * a string caption.
57
+ */
58
+ export declare function DocumentRow({ name, caption, type, date, icon, rightSection, onClick, showChevron, animationDelay, ariaLabel, }: DocumentRowProps): import("react/jsx-runtime").JSX.Element;
17
59
  //# sourceMappingURL=DocumentRow.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DocumentRow.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,gBAAgB;IAC/B,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,cAAc,GACf,EAAE,gBAAgB,2CAelB"}
1
+ {"version":3,"file":"DocumentRow.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/DocumentRow/DocumentRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgDvC,MAAM,WAAW,gBAAgB;IAC/B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,WAAmB,EACnB,cAAc,EACd,SAAS,GACV,EAAE,gBAAgB,2CAyElB"}
@@ -38317,6 +38317,42 @@ function CompanyBanner({
38317
38317
  detailEl
38318
38318
  ] });
38319
38319
  }
38320
+ const DefaultLockIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
38321
+ "svg",
38322
+ {
38323
+ width: "12",
38324
+ height: "12",
38325
+ viewBox: "0 0 24 24",
38326
+ fill: "none",
38327
+ stroke: "currentColor",
38328
+ strokeWidth: "2",
38329
+ strokeLinecap: "round",
38330
+ strokeLinejoin: "round",
38331
+ "aria-hidden": "true",
38332
+ children: [
38333
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
38334
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
38335
+ ]
38336
+ }
38337
+ );
38338
+ function ConfidentialityBanner({ children, icon }) {
38339
+ const iconNode = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(DefaultLockIcon, {}) : icon;
38340
+ return /* @__PURE__ */ jsxRuntime.jsx(
38341
+ Box,
38342
+ {
38343
+ py: 8,
38344
+ px: "md",
38345
+ style: {
38346
+ background: `linear-gradient(90deg, ${brandColors.indigo}14 0%, ${brandColors.purple}14 100%)`,
38347
+ borderBottom: `1px solid ${neutralColors[200]}`
38348
+ },
38349
+ children: /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "center", gap: 6, wrap: "nowrap", children: [
38350
+ iconNode !== null && /* @__PURE__ */ jsxRuntime.jsx(Box, { c: neutralColors[600], style: { display: "inline-flex" }, children: iconNode }),
38351
+ /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: neutralColors[700], fw: 500, ta: "center", children })
38352
+ ] })
38353
+ }
38354
+ );
38355
+ }
38320
38356
  function ConfirmDialog({
38321
38357
  title,
38322
38358
  message,
@@ -38482,6 +38518,40 @@ function Currency({ value, precise = false, currency, style, ...rest }) {
38482
38518
  }
38483
38519
  return /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", style: [TABULAR_NUMS, style], ...rest, children: formatted });
38484
38520
  }
38521
+ function DataRow({ label, value, accent = false }) {
38522
+ return /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "nowrap", children: [
38523
+ /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: neutralColors[600], style: { flexShrink: 0 }, children: label }),
38524
+ value === null ? /* @__PURE__ */ jsxRuntime.jsx(RedactedValue, {}) : typeof value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
38525
+ Text,
38526
+ {
38527
+ size: "sm",
38528
+ fw: accent ? 700 : 500,
38529
+ c: accent ? `${colors.success}.8` : neutralColors[900],
38530
+ ta: "right",
38531
+ style: { minWidth: 0 },
38532
+ children: value
38533
+ }
38534
+ ) : value
38535
+ ] });
38536
+ }
38537
+ function StackedValue({ values: values2 }) {
38538
+ return /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: 2, align: "flex-end", children: values2.map((v) => /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", fw: 500, c: neutralColors[800], ta: "right", children: v }, v)) });
38539
+ }
38540
+ function RedactedValue({ width = 80 } = {}) {
38541
+ return /* @__PURE__ */ jsxRuntime.jsx(
38542
+ Box,
38543
+ {
38544
+ role: "img",
38545
+ "aria-label": "Redacted — sign in to view",
38546
+ style: {
38547
+ height: 14,
38548
+ width,
38549
+ borderRadius: 4,
38550
+ background: `repeating-linear-gradient(135deg, ${neutralColors[200]} 0 4px, ${neutralColors[100]} 4px 8px)`
38551
+ }
38552
+ }
38553
+ );
38554
+ }
38485
38555
  function EmptyState({
38486
38556
  icon,
38487
38557
  title,
@@ -38767,7 +38837,10 @@ function ErrorPage({
38767
38837
  }
38768
38838
  );
38769
38839
  }
38770
- const DefaultChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
38840
+ function Eyebrow({ children, size: size2 = "xs", c = neutralColors[500], ...rest }) {
38841
+ return /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size2, fw: 700, tt: "uppercase", c, style: { letterSpacing: "0.08em" }, ...rest, children });
38842
+ }
38843
+ const DefaultChevronIcon$1 = () => /* @__PURE__ */ jsxRuntime.jsx(
38771
38844
  "svg",
38772
38845
  {
38773
38846
  width: "14",
@@ -38832,7 +38905,7 @@ function ListRow({
38832
38905
  }
38833
38906
  )
38834
38907
  ] })),
38835
- displayChevron && (chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(Box, { c: fairmintVars.colorTextTertiary, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultChevronIcon, {}) }))
38908
+ displayChevron && (chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(Box, { c: fairmintVars.colorTextTertiary, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultChevronIcon$1, {}) }))
38836
38909
  ] })
38837
38910
  ] });
38838
38911
  const animationStyle = animate ? {
@@ -40121,6 +40194,80 @@ function PhotoCropModal({
40121
40194
  ] })
40122
40195
  ] }) });
40123
40196
  }
40197
+ function RadioCard({
40198
+ selected,
40199
+ title,
40200
+ description,
40201
+ badge,
40202
+ leading,
40203
+ onSelect
40204
+ }) {
40205
+ return /* @__PURE__ */ jsxRuntime.jsx(
40206
+ UnstyledButton,
40207
+ {
40208
+ onClick: onSelect,
40209
+ role: "radio",
40210
+ "aria-checked": selected,
40211
+ style: {
40212
+ display: "block",
40213
+ width: "100%",
40214
+ padding: 16,
40215
+ borderRadius: 12,
40216
+ border: `1.5px solid ${selected ? brandColors.indigo : neutralColors[200]}`,
40217
+ background: selected ? `${brandColors.indigo}08` : "white",
40218
+ transition: "all 120ms ease",
40219
+ textAlign: "left"
40220
+ },
40221
+ children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: [
40222
+ leading && /* @__PURE__ */ jsxRuntime.jsx(Box, { style: { flexShrink: 0 }, children: leading }),
40223
+ /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
40224
+ /* @__PURE__ */ jsxRuntime.jsxs(
40225
+ Box,
40226
+ {
40227
+ style: {
40228
+ display: "flex",
40229
+ justifyContent: "space-between",
40230
+ alignItems: "baseline",
40231
+ gap: 8
40232
+ },
40233
+ children: [
40234
+ /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 600, size: "sm", c: neutralColors[900], children: title }),
40235
+ badge
40236
+ ]
40237
+ }
40238
+ ),
40239
+ description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: neutralColors[600], lh: 1.5, children: description })
40240
+ ] }),
40241
+ /* @__PURE__ */ jsxRuntime.jsx(
40242
+ Box,
40243
+ {
40244
+ style: {
40245
+ width: 18,
40246
+ height: 18,
40247
+ borderRadius: "50%",
40248
+ border: `2px solid ${selected ? brandColors.indigo : neutralColors[300]}`,
40249
+ background: selected ? brandColors.indigo : "transparent",
40250
+ position: "relative",
40251
+ flexShrink: 0,
40252
+ marginTop: 2
40253
+ },
40254
+ children: selected && /* @__PURE__ */ jsxRuntime.jsx(
40255
+ Box,
40256
+ {
40257
+ style: {
40258
+ position: "absolute",
40259
+ inset: 4,
40260
+ borderRadius: "50%",
40261
+ background: "white"
40262
+ }
40263
+ }
40264
+ )
40265
+ }
40266
+ )
40267
+ ] })
40268
+ }
40269
+ );
40270
+ }
40124
40271
  function SearchInput({
40125
40272
  value,
40126
40273
  onChange,
@@ -40240,6 +40387,68 @@ function StatusBadge({ status, colorMap, label, ...rest }) {
40240
40387
  const displayLabel = label ?? status.charAt(0).toUpperCase() + status.slice(1);
40241
40388
  return /* @__PURE__ */ jsxRuntime.jsx(Badge, { color, variant: "light", ...rest, children: displayLabel });
40242
40389
  }
40390
+ const DefaultCheckIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
40391
+ "svg",
40392
+ {
40393
+ width: "18",
40394
+ height: "18",
40395
+ viewBox: "0 0 24 24",
40396
+ fill: "none",
40397
+ stroke: "currentColor",
40398
+ strokeWidth: "2",
40399
+ strokeLinecap: "round",
40400
+ strokeLinejoin: "round",
40401
+ "aria-hidden": "true",
40402
+ children: [
40403
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
40404
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 12 2 2 4-4" })
40405
+ ]
40406
+ }
40407
+ );
40408
+ function StepCard({
40409
+ index: index2,
40410
+ title,
40411
+ description,
40412
+ done = false,
40413
+ doneIcon,
40414
+ children
40415
+ }) {
40416
+ return /* @__PURE__ */ jsxRuntime.jsx(
40417
+ Paper,
40418
+ {
40419
+ radius: "lg",
40420
+ p: { base: "md", sm: "xl" },
40421
+ style: {
40422
+ background: "white",
40423
+ border: `1px solid ${neutralColors[200]}`
40424
+ },
40425
+ children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "md", children: [
40426
+ /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "md", align: "flex-start", wrap: "nowrap", children: [
40427
+ /* @__PURE__ */ jsxRuntime.jsx(
40428
+ ThemeIcon,
40429
+ {
40430
+ size: 32,
40431
+ radius: "xl",
40432
+ variant: done ? "filled" : "light",
40433
+ color: done ? "indigo" : "gray",
40434
+ style: {
40435
+ flexShrink: 0,
40436
+ background: done ? brandColors.indigo : neutralColors[100],
40437
+ color: done ? "white" : neutralColors[600]
40438
+ },
40439
+ children: done ? doneIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 700, fz: 14, children: index2 })
40440
+ }
40441
+ ),
40442
+ /* @__PURE__ */ jsxRuntime.jsxs(Box, { style: { minWidth: 0, flex: 1 }, children: [
40443
+ /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 700, fz: { base: 17, sm: 19 }, c: neutralColors[900], lh: 1.3, children: title }),
40444
+ description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", c: neutralColors[600], lh: 1.5, mt: 4, children: description })
40445
+ ] })
40446
+ ] }),
40447
+ /* @__PURE__ */ jsxRuntime.jsx(Box, { pl: { base: 0, sm: 48 }, children })
40448
+ ] })
40449
+ }
40450
+ );
40451
+ }
40243
40452
  function LoadingSpinner({ size: size2 = 32 }) {
40244
40453
  const iconProps = {
40245
40454
  xmlns: "http://www.w3.org/2000/svg",
@@ -40369,26 +40578,88 @@ function UserMenu({
40369
40578
  ] }, item.id)) })
40370
40579
  ] });
40371
40580
  }
40581
+ const DefaultDocumentIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
40582
+ "svg",
40583
+ {
40584
+ width: "18",
40585
+ height: "18",
40586
+ viewBox: "0 0 24 24",
40587
+ fill: "none",
40588
+ stroke: "currentColor",
40589
+ strokeWidth: "2",
40590
+ strokeLinecap: "round",
40591
+ strokeLinejoin: "round",
40592
+ "aria-hidden": "true",
40593
+ children: [
40594
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
40595
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" }),
40596
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
40597
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
40598
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "10 9 9 9 8 9" })
40599
+ ]
40600
+ }
40601
+ );
40602
+ const DefaultChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
40603
+ "svg",
40604
+ {
40605
+ width: "14",
40606
+ height: "14",
40607
+ viewBox: "0 0 24 24",
40608
+ fill: "none",
40609
+ stroke: "currentColor",
40610
+ strokeWidth: "2",
40611
+ strokeLinecap: "round",
40612
+ strokeLinejoin: "round",
40613
+ "aria-hidden": "true",
40614
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
40615
+ }
40616
+ );
40372
40617
  function DocumentRow({
40373
40618
  name,
40619
+ caption,
40374
40620
  type,
40375
40621
  date: date2,
40622
+ icon,
40376
40623
  rightSection,
40377
40624
  onClick,
40378
- animationDelay
40625
+ showChevron = false,
40626
+ animationDelay,
40627
+ ariaLabel
40379
40628
  }) {
40380
- const subtitle = [type, date2 ? formatDate(date2) : void 0].filter(Boolean).join(" · ");
40629
+ const isClickable = Boolean(onClick);
40630
+ const animate = animationDelay !== void 0;
40631
+ const resolvedCaption = caption ?? (type || date2 ? [type, date2 ? formatDate(date2) : void 0].filter(Boolean).join(" · ") : void 0);
40632
+ const leadingNode = icon ?? /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon, { size: 36, radius: "md", variant: "light", color: colors.primary, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultDocumentIcon, {}) });
40633
+ const content = /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "md", wrap: "nowrap", align: "center", children: [
40634
+ /* @__PURE__ */ jsxRuntime.jsx(Box, { style: { flexShrink: 0 }, children: leadingNode }),
40635
+ /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
40636
+ /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 500, size: "sm", lineClamp: 1, children: name }),
40637
+ resolvedCaption !== void 0 && resolvedCaption !== null && resolvedCaption !== "" ? typeof resolvedCaption === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, lineClamp: 1, children: resolvedCaption }) : resolvedCaption : null
40638
+ ] }),
40639
+ /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [
40640
+ rightSection,
40641
+ showChevron && /* @__PURE__ */ jsxRuntime.jsx(Box, { c: fairmintVars.colorTextTertiary, style: { display: "inline-flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultChevronIcon, {}) })
40642
+ ] })
40643
+ ] });
40644
+ const animationStyle = animate ? {
40645
+ opacity: 0,
40646
+ animation: "rowSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards",
40647
+ animationDelay: `${animationDelay}s`
40648
+ } : void 0;
40649
+ if (!isClickable) {
40650
+ return /* @__PURE__ */ jsxRuntime.jsx(Box, { py: "sm", px: "md", style: animationStyle, children: content });
40651
+ }
40381
40652
  return /* @__PURE__ */ jsxRuntime.jsx(
40382
- ListRow,
40653
+ UnstyledButton,
40383
40654
  {
40384
- title: name,
40385
- subtitle: subtitle || void 0,
40386
- avatarName: name,
40387
- avatarColor: colors.neutral,
40388
- rightSection,
40389
40655
  onClick,
40390
- animationDelay,
40391
- showChevron: Boolean(onClick)
40656
+ className: "fairmint-list-row",
40657
+ w: "100%",
40658
+ py: "sm",
40659
+ px: "md",
40660
+ style: animationStyle,
40661
+ "aria-label": ariaLabel ?? name,
40662
+ children: content
40392
40663
  }
40393
40664
  );
40394
40665
  }
@@ -41184,9 +41455,11 @@ exports.ClickableCard = ClickableCard;
41184
41455
  exports.Collapse = Collapse;
41185
41456
  exports.ColorDot = ColorDot;
41186
41457
  exports.CompanyBanner = CompanyBanner;
41458
+ exports.ConfidentialityBanner = ConfidentialityBanner;
41187
41459
  exports.ConfirmDialog = ConfirmDialog;
41188
41460
  exports.Container = Container;
41189
41461
  exports.Currency = Currency;
41462
+ exports.DataRow = DataRow;
41190
41463
  exports.DataTable = DataTable;
41191
41464
  exports.DateDisplay = DateDisplay;
41192
41465
  exports.DetailDrawer = DetailDrawer;
@@ -41201,6 +41474,7 @@ exports.EquityGrantCard = EquityGrantCard;
41201
41474
  exports.ErrorFallback = ErrorFallback;
41202
41475
  exports.ErrorPage = ErrorPage;
41203
41476
  exports.EthereumAddressField = EthereumAddressField;
41477
+ exports.Eyebrow = Eyebrow;
41204
41478
  exports.FairmintLogo = FairmintLogo;
41205
41479
  exports.FairmintProvider = FairmintProvider;
41206
41480
  exports.Flex = Flex;
@@ -41230,6 +41504,8 @@ exports.PhoneField = PhoneField;
41230
41504
  exports.PhotoCropModal = PhotoCropModal;
41231
41505
  exports.PinInput = PinInput;
41232
41506
  exports.Progress = Progress;
41507
+ exports.RadioCard = RadioCard;
41508
+ exports.RedactedValue = RedactedValue;
41233
41509
  exports.ScrollArea = ScrollArea;
41234
41510
  exports.SearchInput = SearchInput;
41235
41511
  exports.SegmentedControl = SegmentedControl;
@@ -41239,8 +41515,10 @@ exports.SimpleGrid = SimpleGrid;
41239
41515
  exports.Skeleton = Skeleton;
41240
41516
  exports.Space = Space;
41241
41517
  exports.Stack = Stack;
41518
+ exports.StackedValue = StackedValue;
41242
41519
  exports.StatCard = StatCard;
41243
41520
  exports.StatusBadge = StatusBadge;
41521
+ exports.StepCard = StepCard;
41244
41522
  exports.Switch = Switch;
41245
41523
  exports.TABLET_BREAKPOINT = TABLET_BREAKPOINT;
41246
41524
  exports.Table = Table;