@fairmint/ui 0.4.4 → 0.4.6
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.
- package/dist/components/FairmintLogo/FairmintLogoMarkRounded.cjs +43 -4
- package/dist/components/FairmintLogo/FairmintLogoMarkRounded.cjs.map +1 -1
- package/dist/components/FairmintLogo/FairmintLogoMarkRounded.d.ts +8 -5
- package/dist/components/FairmintLogo/FairmintLogoMarkRounded.d.ts.map +1 -1
- package/dist/components/FairmintLogo/FairmintLogoMarkRounded.js +44 -5
- package/dist/components/FairmintLogo/FairmintLogoMarkRounded.js.map +1 -1
- package/dist/components/generic/Eyebrow/Eyebrow.cjs +1 -1
- package/dist/components/generic/Eyebrow/Eyebrow.cjs.map +1 -1
- package/dist/components/generic/Eyebrow/Eyebrow.d.ts +3 -6
- package/dist/components/generic/Eyebrow/Eyebrow.d.ts.map +1 -1
- package/dist/components/generic/Eyebrow/Eyebrow.js +1 -1
- package/dist/components/generic/Eyebrow/Eyebrow.js.map +1 -1
- package/dist/components/layout/PageHeader/PageHeader.cjs.map +1 -1
- package/dist/components/layout/PageHeader/PageHeader.d.ts +1 -0
- package/dist/components/layout/PageHeader/PageHeader.d.ts.map +1 -1
- package/dist/components/layout/PageHeader/PageHeader.js.map +1 -1
- package/dist/theme/logo.cjs +6 -2
- package/dist/theme/logo.cjs.map +1 -1
- package/dist/theme/logo.d.ts +6 -2
- package/dist/theme/logo.d.ts.map +1 -1
- package/dist/theme/logo.js +6 -2
- package/dist/theme/logo.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const logo = require("../../theme/logo.cjs");
|
|
5
6
|
const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 };
|
|
6
7
|
const LOGO_MARK_ROUNDED_TILE = logo.logoColors.markRoundedTile;
|
|
@@ -16,15 +17,17 @@ function FairmintLogoMarkRounded({
|
|
|
16
17
|
size = 32,
|
|
17
18
|
frameSize,
|
|
18
19
|
variant = "tile",
|
|
19
|
-
tileColor
|
|
20
|
+
tileColor,
|
|
20
21
|
glyphColor,
|
|
21
22
|
alt,
|
|
22
23
|
className,
|
|
23
24
|
style
|
|
24
25
|
}) {
|
|
26
|
+
const gradientId = React.useId();
|
|
25
27
|
const isDecorative = !alt;
|
|
26
28
|
const resolvedFrame = frameSize && frameSize > size ? frameSize : void 0;
|
|
27
29
|
const showTile = variant === "tile";
|
|
30
|
+
const showTileGlow = showTile && tileColor === void 0;
|
|
28
31
|
const resolvedGlyph = resolveGlyphColor(variant, glyphColor);
|
|
29
32
|
const mark = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
30
33
|
"svg",
|
|
@@ -40,8 +43,12 @@ function FairmintLogoMarkRounded({
|
|
|
40
43
|
"aria-label": isDecorative ? void 0 : alt,
|
|
41
44
|
children: [
|
|
42
45
|
!isDecorative && /* @__PURE__ */ jsxRuntime.jsx("title", { children: alt }),
|
|
43
|
-
showTile && /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor }),
|
|
44
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
46
|
+
showTile && /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor ?? LOGO_MARK_ROUNDED_TILE }),
|
|
47
|
+
showTileGlow && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "36", rx: "8", fill: `url(#${gradientId}-indigo)` }),
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { width: "36", height: "36", rx: "8", fill: `url(#${gradientId}-teal)` })
|
|
50
|
+
] }),
|
|
51
|
+
/* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(18 18.39) scale(1.35) translate(-18 -18.39)", children: [
|
|
45
52
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z", fill: resolvedGlyph }),
|
|
46
53
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47
54
|
"path",
|
|
@@ -57,8 +64,40 @@ function FairmintLogoMarkRounded({
|
|
|
57
64
|
fill: resolvedGlyph
|
|
58
65
|
}
|
|
59
66
|
),
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.5714 12.7273H19.
|
|
67
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.5714 12.7273H19.9113V16H22.5714V12.7273Z", fill: resolvedGlyph }),
|
|
61
68
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z", fill: resolvedGlyph })
|
|
69
|
+
] }),
|
|
70
|
+
showTileGlow && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
72
|
+
"radialGradient",
|
|
73
|
+
{
|
|
74
|
+
id: `${gradientId}-indigo`,
|
|
75
|
+
cx: "36",
|
|
76
|
+
cy: "0",
|
|
77
|
+
r: "36",
|
|
78
|
+
gradientTransform: "matrix(1 0 0 0.6667 0 0)",
|
|
79
|
+
gradientUnits: "userSpaceOnUse",
|
|
80
|
+
children: [
|
|
81
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: logo.logoColors.markRoundedGlowIndigo }),
|
|
82
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.5", stopColor: logo.logoColors.markRoundedGlowIndigo, stopOpacity: "0.6" }),
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: logo.logoColors.markRoundedGlowIndigo, stopOpacity: "0" })
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
88
|
+
"radialGradient",
|
|
89
|
+
{
|
|
90
|
+
id: `${gradientId}-teal`,
|
|
91
|
+
cx: "0",
|
|
92
|
+
cy: "36",
|
|
93
|
+
r: "22.5",
|
|
94
|
+
gradientUnits: "userSpaceOnUse",
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: logo.logoColors.markRoundedGlowTeal }),
|
|
97
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: logo.logoColors.markRoundedGlowTeal, stopOpacity: "0" })
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
)
|
|
62
101
|
] })
|
|
63
102
|
]
|
|
64
103
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FairmintLogoMarkRounded.cjs","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/**
|
|
1
|
+
{"version":3,"file":"FairmintLogoMarkRounded.cjs","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useId } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/** Base tile field from the FT Mark Rounded Square source asset. */\nexport const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;\n\n/**\n * Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside\n * (white/transparent padding around the tile).\n */\nexport const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;\nexport const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;\n\nexport type FairmintLogoMarkRoundedVariant = \"tile\" | \"black\" | \"white\";\n\nexport interface FairmintLogoMarkRoundedProps {\n /** Square size of the mark in pixels. @default 32 */\n size?: number;\n /**\n * Outer frame size. When set larger than `size`, centers the mark in a\n * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).\n */\n frameSize?: number;\n /**\n * `tile` — dark rounded square with white FT glyph (collapsed nav / app icon).\n * `black` — standalone FT ligature for light mode.\n * `white` — standalone FT ligature for dark mode.\n * @default \"tile\"\n */\n variant?: FairmintLogoMarkRoundedVariant;\n /**\n * Flat tile fill for `variant=\"tile\"`. Setting it replaces the brand field —\n * base color plus corner blooms — with a single solid color.\n */\n tileColor?: string;\n /** Glyph fill override. Defaults from `variant`. */\n glyphColor?: string;\n /**\n * Accessible name when the mark is standalone (collapsed nav, favicon).\n * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n */\n alt?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nfunction resolveGlyphColor(\n variant: FairmintLogoMarkRoundedVariant,\n glyphColor: string | undefined,\n): string {\n if (glyphColor) {\n return glyphColor;\n }\n return variant === \"black\" ? logoFills.black : logoFills.white;\n}\n\n/**\n * Fairmint FT mark — preferred collapsed SideNav / app-icon lockup.\n * Source geometry: FT Mark Rounded Square. `variant=\"tile\"` fills `size` with\n * the dark rounded square; `black` / `white` render the ligature alone for\n * light and dark surfaces. Optional `frameSize` adds transparent padding.\n */\nexport function FairmintLogoMarkRounded({\n size = 32,\n frameSize,\n variant = \"tile\",\n tileColor,\n glyphColor,\n alt,\n className,\n style,\n}: FairmintLogoMarkRoundedProps) {\n const gradientId = useId();\n const isDecorative = !alt;\n const resolvedFrame = frameSize && frameSize > size ? frameSize : undefined;\n const showTile = variant === \"tile\";\n // Corner blooms belong to the brand field — a caller-supplied fill replaces both.\n const showTileGlow = showTile && tileColor === undefined;\n const resolvedGlyph = resolveGlyphColor(variant, glyphColor);\n\n const mark = (\n <svg\n viewBox={`0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`}\n width={size}\n height={size}\n className={resolvedFrame ? undefined : className}\n style={{ display: \"block\", flexShrink: 0, ...(resolvedFrame ? undefined : style) }}\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden={isDecorative || undefined}\n role={isDecorative ? undefined : \"img\"}\n aria-label={isDecorative ? undefined : alt}\n >\n {!isDecorative && <title>{alt}</title>}\n {/* Tile fills the viewBox — padding belongs on `frameSize`, not inside the SVG. */}\n {showTile && (\n <rect width=\"36\" height=\"36\" rx=\"8\" fill={tileColor ?? LOGO_MARK_ROUNDED_TILE} />\n )}\n {showTileGlow && (\n <>\n <rect width=\"36\" height=\"36\" rx=\"8\" fill={`url(#${gradientId}-indigo)`} />\n <rect width=\"36\" height=\"36\" rx=\"8\" fill={`url(#${gradientId}-teal)`} />\n </>\n )}\n <g transform=\"translate(18 18.39) scale(1.35) translate(-18 -18.39)\">\n <path d=\"M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z\" fill={resolvedGlyph} />\n <path\n d=\"M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z\"\n fill={resolvedGlyph}\n />\n <path\n d=\"M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z\"\n fill={resolvedGlyph}\n />\n {/* Ascender runs under the crossbar — abutting edges leave a hairline seam. */}\n <path d=\"M22.5714 12.7273H19.9113V16H22.5714V12.7273Z\" fill={resolvedGlyph} />\n <path d=\"M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z\" fill={resolvedGlyph} />\n </g>\n {showTileGlow && (\n <defs>\n {/* Wide-but-shallow ellipse: the indigo bloom runs the full top edge\n but fades out before the lower right corner. */}\n <radialGradient\n id={`${gradientId}-indigo`}\n cx=\"36\"\n cy=\"0\"\n r=\"36\"\n gradientTransform=\"matrix(1 0 0 0.6667 0 0)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor={logoColors.markRoundedGlowIndigo} />\n <stop offset=\"0.5\" stopColor={logoColors.markRoundedGlowIndigo} stopOpacity=\"0.6\" />\n <stop offset=\"1\" stopColor={logoColors.markRoundedGlowIndigo} stopOpacity=\"0\" />\n </radialGradient>\n <radialGradient\n id={`${gradientId}-teal`}\n cx=\"0\"\n cy=\"36\"\n r=\"22.5\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor={logoColors.markRoundedGlowTeal} />\n <stop offset=\"1\" stopColor={logoColors.markRoundedGlowTeal} stopOpacity=\"0\" />\n </radialGradient>\n </defs>\n )}\n </svg>\n );\n\n if (!resolvedFrame) {\n return mark;\n }\n\n return (\n <span\n className={className}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: resolvedFrame,\n height: resolvedFrame,\n flexShrink: 0,\n ...style,\n }}\n >\n {mark}\n </span>\n );\n}\n"],"names":["logoColors","logoFills","useId","jsxs","jsx","Fragment"],"mappings":"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"}
|
|
@@ -4,8 +4,8 @@ export declare const LOGO_MARK_ROUNDED_VIEWBOX: {
|
|
|
4
4
|
readonly width: 36;
|
|
5
5
|
readonly height: 36;
|
|
6
6
|
};
|
|
7
|
-
/**
|
|
8
|
-
export declare const LOGO_MARK_ROUNDED_TILE: "#
|
|
7
|
+
/** Base tile field from the FT Mark Rounded Square source asset. */
|
|
8
|
+
export declare const LOGO_MARK_ROUNDED_TILE: "#0D1023";
|
|
9
9
|
/**
|
|
10
10
|
* Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside
|
|
11
11
|
* (white/transparent padding around the tile).
|
|
@@ -22,13 +22,16 @@ export interface FairmintLogoMarkRoundedProps {
|
|
|
22
22
|
*/
|
|
23
23
|
frameSize?: number;
|
|
24
24
|
/**
|
|
25
|
-
* `tile` —
|
|
25
|
+
* `tile` — dark rounded square with white FT glyph (collapsed nav / app icon).
|
|
26
26
|
* `black` — standalone FT ligature for light mode.
|
|
27
27
|
* `white` — standalone FT ligature for dark mode.
|
|
28
28
|
* @default "tile"
|
|
29
29
|
*/
|
|
30
30
|
variant?: FairmintLogoMarkRoundedVariant;
|
|
31
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Flat tile fill for `variant="tile"`. Setting it replaces the brand field —
|
|
33
|
+
* base color plus corner blooms — with a single solid color.
|
|
34
|
+
*/
|
|
32
35
|
tileColor?: string;
|
|
33
36
|
/** Glyph fill override. Defaults from `variant`. */
|
|
34
37
|
glyphColor?: string;
|
|
@@ -43,7 +46,7 @@ export interface FairmintLogoMarkRoundedProps {
|
|
|
43
46
|
/**
|
|
44
47
|
* Fairmint FT mark — preferred collapsed SideNav / app-icon lockup.
|
|
45
48
|
* Source geometry: FT Mark Rounded Square. `variant="tile"` fills `size` with
|
|
46
|
-
* the
|
|
49
|
+
* the dark rounded square; `black` / `white` render the ligature alone for
|
|
47
50
|
* light and dark surfaces. Optional `frameSize` adds transparent padding.
|
|
48
51
|
*/
|
|
49
52
|
export declare function FairmintLogoMarkRounded({ size, frameSize, variant, tileColor, glyphColor, alt, className, style, }: FairmintLogoMarkRoundedProps): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FairmintLogoMarkRounded.d.ts","sourceRoot":"","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FairmintLogoMarkRounded.d.ts","sourceRoot":"","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,uEAAuE;AACvE,eAAO,MAAM,yBAAyB;;;CAAqC,CAAC;AAE5E,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,WAA6B,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAChD,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,MAAM,MAAM,8BAA8B,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,4BAA4B;IAC3C,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,8BAA8B,CAAC;IACzC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAYD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAS,EACT,SAAS,EACT,OAAgB,EAChB,SAAS,EACT,UAAU,EACV,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,4BAA4B,+BAiG9B"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from "react";
|
|
2
3
|
import { logoColors, logoFills } from "../../theme/logo.js";
|
|
3
4
|
const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 };
|
|
4
5
|
const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;
|
|
@@ -14,15 +15,17 @@ function FairmintLogoMarkRounded({
|
|
|
14
15
|
size = 32,
|
|
15
16
|
frameSize,
|
|
16
17
|
variant = "tile",
|
|
17
|
-
tileColor
|
|
18
|
+
tileColor,
|
|
18
19
|
glyphColor,
|
|
19
20
|
alt,
|
|
20
21
|
className,
|
|
21
22
|
style
|
|
22
23
|
}) {
|
|
24
|
+
const gradientId = useId();
|
|
23
25
|
const isDecorative = !alt;
|
|
24
26
|
const resolvedFrame = frameSize && frameSize > size ? frameSize : void 0;
|
|
25
27
|
const showTile = variant === "tile";
|
|
28
|
+
const showTileGlow = showTile && tileColor === void 0;
|
|
26
29
|
const resolvedGlyph = resolveGlyphColor(variant, glyphColor);
|
|
27
30
|
const mark = /* @__PURE__ */ jsxs(
|
|
28
31
|
"svg",
|
|
@@ -38,8 +41,12 @@ function FairmintLogoMarkRounded({
|
|
|
38
41
|
"aria-label": isDecorative ? void 0 : alt,
|
|
39
42
|
children: [
|
|
40
43
|
!isDecorative && /* @__PURE__ */ jsx("title", { children: alt }),
|
|
41
|
-
showTile && /* @__PURE__ */ jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor }),
|
|
42
|
-
/* @__PURE__ */ jsxs(
|
|
44
|
+
showTile && /* @__PURE__ */ jsx("rect", { width: "36", height: "36", rx: "8", fill: tileColor ?? LOGO_MARK_ROUNDED_TILE }),
|
|
45
|
+
showTileGlow && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
46
|
+
/* @__PURE__ */ jsx("rect", { width: "36", height: "36", rx: "8", fill: `url(#${gradientId}-indigo)` }),
|
|
47
|
+
/* @__PURE__ */ jsx("rect", { width: "36", height: "36", rx: "8", fill: `url(#${gradientId}-teal)` })
|
|
48
|
+
] }),
|
|
49
|
+
/* @__PURE__ */ jsxs("g", { transform: "translate(18 18.39) scale(1.35) translate(-18 -18.39)", children: [
|
|
43
50
|
/* @__PURE__ */ jsx("path", { d: "M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z", fill: resolvedGlyph }),
|
|
44
51
|
/* @__PURE__ */ jsx(
|
|
45
52
|
"path",
|
|
@@ -55,8 +62,40 @@ function FairmintLogoMarkRounded({
|
|
|
55
62
|
fill: resolvedGlyph
|
|
56
63
|
}
|
|
57
64
|
),
|
|
58
|
-
/* @__PURE__ */ jsx("path", { d: "M22.5714 12.7273H19.
|
|
65
|
+
/* @__PURE__ */ jsx("path", { d: "M22.5714 12.7273H19.9113V16H22.5714V12.7273Z", fill: resolvedGlyph }),
|
|
59
66
|
/* @__PURE__ */ jsx("path", { d: "M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z", fill: resolvedGlyph })
|
|
67
|
+
] }),
|
|
68
|
+
showTileGlow && /* @__PURE__ */ jsxs("defs", { children: [
|
|
69
|
+
/* @__PURE__ */ jsxs(
|
|
70
|
+
"radialGradient",
|
|
71
|
+
{
|
|
72
|
+
id: `${gradientId}-indigo`,
|
|
73
|
+
cx: "36",
|
|
74
|
+
cy: "0",
|
|
75
|
+
r: "36",
|
|
76
|
+
gradientTransform: "matrix(1 0 0 0.6667 0 0)",
|
|
77
|
+
gradientUnits: "userSpaceOnUse",
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ jsx("stop", { stopColor: logoColors.markRoundedGlowIndigo }),
|
|
80
|
+
/* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: logoColors.markRoundedGlowIndigo, stopOpacity: "0.6" }),
|
|
81
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopColor: logoColors.markRoundedGlowIndigo, stopOpacity: "0" })
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
/* @__PURE__ */ jsxs(
|
|
86
|
+
"radialGradient",
|
|
87
|
+
{
|
|
88
|
+
id: `${gradientId}-teal`,
|
|
89
|
+
cx: "0",
|
|
90
|
+
cy: "36",
|
|
91
|
+
r: "22.5",
|
|
92
|
+
gradientUnits: "userSpaceOnUse",
|
|
93
|
+
children: [
|
|
94
|
+
/* @__PURE__ */ jsx("stop", { stopColor: logoColors.markRoundedGlowTeal }),
|
|
95
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopColor: logoColors.markRoundedGlowTeal, stopOpacity: "0" })
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
)
|
|
60
99
|
] })
|
|
61
100
|
]
|
|
62
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FairmintLogoMarkRounded.js","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/**
|
|
1
|
+
{"version":3,"file":"FairmintLogoMarkRounded.js","sources":["../../../src/components/FairmintLogo/FairmintLogoMarkRounded.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useId } from \"react\";\nimport { logoColors, logoFills } from \"../../theme/logo\";\n\n/** Product FT mark — rounded square tile from the brand icon asset. */\nexport const LOGO_MARK_ROUNDED_VIEWBOX = { width: 36, height: 36 } as const;\n\n/** Base tile field from the FT Mark Rounded Square source asset. */\nexport const LOGO_MARK_ROUNDED_TILE = logoColors.markRoundedTile;\n\n/**\n * Collapsed SideNav layout: 48×48 frame with a 36×36 mark centered inside\n * (white/transparent padding around the tile).\n */\nexport const SIDE_NAV_COLLAPSED_LOGO_FRAME = 48;\nexport const SIDE_NAV_COLLAPSED_LOGO_SIZE = 36;\n\nexport type FairmintLogoMarkRoundedVariant = \"tile\" | \"black\" | \"white\";\n\nexport interface FairmintLogoMarkRoundedProps {\n /** Square size of the mark in pixels. @default 32 */\n size?: number;\n /**\n * Outer frame size. When set larger than `size`, centers the mark in a\n * transparent square (e.g. frame 48 + size 36 for collapsed SideNav).\n */\n frameSize?: number;\n /**\n * `tile` — dark rounded square with white FT glyph (collapsed nav / app icon).\n * `black` — standalone FT ligature for light mode.\n * `white` — standalone FT ligature for dark mode.\n * @default \"tile\"\n */\n variant?: FairmintLogoMarkRoundedVariant;\n /**\n * Flat tile fill for `variant=\"tile\"`. Setting it replaces the brand field —\n * base color plus corner blooms — with a single solid color.\n */\n tileColor?: string;\n /** Glyph fill override. Defaults from `variant`. */\n glyphColor?: string;\n /**\n * Accessible name when the mark is standalone (collapsed nav, favicon).\n * Omit or pass `\"\"` when decorative inside a labeled lockup or link.\n */\n alt?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nfunction resolveGlyphColor(\n variant: FairmintLogoMarkRoundedVariant,\n glyphColor: string | undefined,\n): string {\n if (glyphColor) {\n return glyphColor;\n }\n return variant === \"black\" ? logoFills.black : logoFills.white;\n}\n\n/**\n * Fairmint FT mark — preferred collapsed SideNav / app-icon lockup.\n * Source geometry: FT Mark Rounded Square. `variant=\"tile\"` fills `size` with\n * the dark rounded square; `black` / `white` render the ligature alone for\n * light and dark surfaces. Optional `frameSize` adds transparent padding.\n */\nexport function FairmintLogoMarkRounded({\n size = 32,\n frameSize,\n variant = \"tile\",\n tileColor,\n glyphColor,\n alt,\n className,\n style,\n}: FairmintLogoMarkRoundedProps) {\n const gradientId = useId();\n const isDecorative = !alt;\n const resolvedFrame = frameSize && frameSize > size ? frameSize : undefined;\n const showTile = variant === \"tile\";\n // Corner blooms belong to the brand field — a caller-supplied fill replaces both.\n const showTileGlow = showTile && tileColor === undefined;\n const resolvedGlyph = resolveGlyphColor(variant, glyphColor);\n\n const mark = (\n <svg\n viewBox={`0 0 ${LOGO_MARK_ROUNDED_VIEWBOX.width} ${LOGO_MARK_ROUNDED_VIEWBOX.height}`}\n width={size}\n height={size}\n className={resolvedFrame ? undefined : className}\n style={{ display: \"block\", flexShrink: 0, ...(resolvedFrame ? undefined : style) }}\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden={isDecorative || undefined}\n role={isDecorative ? undefined : \"img\"}\n aria-label={isDecorative ? undefined : alt}\n >\n {!isDecorative && <title>{alt}</title>}\n {/* Tile fills the viewBox — padding belongs on `frameSize`, not inside the SVG. */}\n {showTile && (\n <rect width=\"36\" height=\"36\" rx=\"8\" fill={tileColor ?? LOGO_MARK_ROUNDED_TILE} />\n )}\n {showTileGlow && (\n <>\n <rect width=\"36\" height=\"36\" rx=\"8\" fill={`url(#${gradientId}-indigo)`} />\n <rect width=\"36\" height=\"36\" rx=\"8\" fill={`url(#${gradientId}-teal)`} />\n </>\n )}\n <g transform=\"translate(18 18.39) scale(1.35) translate(-18 -18.39)\">\n <path d=\"M12.4661 20.3562V26.446H15.1251V18.7954L12.4661 20.3562Z\" fill={resolvedGlyph} />\n <path\n d=\"M22.5714 22.7206V18.7932L19.9113 20.354V22.9428C19.9113 25.447 20.5768 26.7091 23.391 26.7091C24.0115 26.7091 24.9416 26.6194 25.4954 26.3556V24.1164C25.1627 24.3598 24.5198 24.4499 24.055 24.4499C22.8819 24.4499 22.5714 23.7836 22.5714 22.7206Z\"\n fill={resolvedGlyph}\n />\n <path\n d=\"M16.4329 9.42847C13.1307 9.42847 12.4656 11.3557 12.4656 14.3028V15.822H15.1254V13.8818C15.1254 12.7079 15.3456 11.6881 16.8315 11.6881C17.2086 11.6881 17.5629 11.7555 17.9388 11.8445L18.1148 9.5829C17.5625 9.47197 17.0071 9.42847 16.4329 9.42847Z\"\n fill={resolvedGlyph}\n />\n {/* Ascender runs under the crossbar — abutting edges leave a hairline seam. */}\n <path d=\"M22.5714 12.7273H19.9113V16H22.5714V12.7273Z\" fill={resolvedGlyph} />\n <path d=\"M25.7283 15.8218H10.2717V18.0841H25.7283V15.8218Z\" fill={resolvedGlyph} />\n </g>\n {showTileGlow && (\n <defs>\n {/* Wide-but-shallow ellipse: the indigo bloom runs the full top edge\n but fades out before the lower right corner. */}\n <radialGradient\n id={`${gradientId}-indigo`}\n cx=\"36\"\n cy=\"0\"\n r=\"36\"\n gradientTransform=\"matrix(1 0 0 0.6667 0 0)\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor={logoColors.markRoundedGlowIndigo} />\n <stop offset=\"0.5\" stopColor={logoColors.markRoundedGlowIndigo} stopOpacity=\"0.6\" />\n <stop offset=\"1\" stopColor={logoColors.markRoundedGlowIndigo} stopOpacity=\"0\" />\n </radialGradient>\n <radialGradient\n id={`${gradientId}-teal`}\n cx=\"0\"\n cy=\"36\"\n r=\"22.5\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor={logoColors.markRoundedGlowTeal} />\n <stop offset=\"1\" stopColor={logoColors.markRoundedGlowTeal} stopOpacity=\"0\" />\n </radialGradient>\n </defs>\n )}\n </svg>\n );\n\n if (!resolvedFrame) {\n return mark;\n }\n\n return (\n <span\n className={className}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: resolvedFrame,\n height: resolvedFrame,\n flexShrink: 0,\n ...style,\n }}\n >\n {mark}\n </span>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ function Eyebrow({
|
|
|
9
9
|
c = index.fairmintVars.colorTextSecondary,
|
|
10
10
|
...rest
|
|
11
11
|
}) {
|
|
12
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size, fw:
|
|
12
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size, fw: 600, tt: "uppercase", c, style: { letterSpacing: "0.08em" }, ...rest, children });
|
|
13
13
|
}
|
|
14
14
|
exports.Eyebrow = Eyebrow;
|
|
15
15
|
//# sourceMappingURL=Eyebrow.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Eyebrow.cjs","sources":["../../../../src/components/generic/Eyebrow/Eyebrow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { Text, type TextProps } from \"../../primitives/layout\";\n\nexport interface EyebrowProps extends Omit<TextProps, \"children\" | \"size\" | \"fw\" | \"tt\" | \"c\"> {\n /** Eyebrow text content. */\n children: ReactNode;\n /** Eyebrow size. Defaults to `xs`. */\n size?: \"xs\" | \"sm\";\n /**\n * Text color. Defaults to the semantic secondary text token. Override when the\n * eyebrow sits on a dark background or needs to match an accent.\n */\n c?: string;\n}\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"Eyebrow.cjs","sources":["../../../../src/components/generic/Eyebrow/Eyebrow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { Text, type TextProps } from \"../../primitives/layout\";\n\nexport interface EyebrowProps extends Omit<TextProps, \"children\" | \"size\" | \"fw\" | \"tt\" | \"c\"> {\n /** Eyebrow text content. */\n children: ReactNode;\n /** Eyebrow size. Defaults to `xs`. */\n size?: \"xs\" | \"sm\";\n /**\n * Text color. Defaults to the semantic secondary text token. Override when the\n * eyebrow sits on a dark background or needs to match an accent.\n */\n c?: string;\n}\n\n/**\n * Uppercase letter-spaced kicker. Marketing and event surfaces only —\n * not Founder or Investor page titles, wizard steps, or section headers.\n * See design/DESIGN.md Page copy.\n */\nexport function Eyebrow({\n children,\n size = \"xs\",\n c = fairmintVars.colorTextSecondary,\n ...rest\n}: EyebrowProps) {\n return (\n <Text size={size} fw={600} tt=\"uppercase\" c={c} style={{ letterSpacing: \"0.08em\" }} {...rest}>\n {children}\n </Text>\n );\n}\n"],"names":["fairmintVars","jsx","Text"],"mappings":";;;;;AAqBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,IAAIA,MAAAA,aAAa;AAAA,EACjB,GAAG;AACL,GAAiB;AACf,SACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAY,IAAI,KAAK,IAAG,aAAY,GAAM,OAAO,EAAE,eAAe,SAAA,GAAa,GAAG,MACrF,UACH;AAEJ;;"}
|
|
@@ -12,12 +12,9 @@ export interface EyebrowProps extends Omit<TextProps, "children" | "size" | "fw"
|
|
|
12
12
|
c?: string;
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* Standardizes the `Text size="xs" tt="uppercase" fw={700}
|
|
19
|
-
* c={fairmintVars.colorTextSecondary} style={{ letterSpacing: "0.08em" }}`
|
|
20
|
-
* incantation that was scattered across screens.
|
|
15
|
+
* Uppercase letter-spaced kicker. Marketing and event surfaces only —
|
|
16
|
+
* not Founder or Investor page titles, wizard steps, or section headers.
|
|
17
|
+
* See design/DESIGN.md Page copy.
|
|
21
18
|
*/
|
|
22
19
|
export declare function Eyebrow({ children, size, c, ...rest }: EyebrowProps): import("react").JSX.Element;
|
|
23
20
|
//# sourceMappingURL=Eyebrow.d.ts.map
|
|
@@ -1 +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
|
|
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;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAW,EACX,CAAmC,EACnC,GAAG,IAAI,EACR,EAAE,YAAY,+BAMd"}
|
|
@@ -7,7 +7,7 @@ function Eyebrow({
|
|
|
7
7
|
c = fairmintVars.colorTextSecondary,
|
|
8
8
|
...rest
|
|
9
9
|
}) {
|
|
10
|
-
return /* @__PURE__ */ jsx(Text, { size, fw:
|
|
10
|
+
return /* @__PURE__ */ jsx(Text, { size, fw: 600, tt: "uppercase", c, style: { letterSpacing: "0.08em" }, ...rest, children });
|
|
11
11
|
}
|
|
12
12
|
export {
|
|
13
13
|
Eyebrow
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Eyebrow.js","sources":["../../../../src/components/generic/Eyebrow/Eyebrow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { Text, type TextProps } from \"../../primitives/layout\";\n\nexport interface EyebrowProps extends Omit<TextProps, \"children\" | \"size\" | \"fw\" | \"tt\" | \"c\"> {\n /** Eyebrow text content. */\n children: ReactNode;\n /** Eyebrow size. Defaults to `xs`. */\n size?: \"xs\" | \"sm\";\n /**\n * Text color. Defaults to the semantic secondary text token. Override when the\n * eyebrow sits on a dark background or needs to match an accent.\n */\n c?: string;\n}\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"Eyebrow.js","sources":["../../../../src/components/generic/Eyebrow/Eyebrow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { Text, type TextProps } from \"../../primitives/layout\";\n\nexport interface EyebrowProps extends Omit<TextProps, \"children\" | \"size\" | \"fw\" | \"tt\" | \"c\"> {\n /** Eyebrow text content. */\n children: ReactNode;\n /** Eyebrow size. Defaults to `xs`. */\n size?: \"xs\" | \"sm\";\n /**\n * Text color. Defaults to the semantic secondary text token. Override when the\n * eyebrow sits on a dark background or needs to match an accent.\n */\n c?: string;\n}\n\n/**\n * Uppercase letter-spaced kicker. Marketing and event surfaces only —\n * not Founder or Investor page titles, wizard steps, or section headers.\n * See design/DESIGN.md Page copy.\n */\nexport function Eyebrow({\n children,\n size = \"xs\",\n c = fairmintVars.colorTextSecondary,\n ...rest\n}: EyebrowProps) {\n return (\n <Text size={size} fw={600} tt=\"uppercase\" c={c} style={{ letterSpacing: \"0.08em\" }} {...rest}>\n {children}\n </Text>\n );\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,IAAI,aAAa;AAAA,EACjB,GAAG;AACL,GAAiB;AACf,SACE,oBAAC,MAAA,EAAK,MAAY,IAAI,KAAK,IAAG,aAAY,GAAM,OAAO,EAAE,eAAe,SAAA,GAAa,GAAG,MACrF,UACH;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.cjs","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars, responsiveTypography } from \"../../../theme\";\nimport { Group, Stack, Text, Title } from \"../../primitives/layout\";\n\nexport interface PageHeaderProps {\n title: string;\n subtitle?: string;\n action?: ReactNode;\n}\n\nexport function PageHeader({ title, subtitle, action }: PageHeaderProps) {\n return (\n <Group justify=\"space-between\" align=\"flex-start\" mb=\"lg\">\n <Stack gap={4}>\n <Title order={2} fz={responsiveTypography.h2}>\n {title}\n </Title>\n {subtitle && (\n <Text c={fairmintVars.colorTextSecondary} size=\"sm\">\n {subtitle}\n </Text>\n )}\n </Stack>\n {action}\n </Group>\n );\n}\n"],"names":["Group","jsxs","Stack","jsx","Title","responsiveTypography","Text","fairmintVars"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"PageHeader.cjs","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars, responsiveTypography } from \"../../../theme\";\nimport { Group, Stack, Text, Title } from \"../../primitives/layout\";\n\nexport interface PageHeaderProps {\n title: string;\n /** Unique operational state only (date, count, status). Omit restatements of the title. */\n subtitle?: string;\n action?: ReactNode;\n}\n\nexport function PageHeader({ title, subtitle, action }: PageHeaderProps) {\n return (\n <Group justify=\"space-between\" align=\"flex-start\" mb=\"lg\">\n <Stack gap={4}>\n <Title order={2} fz={responsiveTypography.h2}>\n {title}\n </Title>\n {subtitle && (\n <Text c={fairmintVars.colorTextSecondary} size=\"sm\">\n {subtitle}\n </Text>\n )}\n </Stack>\n {action}\n </Group>\n );\n}\n"],"names":["Group","jsxs","Stack","jsx","Title","responsiveTypography","Text","fairmintVars"],"mappings":";;;;;;;;;AAWO,SAAS,WAAW,EAAE,OAAO,UAAU,UAA2B;AACvE,yCACGA,aAAA,EAAM,SAAQ,iBAAgB,OAAM,cAAa,IAAG,MACnD,UAAA;AAAA,IAAAC,2BAAAA,KAACC,OAAAA,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,MAAAC,+BAACC,MAAAA,SAAM,OAAO,GAAG,IAAIC,qBAAAA,qBAAqB,IACvC,UAAA,OACH;AAAA,MACC,2CACEC,WAAA,EAAK,GAAGC,MAAAA,aAAa,oBAAoB,MAAK,MAC5C,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,+BAgBtE"}
|
|
1
|
+
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,+BAgBtE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.js","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars, responsiveTypography } from \"../../../theme\";\nimport { Group, Stack, Text, Title } from \"../../primitives/layout\";\n\nexport interface PageHeaderProps {\n title: string;\n subtitle?: string;\n action?: ReactNode;\n}\n\nexport function PageHeader({ title, subtitle, action }: PageHeaderProps) {\n return (\n <Group justify=\"space-between\" align=\"flex-start\" mb=\"lg\">\n <Stack gap={4}>\n <Title order={2} fz={responsiveTypography.h2}>\n {title}\n </Title>\n {subtitle && (\n <Text c={fairmintVars.colorTextSecondary} size=\"sm\">\n {subtitle}\n </Text>\n )}\n </Stack>\n {action}\n </Group>\n );\n}\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"PageHeader.js","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars, responsiveTypography } from \"../../../theme\";\nimport { Group, Stack, Text, Title } from \"../../primitives/layout\";\n\nexport interface PageHeaderProps {\n title: string;\n /** Unique operational state only (date, count, status). Omit restatements of the title. */\n subtitle?: string;\n action?: ReactNode;\n}\n\nexport function PageHeader({ title, subtitle, action }: PageHeaderProps) {\n return (\n <Group justify=\"space-between\" align=\"flex-start\" mb=\"lg\">\n <Stack gap={4}>\n <Title order={2} fz={responsiveTypography.h2}>\n {title}\n </Title>\n {subtitle && (\n <Text c={fairmintVars.colorTextSecondary} size=\"sm\">\n {subtitle}\n </Text>\n )}\n </Stack>\n {action}\n </Group>\n );\n}\n"],"names":[],"mappings":";;;;;;;AAWO,SAAS,WAAW,EAAE,OAAO,UAAU,UAA2B;AACvE,8BACG,OAAA,EAAM,SAAQ,iBAAgB,OAAM,cAAa,IAAG,MACnD,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,MAAA,oBAAC,SAAM,OAAO,GAAG,IAAI,qBAAqB,IACvC,UAAA,OACH;AAAA,MACC,gCACE,MAAA,EAAK,GAAG,aAAa,oBAAoB,MAAK,MAC5C,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
|
package/dist/theme/logo.cjs
CHANGED
|
@@ -7,8 +7,12 @@ const logoFills = {
|
|
|
7
7
|
};
|
|
8
8
|
const logoColors = {
|
|
9
9
|
wordmark: "#202020",
|
|
10
|
-
/** FT Mark Rounded Square
|
|
11
|
-
markRoundedTile: "#
|
|
10
|
+
/** FT Mark Rounded Square base field — product collapsed-nav / app-icon lockup. */
|
|
11
|
+
markRoundedTile: "#0D1023",
|
|
12
|
+
/** Indigo bloom anchored at the tile's top-right corner. */
|
|
13
|
+
markRoundedGlowIndigo: "#212153",
|
|
14
|
+
/** Cool teal bloom anchored at the tile's bottom-left corner. */
|
|
15
|
+
markRoundedGlowTeal: "#162434",
|
|
12
16
|
gradientStops: [
|
|
13
17
|
{ offset: "0%", color: "#AC00FF" },
|
|
14
18
|
{ offset: "14.5833%", color: "#A200FF" },
|
package/dist/theme/logo.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo.cjs","sources":["../../src/theme/logo.ts"],"sourcesContent":["/** CDN-hosted black wordmark — legacy default for img-based `<FairmintLogo />` usage. */\nexport const DEFAULT_FAIRMINT_LOGO_SRC =\n \"https://imagedelivery.net/Lm6ChJXR4cIKKycsNMvGjA/0367be38-c9d8-4206-aaae-eba5ff830600/public\";\n\n/** Solid fills for logo mark and wordmark variants — matches `commonColors` in theme/index. */\nexport const logoFills = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/** Fairmint wordmark colors from design/Assets/Logos (canonical 215×48 geometry). */\nexport const logoColors = {\n wordmark: \"#202020\",\n /** FT Mark Rounded Square
|
|
1
|
+
{"version":3,"file":"logo.cjs","sources":["../../src/theme/logo.ts"],"sourcesContent":["/** CDN-hosted black wordmark — legacy default for img-based `<FairmintLogo />` usage. */\nexport const DEFAULT_FAIRMINT_LOGO_SRC =\n \"https://imagedelivery.net/Lm6ChJXR4cIKKycsNMvGjA/0367be38-c9d8-4206-aaae-eba5ff830600/public\";\n\n/** Solid fills for logo mark and wordmark variants — matches `commonColors` in theme/index. */\nexport const logoFills = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/** Fairmint wordmark colors from design/Assets/Logos (canonical 215×48 geometry). */\nexport const logoColors = {\n wordmark: \"#202020\",\n /** FT Mark Rounded Square base field — product collapsed-nav / app-icon lockup. */\n markRoundedTile: \"#0D1023\",\n /** Indigo bloom anchored at the tile's top-right corner. */\n markRoundedGlowIndigo: \"#212153\",\n /** Cool teal bloom anchored at the tile's bottom-left corner. */\n markRoundedGlowTeal: \"#162434\",\n gradientStops: [\n { offset: \"0%\", color: \"#AC00FF\" },\n { offset: \"14.5833%\", color: \"#A200FF\" },\n { offset: \"34.8958%\", color: \"#6F00FF\" },\n { offset: \"52.0733%\", color: \"#4C00FF\" },\n { offset: \"64.5833%\", color: \"#0044FF\" },\n { offset: \"80.2083%\", color: \"#1768FF\" },\n { offset: \"94.2708%\", color: \"#409CFF\" },\n ],\n} as const;\n\n/** Canonical wordmark viewBox — all variants share this frame for pixel-aligned sizing. */\nexport const LOGO_VIEWBOX = { width: 215, height: 48 } as const;\n\n/** Simplified logo mark viewBox — flat bars for small lockups and favicons. */\nexport const LOGO_MARK_VIEWBOX = { width: 48, height: 48 } as const;\n\n/**\n * Right-aligned ascending bars (bottom widest). Mirrors wordmark accent geometry\n * and the equity-stack metaphor without chart-fidelity curves.\n */\nexport const LOGO_MARK_BARS = [\n { x: 6, y: 38, width: 38, height: 6 },\n { x: 12, y: 28, width: 32, height: 6 },\n { x: 18, y: 18, width: 26, height: 6 },\n { x: 24, y: 8, width: 20, height: 6 },\n] as const;\n"],"names":[],"mappings":";;AACO,MAAM,4BACX;AAGK,MAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,OAAO;AACT;AAGO,MAAM,aAAa;AAAA,EACxB,UAAU;AAAA;AAAA,EAEV,iBAAiB;AAAA;AAAA,EAEjB,uBAAuB;AAAA;AAAA,EAEvB,qBAAqB;AAAA,EACrB,eAAe;AAAA,IACb,EAAE,QAAQ,MAAM,OAAO,UAAA;AAAA,IACvB,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,EAAU;AAE3C;AAGO,MAAM,eAAe,EAAE,OAAO,KAAK,QAAQ,GAAA;AAG3C,MAAM,oBAAoB,EAAE,OAAO,IAAI,QAAQ,GAAA;AAM/C,MAAM,iBAAiB;AAAA,EAC5B,EAAE,GAAG,GAAG,GAAG,IAAI,OAAO,IAAI,QAAQ,EAAA;AAAA,EAClC,EAAE,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,EAAA;AAAA,EACnC,EAAE,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,EAAA;AAAA,EACnC,EAAE,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI,QAAQ,EAAA;AACpC;;;;;;;"}
|
package/dist/theme/logo.d.ts
CHANGED
|
@@ -8,8 +8,12 @@ export declare const logoFills: {
|
|
|
8
8
|
/** Fairmint wordmark colors from design/Assets/Logos (canonical 215×48 geometry). */
|
|
9
9
|
export declare const logoColors: {
|
|
10
10
|
readonly wordmark: "#202020";
|
|
11
|
-
/** FT Mark Rounded Square
|
|
12
|
-
readonly markRoundedTile: "#
|
|
11
|
+
/** FT Mark Rounded Square base field — product collapsed-nav / app-icon lockup. */
|
|
12
|
+
readonly markRoundedTile: "#0D1023";
|
|
13
|
+
/** Indigo bloom anchored at the tile's top-right corner. */
|
|
14
|
+
readonly markRoundedGlowIndigo: "#212153";
|
|
15
|
+
/** Cool teal bloom anchored at the tile's bottom-left corner. */
|
|
16
|
+
readonly markRoundedGlowTeal: "#162434";
|
|
13
17
|
readonly gradientStops: readonly [{
|
|
14
18
|
readonly offset: "0%";
|
|
15
19
|
readonly color: "#AC00FF";
|
package/dist/theme/logo.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../src/theme/logo.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,eAAO,MAAM,yBAAyB,iGAC0D,CAAC;AAEjG,+FAA+F;AAC/F,eAAO,MAAM,SAAS;;;CAGZ,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,UAAU;;IAErB,
|
|
1
|
+
{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../src/theme/logo.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,eAAO,MAAM,yBAAyB,iGAC0D,CAAC;AAEjG,+FAA+F;AAC/F,eAAO,MAAM,SAAS;;;CAGZ,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,UAAU;;IAErB,mFAAmF;;IAEnF,4DAA4D;;IAE5D,iEAAiE;;;;;;;;;;;;;;;;;;;;;;;;CAWzD,CAAC;AAEX,2FAA2F;AAC3F,eAAO,MAAM,YAAY;;;CAAsC,CAAC;AAEhE,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB;;;CAAqC,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;EAKjB,CAAC"}
|
package/dist/theme/logo.js
CHANGED
|
@@ -5,8 +5,12 @@ const logoFills = {
|
|
|
5
5
|
};
|
|
6
6
|
const logoColors = {
|
|
7
7
|
wordmark: "#202020",
|
|
8
|
-
/** FT Mark Rounded Square
|
|
9
|
-
markRoundedTile: "#
|
|
8
|
+
/** FT Mark Rounded Square base field — product collapsed-nav / app-icon lockup. */
|
|
9
|
+
markRoundedTile: "#0D1023",
|
|
10
|
+
/** Indigo bloom anchored at the tile's top-right corner. */
|
|
11
|
+
markRoundedGlowIndigo: "#212153",
|
|
12
|
+
/** Cool teal bloom anchored at the tile's bottom-left corner. */
|
|
13
|
+
markRoundedGlowTeal: "#162434",
|
|
10
14
|
gradientStops: [
|
|
11
15
|
{ offset: "0%", color: "#AC00FF" },
|
|
12
16
|
{ offset: "14.5833%", color: "#A200FF" },
|
package/dist/theme/logo.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo.js","sources":["../../src/theme/logo.ts"],"sourcesContent":["/** CDN-hosted black wordmark — legacy default for img-based `<FairmintLogo />` usage. */\nexport const DEFAULT_FAIRMINT_LOGO_SRC =\n \"https://imagedelivery.net/Lm6ChJXR4cIKKycsNMvGjA/0367be38-c9d8-4206-aaae-eba5ff830600/public\";\n\n/** Solid fills for logo mark and wordmark variants — matches `commonColors` in theme/index. */\nexport const logoFills = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/** Fairmint wordmark colors from design/Assets/Logos (canonical 215×48 geometry). */\nexport const logoColors = {\n wordmark: \"#202020\",\n /** FT Mark Rounded Square
|
|
1
|
+
{"version":3,"file":"logo.js","sources":["../../src/theme/logo.ts"],"sourcesContent":["/** CDN-hosted black wordmark — legacy default for img-based `<FairmintLogo />` usage. */\nexport const DEFAULT_FAIRMINT_LOGO_SRC =\n \"https://imagedelivery.net/Lm6ChJXR4cIKKycsNMvGjA/0367be38-c9d8-4206-aaae-eba5ff830600/public\";\n\n/** Solid fills for logo mark and wordmark variants — matches `commonColors` in theme/index. */\nexport const logoFills = {\n black: \"#000000\",\n white: \"#ffffff\",\n} as const;\n\n/** Fairmint wordmark colors from design/Assets/Logos (canonical 215×48 geometry). */\nexport const logoColors = {\n wordmark: \"#202020\",\n /** FT Mark Rounded Square base field — product collapsed-nav / app-icon lockup. */\n markRoundedTile: \"#0D1023\",\n /** Indigo bloom anchored at the tile's top-right corner. */\n markRoundedGlowIndigo: \"#212153\",\n /** Cool teal bloom anchored at the tile's bottom-left corner. */\n markRoundedGlowTeal: \"#162434\",\n gradientStops: [\n { offset: \"0%\", color: \"#AC00FF\" },\n { offset: \"14.5833%\", color: \"#A200FF\" },\n { offset: \"34.8958%\", color: \"#6F00FF\" },\n { offset: \"52.0733%\", color: \"#4C00FF\" },\n { offset: \"64.5833%\", color: \"#0044FF\" },\n { offset: \"80.2083%\", color: \"#1768FF\" },\n { offset: \"94.2708%\", color: \"#409CFF\" },\n ],\n} as const;\n\n/** Canonical wordmark viewBox — all variants share this frame for pixel-aligned sizing. */\nexport const LOGO_VIEWBOX = { width: 215, height: 48 } as const;\n\n/** Simplified logo mark viewBox — flat bars for small lockups and favicons. */\nexport const LOGO_MARK_VIEWBOX = { width: 48, height: 48 } as const;\n\n/**\n * Right-aligned ascending bars (bottom widest). Mirrors wordmark accent geometry\n * and the equity-stack metaphor without chart-fidelity curves.\n */\nexport const LOGO_MARK_BARS = [\n { x: 6, y: 38, width: 38, height: 6 },\n { x: 12, y: 28, width: 32, height: 6 },\n { x: 18, y: 18, width: 26, height: 6 },\n { x: 24, y: 8, width: 20, height: 6 },\n] as const;\n"],"names":[],"mappings":"AACO,MAAM,4BACX;AAGK,MAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,OAAO;AACT;AAGO,MAAM,aAAa;AAAA,EACxB,UAAU;AAAA;AAAA,EAEV,iBAAiB;AAAA;AAAA,EAEjB,uBAAuB;AAAA;AAAA,EAEvB,qBAAqB;AAAA,EACrB,eAAe;AAAA,IACb,EAAE,QAAQ,MAAM,OAAO,UAAA;AAAA,IACvB,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,IAC7B,EAAE,QAAQ,YAAY,OAAO,UAAA;AAAA,EAAU;AAE3C;AAGO,MAAM,eAAe,EAAE,OAAO,KAAK,QAAQ,GAAA;AAG3C,MAAM,oBAAoB,EAAE,OAAO,IAAI,QAAQ,GAAA;AAM/C,MAAM,iBAAiB;AAAA,EAC5B,EAAE,GAAG,GAAG,GAAG,IAAI,OAAO,IAAI,QAAQ,EAAA;AAAA,EAClC,EAAE,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,EAAA;AAAA,EACnC,EAAE,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,EAAA;AAAA,EACnC,EAAE,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI,QAAQ,EAAA;AACpC;"}
|