@mission-studio/puck 1.0.19 → 1.0.20
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/chunk-A2J2E524.mjs +78 -0
- package/dist/{chunk-723Z3YKC.mjs → chunk-X6VGLL5Y.mjs} +203 -245
- package/dist/config/server.js +122 -137
- package/dist/config/server.mjs +52 -25
- package/dist/config-entry.js +61 -39
- package/dist/config-entry.mjs +5 -3
- package/dist/index.js +60 -38
- package/dist/index.mjs +5 -3
- package/dist/renderer.d.mts +13 -6
- package/dist/renderer.d.ts +13 -6
- package/dist/renderer.js +60 -38
- package/dist/renderer.mjs +5 -3
- package/package.json +1 -1
package/dist/config/server.mjs
CHANGED
|
@@ -8,7 +8,6 @@ import {
|
|
|
8
8
|
FeatureGrid,
|
|
9
9
|
FeaturesList,
|
|
10
10
|
Footer,
|
|
11
|
-
Heading,
|
|
12
11
|
Icon,
|
|
13
12
|
Image,
|
|
14
13
|
ImageCarousel,
|
|
@@ -18,14 +17,42 @@ import {
|
|
|
18
17
|
Spacer,
|
|
19
18
|
TextBlock,
|
|
20
19
|
Topbar,
|
|
21
|
-
VideoEmbed
|
|
22
|
-
|
|
20
|
+
VideoEmbed,
|
|
21
|
+
getHeadingStyle
|
|
22
|
+
} from "../chunk-X6VGLL5Y.mjs";
|
|
23
23
|
import "../chunk-PJXZC564.mjs";
|
|
24
|
-
import "../chunk-QSWQDR6M.mjs";
|
|
25
24
|
import "../chunk-C6V3YUPF.mjs";
|
|
25
|
+
import "../chunk-QSWQDR6M.mjs";
|
|
26
26
|
|
|
27
|
-
//
|
|
27
|
+
// components/page/astro/Heading.tsx
|
|
28
28
|
import { jsx } from "react/jsx-runtime";
|
|
29
|
+
function Heading({
|
|
30
|
+
text,
|
|
31
|
+
level = "h2",
|
|
32
|
+
size = "2xl",
|
|
33
|
+
weight = "bold",
|
|
34
|
+
color = "rgba(0, 0, 0, 1)",
|
|
35
|
+
align = "left",
|
|
36
|
+
letterSpacing = "normal",
|
|
37
|
+
lineHeight = "tight",
|
|
38
|
+
id
|
|
39
|
+
}) {
|
|
40
|
+
const resolvedText = text || "";
|
|
41
|
+
const Tag = level;
|
|
42
|
+
const style = getHeadingStyle({
|
|
43
|
+
size,
|
|
44
|
+
weight,
|
|
45
|
+
color,
|
|
46
|
+
align,
|
|
47
|
+
letterSpacing,
|
|
48
|
+
lineHeight
|
|
49
|
+
});
|
|
50
|
+
if (!resolvedText) return null;
|
|
51
|
+
return /* @__PURE__ */ jsx(Tag, { id, style, children: resolvedText });
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// config/server.tsx
|
|
55
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
29
56
|
var config = {
|
|
30
57
|
categories: {
|
|
31
58
|
typography: {
|
|
@@ -67,64 +94,64 @@ var config = {
|
|
|
67
94
|
},
|
|
68
95
|
components: {
|
|
69
96
|
Heading: {
|
|
70
|
-
render: (props) => /* @__PURE__ */
|
|
97
|
+
render: (props) => /* @__PURE__ */ jsx2(Heading, { ...props })
|
|
71
98
|
},
|
|
72
99
|
Paragraph: {
|
|
73
|
-
render: (props) => /* @__PURE__ */
|
|
100
|
+
render: (props) => /* @__PURE__ */ jsx2(Paragraph, { ...props })
|
|
74
101
|
},
|
|
75
102
|
Button: {
|
|
76
|
-
render: (props) => /* @__PURE__ */
|
|
103
|
+
render: (props) => /* @__PURE__ */ jsx2(Button, { ...props })
|
|
77
104
|
},
|
|
78
105
|
Image: {
|
|
79
|
-
render: (props) => /* @__PURE__ */
|
|
106
|
+
render: (props) => /* @__PURE__ */ jsx2(Image, { ...props })
|
|
80
107
|
},
|
|
81
108
|
ImageCarousel: {
|
|
82
|
-
render: (props) => /* @__PURE__ */
|
|
109
|
+
render: (props) => /* @__PURE__ */ jsx2(ImageCarousel, { ...props })
|
|
83
110
|
},
|
|
84
111
|
VideoEmbed: {
|
|
85
|
-
render: (props) => /* @__PURE__ */
|
|
112
|
+
render: (props) => /* @__PURE__ */ jsx2(VideoEmbed, { ...props })
|
|
86
113
|
},
|
|
87
114
|
Icon: {
|
|
88
|
-
render: (props) => /* @__PURE__ */
|
|
115
|
+
render: (props) => /* @__PURE__ */ jsx2(Icon, { ...props })
|
|
89
116
|
},
|
|
90
117
|
Section: {
|
|
91
|
-
render: (props) => /* @__PURE__ */
|
|
118
|
+
render: (props) => /* @__PURE__ */ jsx2(Section, { ...props })
|
|
92
119
|
},
|
|
93
120
|
Container: {
|
|
94
|
-
render: (props) => /* @__PURE__ */
|
|
121
|
+
render: (props) => /* @__PURE__ */ jsx2(Container, { ...props })
|
|
95
122
|
},
|
|
96
123
|
Columns: {
|
|
97
|
-
render: (props) => /* @__PURE__ */
|
|
124
|
+
render: (props) => /* @__PURE__ */ jsx2(Columns, { ...props })
|
|
98
125
|
},
|
|
99
126
|
Card: {
|
|
100
|
-
render: (props) => /* @__PURE__ */
|
|
127
|
+
render: (props) => /* @__PURE__ */ jsx2(Card, { ...props })
|
|
101
128
|
},
|
|
102
129
|
Divider: {
|
|
103
|
-
render: (props) => /* @__PURE__ */
|
|
130
|
+
render: (props) => /* @__PURE__ */ jsx2(Divider, { ...props })
|
|
104
131
|
},
|
|
105
132
|
Spacer: {
|
|
106
|
-
render: (props) => /* @__PURE__ */
|
|
133
|
+
render: (props) => /* @__PURE__ */ jsx2(Spacer, { ...props })
|
|
107
134
|
},
|
|
108
135
|
TextBlock: {
|
|
109
|
-
render: (props) => /* @__PURE__ */
|
|
136
|
+
render: (props) => /* @__PURE__ */ jsx2(TextBlock, { ...props })
|
|
110
137
|
},
|
|
111
138
|
CustomImage: {
|
|
112
|
-
render: (props) => /* @__PURE__ */
|
|
139
|
+
render: (props) => /* @__PURE__ */ jsx2(CustomImage, { ...props })
|
|
113
140
|
},
|
|
114
141
|
FeaturesList: {
|
|
115
|
-
render: (props) => /* @__PURE__ */
|
|
142
|
+
render: (props) => /* @__PURE__ */ jsx2(FeaturesList, { ...props })
|
|
116
143
|
},
|
|
117
144
|
FeatureGrid: {
|
|
118
|
-
render: (props) => /* @__PURE__ */
|
|
145
|
+
render: (props) => /* @__PURE__ */ jsx2(FeatureGrid, { ...props })
|
|
119
146
|
},
|
|
120
147
|
Footer: {
|
|
121
|
-
render: (props) => /* @__PURE__ */
|
|
148
|
+
render: (props) => /* @__PURE__ */ jsx2(Footer, { ...props })
|
|
122
149
|
},
|
|
123
150
|
Topbar: {
|
|
124
|
-
render: (props) => /* @__PURE__ */
|
|
151
|
+
render: (props) => /* @__PURE__ */ jsx2(Topbar, { ...props })
|
|
125
152
|
},
|
|
126
153
|
Popup: {
|
|
127
|
-
render: (props) => /* @__PURE__ */
|
|
154
|
+
render: (props) => /* @__PURE__ */ jsx2(Popup, { ...props })
|
|
128
155
|
}
|
|
129
156
|
}
|
|
130
157
|
};
|
package/dist/config-entry.js
CHANGED
|
@@ -154,9 +154,8 @@ function cn(...inputs) {
|
|
|
154
154
|
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
// components/page/Heading.
|
|
158
|
-
var
|
|
159
|
-
var sizeMap = {
|
|
157
|
+
// components/page/primitives/Heading.ts
|
|
158
|
+
var headingSizeMap = {
|
|
160
159
|
xs: "0.875rem",
|
|
161
160
|
sm: "1rem",
|
|
162
161
|
md: "1.25rem",
|
|
@@ -166,23 +165,37 @@ var sizeMap = {
|
|
|
166
165
|
"3xl": "3rem",
|
|
167
166
|
"4xl": "4rem"
|
|
168
167
|
};
|
|
169
|
-
var
|
|
168
|
+
var headingWeightMap = {
|
|
170
169
|
normal: 400,
|
|
171
170
|
medium: 500,
|
|
172
171
|
semibold: 600,
|
|
173
172
|
bold: 700,
|
|
174
173
|
extrabold: 800
|
|
175
174
|
};
|
|
176
|
-
var
|
|
175
|
+
var headingLetterSpacingMap = {
|
|
177
176
|
tight: "-0.025em",
|
|
178
177
|
normal: "0",
|
|
179
178
|
wide: "0.05em"
|
|
180
179
|
};
|
|
181
|
-
var
|
|
180
|
+
var headingLineHeightMap = {
|
|
182
181
|
tight: "1.1",
|
|
183
182
|
normal: "1.4",
|
|
184
183
|
relaxed: "1.6"
|
|
185
184
|
};
|
|
185
|
+
function getHeadingStyle(props) {
|
|
186
|
+
return {
|
|
187
|
+
fontSize: headingSizeMap[props.size],
|
|
188
|
+
fontWeight: headingWeightMap[props.weight],
|
|
189
|
+
color: props.color,
|
|
190
|
+
textAlign: props.align,
|
|
191
|
+
letterSpacing: headingLetterSpacingMap[props.letterSpacing],
|
|
192
|
+
lineHeight: headingLineHeightMap[props.lineHeight],
|
|
193
|
+
margin: 0
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// components/page/next/Heading.tsx
|
|
198
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
186
199
|
function isThemeableValue(value) {
|
|
187
200
|
return typeof value === "object" && value !== null && "useTheme" in value;
|
|
188
201
|
}
|
|
@@ -214,42 +227,51 @@ function Heading({
|
|
|
214
227
|
return "";
|
|
215
228
|
})();
|
|
216
229
|
const resolvedColor = (() => {
|
|
217
|
-
if (!color)
|
|
218
|
-
|
|
230
|
+
if (!color)
|
|
231
|
+
return hexToRgba(
|
|
232
|
+
resolveColor2("foreground").color,
|
|
233
|
+
resolveColor2("foreground").opacity
|
|
234
|
+
);
|
|
235
|
+
if (typeof color === "string") return color;
|
|
219
236
|
if (isThemeableValue(color)) {
|
|
220
|
-
return color.useTheme ?
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
237
|
+
return color.useTheme ? hexToRgba(
|
|
238
|
+
resolveColor2(color.themeKey).color,
|
|
239
|
+
resolveColor2(color.themeKey).opacity
|
|
240
|
+
) : hexToRgba(color.value.color, color.value.opacity);
|
|
241
|
+
}
|
|
242
|
+
if ("color" in color) return hexToRgba(color.color, color.opacity);
|
|
243
|
+
return hexToRgba(
|
|
244
|
+
resolveColor2("foreground").color,
|
|
245
|
+
resolveColor2("foreground").opacity
|
|
246
|
+
);
|
|
224
247
|
})();
|
|
225
248
|
const Tag = level;
|
|
226
|
-
const style = {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
color:
|
|
230
|
-
|
|
231
|
-
letterSpacing
|
|
232
|
-
lineHeight
|
|
233
|
-
|
|
234
|
-
};
|
|
249
|
+
const style = getHeadingStyle({
|
|
250
|
+
size: size4,
|
|
251
|
+
weight,
|
|
252
|
+
color: resolvedColor,
|
|
253
|
+
align,
|
|
254
|
+
letterSpacing,
|
|
255
|
+
lineHeight
|
|
256
|
+
});
|
|
235
257
|
if (!resolvedText) return null;
|
|
236
258
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tag, { id, style, children: resolvedText });
|
|
237
259
|
}
|
|
238
260
|
|
|
239
261
|
// components/page/Paragraph.tsx
|
|
240
262
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
241
|
-
var
|
|
263
|
+
var sizeMap = {
|
|
242
264
|
sm: "0.875rem",
|
|
243
265
|
base: "1rem",
|
|
244
266
|
lg: "1.125rem",
|
|
245
267
|
xl: "1.25rem"
|
|
246
268
|
};
|
|
247
|
-
var
|
|
269
|
+
var weightMap = {
|
|
248
270
|
normal: 400,
|
|
249
271
|
medium: 500,
|
|
250
272
|
semibold: 600
|
|
251
273
|
};
|
|
252
|
-
var
|
|
274
|
+
var lineHeightMap = {
|
|
253
275
|
tight: "1.4",
|
|
254
276
|
normal: "1.6",
|
|
255
277
|
relaxed: "1.75",
|
|
@@ -294,11 +316,11 @@ function Paragraph({
|
|
|
294
316
|
return resolveColor2("foreground");
|
|
295
317
|
})();
|
|
296
318
|
const style = {
|
|
297
|
-
fontSize:
|
|
298
|
-
fontWeight:
|
|
319
|
+
fontSize: sizeMap[size4],
|
|
320
|
+
fontWeight: weightMap[weight],
|
|
299
321
|
color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
|
|
300
322
|
textAlign: align,
|
|
301
|
-
lineHeight:
|
|
323
|
+
lineHeight: lineHeightMap[lineHeight],
|
|
302
324
|
maxWidth: maxWidth || void 0,
|
|
303
325
|
margin: 0
|
|
304
326
|
};
|
|
@@ -962,7 +984,7 @@ function VideoEmbed({
|
|
|
962
984
|
|
|
963
985
|
// components/page/Icon.tsx
|
|
964
986
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
965
|
-
var
|
|
987
|
+
var sizeMap2 = {
|
|
966
988
|
sm: { size: "16px", strokeWidth: 2 },
|
|
967
989
|
md: { size: "24px", strokeWidth: 2 },
|
|
968
990
|
lg: { size: "32px", strokeWidth: 1.5 },
|
|
@@ -1180,7 +1202,7 @@ function Icon({
|
|
|
1180
1202
|
return resolveColor2("primary");
|
|
1181
1203
|
})();
|
|
1182
1204
|
const IconComponent = icons[name.toLowerCase()] || icons.check;
|
|
1183
|
-
const { size: iconSize, strokeWidth } =
|
|
1205
|
+
const { size: iconSize, strokeWidth } = sizeMap2[size4];
|
|
1184
1206
|
const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
|
|
1185
1207
|
const wrapperStyle = {
|
|
1186
1208
|
display: "flex",
|
|
@@ -1524,7 +1546,7 @@ function Divider({
|
|
|
1524
1546
|
|
|
1525
1547
|
// components/page/Spacer.tsx
|
|
1526
1548
|
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1527
|
-
var
|
|
1549
|
+
var sizeMap3 = {
|
|
1528
1550
|
xs: "8px",
|
|
1529
1551
|
sm: "16px",
|
|
1530
1552
|
md: "24px",
|
|
@@ -1535,7 +1557,7 @@ var sizeMap4 = {
|
|
|
1535
1557
|
};
|
|
1536
1558
|
function Spacer({ size: size4 = "md", id }) {
|
|
1537
1559
|
const style = {
|
|
1538
|
-
height:
|
|
1560
|
+
height: sizeMap3[size4],
|
|
1539
1561
|
width: "100%"
|
|
1540
1562
|
};
|
|
1541
1563
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
|
|
@@ -1548,7 +1570,7 @@ var alignmentMap = {
|
|
|
1548
1570
|
center: "text-center",
|
|
1549
1571
|
right: "text-right"
|
|
1550
1572
|
};
|
|
1551
|
-
var
|
|
1573
|
+
var sizeMap4 = {
|
|
1552
1574
|
small: "text-2xl",
|
|
1553
1575
|
"medium-small": "text-3xl",
|
|
1554
1576
|
medium: "text-4xl",
|
|
@@ -1637,7 +1659,7 @@ function TextBlock({
|
|
|
1637
1659
|
resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1638
1660
|
"h2",
|
|
1639
1661
|
{
|
|
1640
|
-
className: cn("font-bold",
|
|
1662
|
+
className: cn("font-bold", sizeMap4[textSize]),
|
|
1641
1663
|
style: gradientStyle,
|
|
1642
1664
|
children: resolvedTitle
|
|
1643
1665
|
}
|
|
@@ -1691,7 +1713,7 @@ function CustomImage({
|
|
|
1691
1713
|
// components/page/FeaturesList.tsx
|
|
1692
1714
|
var import_lucide_react = require("lucide-react");
|
|
1693
1715
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1694
|
-
var
|
|
1716
|
+
var sizeMap5 = {
|
|
1695
1717
|
small: { icon: 24, title: "text-base", desc: "text-sm" },
|
|
1696
1718
|
medium: { icon: 32, title: "text-lg", desc: "text-base" },
|
|
1697
1719
|
large: { icon: 48, title: "text-xl", desc: "text-lg" }
|
|
@@ -1703,7 +1725,7 @@ function FeaturesList({
|
|
|
1703
1725
|
iconColor = "#000000",
|
|
1704
1726
|
anchorLink
|
|
1705
1727
|
}) {
|
|
1706
|
-
const sizeConfig =
|
|
1728
|
+
const sizeConfig = sizeMap5[size4];
|
|
1707
1729
|
const getIcon = (iconName) => {
|
|
1708
1730
|
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
|
|
1709
1731
|
return import_lucide_react.icons[formatted] || null;
|
|
@@ -1760,7 +1782,7 @@ function FeaturesList({
|
|
|
1760
1782
|
// components/page/FeatureGrid.tsx
|
|
1761
1783
|
var import_lucide_react2 = require("lucide-react");
|
|
1762
1784
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1763
|
-
var
|
|
1785
|
+
var sizeMap6 = {
|
|
1764
1786
|
small: { icon: 24, title: "text-base", desc: "text-sm" },
|
|
1765
1787
|
medium: { icon: 32, title: "text-lg", desc: "text-base" },
|
|
1766
1788
|
large: { icon: 48, title: "text-xl", desc: "text-lg" }
|
|
@@ -1776,7 +1798,7 @@ function FeatureGrid({
|
|
|
1776
1798
|
textColor = "#000000",
|
|
1777
1799
|
anchorLink
|
|
1778
1800
|
}) {
|
|
1779
|
-
const sizeConfig =
|
|
1801
|
+
const sizeConfig = sizeMap6[size4];
|
|
1780
1802
|
const getIcon = (iconName) => {
|
|
1781
1803
|
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
|
|
1782
1804
|
return import_lucide_react2.icons[formatted] || null;
|
|
@@ -2043,7 +2065,7 @@ var widthMap3 = {
|
|
|
2043
2065
|
medium: "max-w-lg",
|
|
2044
2066
|
large: "max-w-2xl"
|
|
2045
2067
|
};
|
|
2046
|
-
var
|
|
2068
|
+
var sizeMap7 = {
|
|
2047
2069
|
small: "px-3 py-1.5 text-sm",
|
|
2048
2070
|
medium: "px-4 py-2 text-base",
|
|
2049
2071
|
large: "px-6 py-3 text-lg"
|
|
@@ -2088,7 +2110,7 @@ function Popup({
|
|
|
2088
2110
|
onClick: handleOpen,
|
|
2089
2111
|
className: cn(
|
|
2090
2112
|
"flex items-center gap-2 rounded-full font-medium",
|
|
2091
|
-
|
|
2113
|
+
sizeMap7[size4]
|
|
2092
2114
|
),
|
|
2093
2115
|
style: { backgroundColor: buttonColor, color: textColor },
|
|
2094
2116
|
children: [
|
package/dist/config-entry.mjs
CHANGED
|
@@ -8,6 +8,9 @@ import {
|
|
|
8
8
|
createThemeableColorField
|
|
9
9
|
} from "./chunk-VF4NOAJG.mjs";
|
|
10
10
|
import "./chunk-A3QDUUOF.mjs";
|
|
11
|
+
import {
|
|
12
|
+
Heading
|
|
13
|
+
} from "./chunk-A2J2E524.mjs";
|
|
11
14
|
import {
|
|
12
15
|
Button,
|
|
13
16
|
Card,
|
|
@@ -18,7 +21,6 @@ import {
|
|
|
18
21
|
FeatureGrid,
|
|
19
22
|
FeaturesList,
|
|
20
23
|
Footer,
|
|
21
|
-
Heading,
|
|
22
24
|
Icon,
|
|
23
25
|
Image,
|
|
24
26
|
ImageCarousel,
|
|
@@ -30,10 +32,10 @@ import {
|
|
|
30
32
|
Topbar,
|
|
31
33
|
VideoEmbed,
|
|
32
34
|
availableIcons
|
|
33
|
-
} from "./chunk-
|
|
35
|
+
} from "./chunk-X6VGLL5Y.mjs";
|
|
34
36
|
import "./chunk-PJXZC564.mjs";
|
|
35
|
-
import "./chunk-QSWQDR6M.mjs";
|
|
36
37
|
import "./chunk-C6V3YUPF.mjs";
|
|
38
|
+
import "./chunk-QSWQDR6M.mjs";
|
|
37
39
|
|
|
38
40
|
// config.tsx
|
|
39
41
|
import { jsx } from "react/jsx-runtime";
|
package/dist/index.js
CHANGED
|
@@ -184,9 +184,8 @@ function cn(...inputs) {
|
|
|
184
184
|
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
// components/page/Heading.
|
|
188
|
-
var
|
|
189
|
-
var sizeMap = {
|
|
187
|
+
// components/page/primitives/Heading.ts
|
|
188
|
+
var headingSizeMap = {
|
|
190
189
|
xs: "0.875rem",
|
|
191
190
|
sm: "1rem",
|
|
192
191
|
md: "1.25rem",
|
|
@@ -196,23 +195,37 @@ var sizeMap = {
|
|
|
196
195
|
"3xl": "3rem",
|
|
197
196
|
"4xl": "4rem"
|
|
198
197
|
};
|
|
199
|
-
var
|
|
198
|
+
var headingWeightMap = {
|
|
200
199
|
normal: 400,
|
|
201
200
|
medium: 500,
|
|
202
201
|
semibold: 600,
|
|
203
202
|
bold: 700,
|
|
204
203
|
extrabold: 800
|
|
205
204
|
};
|
|
206
|
-
var
|
|
205
|
+
var headingLetterSpacingMap = {
|
|
207
206
|
tight: "-0.025em",
|
|
208
207
|
normal: "0",
|
|
209
208
|
wide: "0.05em"
|
|
210
209
|
};
|
|
211
|
-
var
|
|
210
|
+
var headingLineHeightMap = {
|
|
212
211
|
tight: "1.1",
|
|
213
212
|
normal: "1.4",
|
|
214
213
|
relaxed: "1.6"
|
|
215
214
|
};
|
|
215
|
+
function getHeadingStyle(props) {
|
|
216
|
+
return {
|
|
217
|
+
fontSize: headingSizeMap[props.size],
|
|
218
|
+
fontWeight: headingWeightMap[props.weight],
|
|
219
|
+
color: props.color,
|
|
220
|
+
textAlign: props.align,
|
|
221
|
+
letterSpacing: headingLetterSpacingMap[props.letterSpacing],
|
|
222
|
+
lineHeight: headingLineHeightMap[props.lineHeight],
|
|
223
|
+
margin: 0
|
|
224
|
+
};
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// components/page/next/Heading.tsx
|
|
228
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
216
229
|
function isThemeableValue(value) {
|
|
217
230
|
return typeof value === "object" && value !== null && "useTheme" in value;
|
|
218
231
|
}
|
|
@@ -244,42 +257,51 @@ function Heading({
|
|
|
244
257
|
return "";
|
|
245
258
|
})();
|
|
246
259
|
const resolvedColor = (() => {
|
|
247
|
-
if (!color)
|
|
248
|
-
|
|
260
|
+
if (!color)
|
|
261
|
+
return hexToRgba(
|
|
262
|
+
resolveColor2("foreground").color,
|
|
263
|
+
resolveColor2("foreground").opacity
|
|
264
|
+
);
|
|
265
|
+
if (typeof color === "string") return color;
|
|
249
266
|
if (isThemeableValue(color)) {
|
|
250
|
-
return color.useTheme ?
|
|
267
|
+
return color.useTheme ? hexToRgba(
|
|
268
|
+
resolveColor2(color.themeKey).color,
|
|
269
|
+
resolveColor2(color.themeKey).opacity
|
|
270
|
+
) : hexToRgba(color.value.color, color.value.opacity);
|
|
251
271
|
}
|
|
252
|
-
if ("color" in color) return color;
|
|
253
|
-
return
|
|
272
|
+
if ("color" in color) return hexToRgba(color.color, color.opacity);
|
|
273
|
+
return hexToRgba(
|
|
274
|
+
resolveColor2("foreground").color,
|
|
275
|
+
resolveColor2("foreground").opacity
|
|
276
|
+
);
|
|
254
277
|
})();
|
|
255
278
|
const Tag = level;
|
|
256
|
-
const style = {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
color:
|
|
260
|
-
|
|
261
|
-
letterSpacing
|
|
262
|
-
lineHeight
|
|
263
|
-
|
|
264
|
-
};
|
|
279
|
+
const style = getHeadingStyle({
|
|
280
|
+
size,
|
|
281
|
+
weight,
|
|
282
|
+
color: resolvedColor,
|
|
283
|
+
align,
|
|
284
|
+
letterSpacing,
|
|
285
|
+
lineHeight
|
|
286
|
+
});
|
|
265
287
|
if (!resolvedText) return null;
|
|
266
288
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tag, { id, style, children: resolvedText });
|
|
267
289
|
}
|
|
268
290
|
|
|
269
291
|
// components/page/Paragraph.tsx
|
|
270
292
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
271
|
-
var
|
|
293
|
+
var sizeMap = {
|
|
272
294
|
sm: "0.875rem",
|
|
273
295
|
base: "1rem",
|
|
274
296
|
lg: "1.125rem",
|
|
275
297
|
xl: "1.25rem"
|
|
276
298
|
};
|
|
277
|
-
var
|
|
299
|
+
var weightMap = {
|
|
278
300
|
normal: 400,
|
|
279
301
|
medium: 500,
|
|
280
302
|
semibold: 600
|
|
281
303
|
};
|
|
282
|
-
var
|
|
304
|
+
var lineHeightMap = {
|
|
283
305
|
tight: "1.4",
|
|
284
306
|
normal: "1.6",
|
|
285
307
|
relaxed: "1.75",
|
|
@@ -324,11 +346,11 @@ function Paragraph({
|
|
|
324
346
|
return resolveColor2("foreground");
|
|
325
347
|
})();
|
|
326
348
|
const style = {
|
|
327
|
-
fontSize:
|
|
328
|
-
fontWeight:
|
|
349
|
+
fontSize: sizeMap[size],
|
|
350
|
+
fontWeight: weightMap[weight],
|
|
329
351
|
color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
|
|
330
352
|
textAlign: align,
|
|
331
|
-
lineHeight:
|
|
353
|
+
lineHeight: lineHeightMap[lineHeight],
|
|
332
354
|
maxWidth: maxWidth || void 0,
|
|
333
355
|
margin: 0
|
|
334
356
|
};
|
|
@@ -992,7 +1014,7 @@ function VideoEmbed({
|
|
|
992
1014
|
|
|
993
1015
|
// components/page/Icon.tsx
|
|
994
1016
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
995
|
-
var
|
|
1017
|
+
var sizeMap2 = {
|
|
996
1018
|
sm: { size: "16px", strokeWidth: 2 },
|
|
997
1019
|
md: { size: "24px", strokeWidth: 2 },
|
|
998
1020
|
lg: { size: "32px", strokeWidth: 1.5 },
|
|
@@ -1210,7 +1232,7 @@ function Icon({
|
|
|
1210
1232
|
return resolveColor2("primary");
|
|
1211
1233
|
})();
|
|
1212
1234
|
const IconComponent = icons[name.toLowerCase()] || icons.check;
|
|
1213
|
-
const { size: iconSize, strokeWidth } =
|
|
1235
|
+
const { size: iconSize, strokeWidth } = sizeMap2[size];
|
|
1214
1236
|
const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
|
|
1215
1237
|
const wrapperStyle = {
|
|
1216
1238
|
display: "flex",
|
|
@@ -1554,7 +1576,7 @@ function Divider({
|
|
|
1554
1576
|
|
|
1555
1577
|
// components/page/Spacer.tsx
|
|
1556
1578
|
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1557
|
-
var
|
|
1579
|
+
var sizeMap3 = {
|
|
1558
1580
|
xs: "8px",
|
|
1559
1581
|
sm: "16px",
|
|
1560
1582
|
md: "24px",
|
|
@@ -1565,7 +1587,7 @@ var sizeMap4 = {
|
|
|
1565
1587
|
};
|
|
1566
1588
|
function Spacer({ size = "md", id }) {
|
|
1567
1589
|
const style = {
|
|
1568
|
-
height:
|
|
1590
|
+
height: sizeMap3[size],
|
|
1569
1591
|
width: "100%"
|
|
1570
1592
|
};
|
|
1571
1593
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
|
|
@@ -1578,7 +1600,7 @@ var alignmentMap = {
|
|
|
1578
1600
|
center: "text-center",
|
|
1579
1601
|
right: "text-right"
|
|
1580
1602
|
};
|
|
1581
|
-
var
|
|
1603
|
+
var sizeMap4 = {
|
|
1582
1604
|
small: "text-2xl",
|
|
1583
1605
|
"medium-small": "text-3xl",
|
|
1584
1606
|
medium: "text-4xl",
|
|
@@ -1667,7 +1689,7 @@ function TextBlock({
|
|
|
1667
1689
|
resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1668
1690
|
"h2",
|
|
1669
1691
|
{
|
|
1670
|
-
className: cn("font-bold",
|
|
1692
|
+
className: cn("font-bold", sizeMap4[textSize]),
|
|
1671
1693
|
style: gradientStyle,
|
|
1672
1694
|
children: resolvedTitle
|
|
1673
1695
|
}
|
|
@@ -1721,7 +1743,7 @@ function CustomImage({
|
|
|
1721
1743
|
// components/page/FeaturesList.tsx
|
|
1722
1744
|
var import_lucide_react = require("lucide-react");
|
|
1723
1745
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1724
|
-
var
|
|
1746
|
+
var sizeMap5 = {
|
|
1725
1747
|
small: { icon: 24, title: "text-base", desc: "text-sm" },
|
|
1726
1748
|
medium: { icon: 32, title: "text-lg", desc: "text-base" },
|
|
1727
1749
|
large: { icon: 48, title: "text-xl", desc: "text-lg" }
|
|
@@ -1733,7 +1755,7 @@ function FeaturesList({
|
|
|
1733
1755
|
iconColor = "#000000",
|
|
1734
1756
|
anchorLink
|
|
1735
1757
|
}) {
|
|
1736
|
-
const sizeConfig =
|
|
1758
|
+
const sizeConfig = sizeMap5[size];
|
|
1737
1759
|
const getIcon = (iconName) => {
|
|
1738
1760
|
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
|
|
1739
1761
|
return import_lucide_react.icons[formatted] || null;
|
|
@@ -1790,7 +1812,7 @@ function FeaturesList({
|
|
|
1790
1812
|
// components/page/FeatureGrid.tsx
|
|
1791
1813
|
var import_lucide_react2 = require("lucide-react");
|
|
1792
1814
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1793
|
-
var
|
|
1815
|
+
var sizeMap6 = {
|
|
1794
1816
|
small: { icon: 24, title: "text-base", desc: "text-sm" },
|
|
1795
1817
|
medium: { icon: 32, title: "text-lg", desc: "text-base" },
|
|
1796
1818
|
large: { icon: 48, title: "text-xl", desc: "text-lg" }
|
|
@@ -1806,7 +1828,7 @@ function FeatureGrid({
|
|
|
1806
1828
|
textColor = "#000000",
|
|
1807
1829
|
anchorLink
|
|
1808
1830
|
}) {
|
|
1809
|
-
const sizeConfig =
|
|
1831
|
+
const sizeConfig = sizeMap6[size];
|
|
1810
1832
|
const getIcon = (iconName) => {
|
|
1811
1833
|
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
|
|
1812
1834
|
return import_lucide_react2.icons[formatted] || null;
|
|
@@ -2073,7 +2095,7 @@ var widthMap3 = {
|
|
|
2073
2095
|
medium: "max-w-lg",
|
|
2074
2096
|
large: "max-w-2xl"
|
|
2075
2097
|
};
|
|
2076
|
-
var
|
|
2098
|
+
var sizeMap7 = {
|
|
2077
2099
|
small: "px-3 py-1.5 text-sm",
|
|
2078
2100
|
medium: "px-4 py-2 text-base",
|
|
2079
2101
|
large: "px-6 py-3 text-lg"
|
|
@@ -2118,7 +2140,7 @@ function Popup({
|
|
|
2118
2140
|
onClick: handleOpen,
|
|
2119
2141
|
className: cn(
|
|
2120
2142
|
"flex items-center gap-2 rounded-full font-medium",
|
|
2121
|
-
|
|
2143
|
+
sizeMap7[size]
|
|
2122
2144
|
),
|
|
2123
2145
|
style: { backgroundColor: buttonColor, color: textColor },
|
|
2124
2146
|
children: [
|
package/dist/index.mjs
CHANGED
|
@@ -13,6 +13,9 @@ import {
|
|
|
13
13
|
getFontSizeCSS,
|
|
14
14
|
spacingScale
|
|
15
15
|
} from "./chunk-A3QDUUOF.mjs";
|
|
16
|
+
import {
|
|
17
|
+
Heading
|
|
18
|
+
} from "./chunk-A2J2E524.mjs";
|
|
16
19
|
import {
|
|
17
20
|
Button,
|
|
18
21
|
Card,
|
|
@@ -23,7 +26,6 @@ import {
|
|
|
23
26
|
FeatureGrid,
|
|
24
27
|
FeaturesList,
|
|
25
28
|
Footer,
|
|
26
|
-
Heading,
|
|
27
29
|
Icon,
|
|
28
30
|
Image,
|
|
29
31
|
ImageCarousel,
|
|
@@ -35,17 +37,17 @@ import {
|
|
|
35
37
|
Topbar,
|
|
36
38
|
VideoEmbed,
|
|
37
39
|
availableIcons
|
|
38
|
-
} from "./chunk-
|
|
40
|
+
} from "./chunk-X6VGLL5Y.mjs";
|
|
39
41
|
import {
|
|
40
42
|
ThemeProvider,
|
|
41
43
|
getShadowCSS,
|
|
42
44
|
shadowPresets,
|
|
43
45
|
useTheme
|
|
44
46
|
} from "./chunk-PJXZC564.mjs";
|
|
45
|
-
import "./chunk-QSWQDR6M.mjs";
|
|
46
47
|
import {
|
|
47
48
|
DEFAULT_THEME
|
|
48
49
|
} from "./chunk-C6V3YUPF.mjs";
|
|
50
|
+
import "./chunk-QSWQDR6M.mjs";
|
|
49
51
|
export {
|
|
50
52
|
Button,
|
|
51
53
|
Card,
|