@ugurdemirel/landcraft 0.1.22 → 0.1.24
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/README.md +13 -8
- package/dist/cjs/components/Button.cjs +1 -1
- package/dist/cjs/components/Button.cjs.map +1 -1
- package/dist/cjs/components/CTA/CTA.cjs +1 -1
- package/dist/cjs/components/CTA/CTA.cjs.map +1 -1
- package/dist/cjs/components/CTA/parts.cjs +1 -1
- package/dist/cjs/components/CTA/parts.cjs.map +1 -1
- package/dist/cjs/components/CTA/variants/Panel.cjs +1 -1
- package/dist/cjs/components/CTA/variants/Panel.cjs.map +1 -1
- package/dist/cjs/components/CTA/variants/Surface.cjs +1 -1
- package/dist/cjs/components/CTA/variants/Surface.cjs.map +1 -1
- package/dist/cjs/components/Footer/Footer.cjs +1 -1
- package/dist/cjs/components/Footer/Footer.cjs.map +1 -1
- package/dist/cjs/components/Footer/parts.cjs +1 -1
- package/dist/cjs/components/Footer/parts.cjs.map +1 -1
- package/dist/cjs/components/Footer/variants/Columns.cjs +2 -0
- package/dist/cjs/components/Footer/variants/Columns.cjs.map +1 -0
- package/dist/cjs/components/Footer/variants/Editorial.cjs +1 -1
- package/dist/cjs/components/Footer/variants/Editorial.cjs.map +1 -1
- package/dist/cjs/components/Footer/variants/Minimal.cjs +1 -1
- package/dist/cjs/components/Footer/variants/Minimal.cjs.map +1 -1
- package/dist/cjs/components/Hero/parts.cjs +1 -1
- package/dist/cjs/components/Hero/parts.cjs.map +1 -1
- package/dist/cjs/components/Hero/variants/Centered.cjs +1 -1
- package/dist/cjs/components/Hero/variants/Centered.cjs.map +1 -1
- package/dist/cjs/components/Hero/variants/Parallax.cjs +1 -1
- package/dist/cjs/components/Hero/variants/Parallax.cjs.map +1 -1
- package/dist/cjs/components/Hero/variants/Split.cjs +1 -1
- package/dist/cjs/components/Hero/variants/Split.cjs.map +1 -1
- package/dist/cjs/components/Hero/variants/Statement.cjs +1 -1
- package/dist/cjs/components/Hero/variants/Statement.cjs.map +1 -1
- package/dist/cjs/components/LanguageSwitcher/parts.cjs +1 -1
- package/dist/cjs/components/LanguageSwitcher/parts.cjs.map +1 -1
- package/dist/cjs/components/MegaMenu/MegaMenu.cjs +1 -1
- package/dist/cjs/components/MegaMenu/MegaMenu.cjs.map +1 -1
- package/dist/cjs/components/Navbar/Navbar.cjs +1 -1
- package/dist/cjs/components/Navbar/Navbar.cjs.map +1 -1
- package/dist/cjs/components/Stats/Stats.cjs +1 -1
- package/dist/cjs/components/Stats/Stats.cjs.map +1 -1
- package/dist/cjs/components/Stats/parts.cjs +1 -1
- package/dist/cjs/components/Stats/parts.cjs.map +1 -1
- package/dist/cjs/components/Stats/variants/Cells.cjs +1 -1
- package/dist/cjs/components/Stats/variants/Cells.cjs.map +1 -1
- package/dist/cjs/components/Stats/variants/Divided.cjs +2 -0
- package/dist/cjs/components/Stats/variants/Divided.cjs.map +1 -0
- package/dist/cjs/components/Stats/variants/Stacked.cjs +2 -0
- package/dist/cjs/components/Stats/variants/Stacked.cjs.map +1 -0
- package/dist/cjs/components/Stats/variants/Ticker.cjs +1 -1
- package/dist/cjs/components/Stats/variants/Ticker.cjs.map +1 -1
- package/dist/cjs/utils/surface.cjs +2 -0
- package/dist/cjs/utils/surface.cjs.map +1 -0
- package/dist/es/components/Button.js +41 -31
- package/dist/es/components/Button.js.map +1 -1
- package/dist/es/components/CTA/CTA.js +5 -6
- package/dist/es/components/CTA/CTA.js.map +1 -1
- package/dist/es/components/CTA/parts.js +19 -14
- package/dist/es/components/CTA/parts.js.map +1 -1
- package/dist/es/components/CTA/variants/Panel.js +15 -17
- package/dist/es/components/CTA/variants/Panel.js.map +1 -1
- package/dist/es/components/CTA/variants/Surface.js +21 -11
- package/dist/es/components/CTA/variants/Surface.js.map +1 -1
- package/dist/es/components/Footer/Footer.js +5 -5
- package/dist/es/components/Footer/Footer.js.map +1 -1
- package/dist/es/components/Footer/parts.js +21 -20
- package/dist/es/components/Footer/parts.js.map +1 -1
- package/dist/es/components/Footer/variants/Columns.js +76 -0
- package/dist/es/components/Footer/variants/Columns.js.map +1 -0
- package/dist/es/components/Footer/variants/Editorial.js +68 -35
- package/dist/es/components/Footer/variants/Editorial.js.map +1 -1
- package/dist/es/components/Footer/variants/Minimal.js +50 -16
- package/dist/es/components/Footer/variants/Minimal.js.map +1 -1
- package/dist/es/components/Hero/parts.js +13 -11
- package/dist/es/components/Hero/parts.js.map +1 -1
- package/dist/es/components/Hero/variants/Centered.js +29 -17
- package/dist/es/components/Hero/variants/Centered.js.map +1 -1
- package/dist/es/components/Hero/variants/Parallax.js +23 -23
- package/dist/es/components/Hero/variants/Parallax.js.map +1 -1
- package/dist/es/components/Hero/variants/Split.js +35 -23
- package/dist/es/components/Hero/variants/Split.js.map +1 -1
- package/dist/es/components/Hero/variants/Statement.js +28 -23
- package/dist/es/components/Hero/variants/Statement.js.map +1 -1
- package/dist/es/components/LanguageSwitcher/parts.js +44 -44
- package/dist/es/components/LanguageSwitcher/parts.js.map +1 -1
- package/dist/es/components/MegaMenu/MegaMenu.js +131 -126
- package/dist/es/components/MegaMenu/MegaMenu.js.map +1 -1
- package/dist/es/components/Navbar/Navbar.js +110 -92
- package/dist/es/components/Navbar/Navbar.js.map +1 -1
- package/dist/es/components/Stats/Stats.js +8 -8
- package/dist/es/components/Stats/Stats.js.map +1 -1
- package/dist/es/components/Stats/parts.js +37 -17
- package/dist/es/components/Stats/parts.js.map +1 -1
- package/dist/es/components/Stats/variants/Cells.js +46 -18
- package/dist/es/components/Stats/variants/Cells.js.map +1 -1
- package/dist/es/components/Stats/variants/Divided.js +45 -0
- package/dist/es/components/Stats/variants/Divided.js.map +1 -0
- package/dist/es/components/Stats/variants/Stacked.js +40 -0
- package/dist/es/components/Stats/variants/Stacked.js.map +1 -0
- package/dist/es/components/Stats/variants/Ticker.js +44 -23
- package/dist/es/components/Stats/variants/Ticker.js.map +1 -1
- package/dist/es/utils/surface.js +16 -0
- package/dist/es/utils/surface.js.map +1 -0
- package/dist/index.d.ts +49 -10
- package/dist/styles.css +169 -114
- package/dist/theme.css +27 -0
- package/package.json +1 -1
- package/dist/cjs/components/CTA/variants/Inverse.cjs +0 -2
- package/dist/cjs/components/CTA/variants/Inverse.cjs.map +0 -1
- package/dist/cjs/components/Footer/variants/Classic.cjs +0 -2
- package/dist/cjs/components/Footer/variants/Classic.cjs.map +0 -1
- package/dist/cjs/components/Stats/variants/Editorial.cjs +0 -2
- package/dist/cjs/components/Stats/variants/Editorial.cjs.map +0 -1
- package/dist/cjs/components/Stats/variants/Hairline.cjs +0 -2
- package/dist/cjs/components/Stats/variants/Hairline.cjs.map +0 -1
- package/dist/es/components/CTA/variants/Inverse.js +0 -42
- package/dist/es/components/CTA/variants/Inverse.js.map +0 -1
- package/dist/es/components/Footer/variants/Classic.js +0 -43
- package/dist/es/components/Footer/variants/Classic.js.map +0 -1
- package/dist/es/components/Stats/variants/Editorial.js +0 -32
- package/dist/es/components/Stats/variants/Editorial.js.map +0 -1
- package/dist/es/components/Stats/variants/Hairline.js +0 -25
- package/dist/es/components/Stats/variants/Hairline.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface.cjs","sources":["../../../src/utils/surface.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * Default brand fill for \"emphasis\" (bold) sections. Defined once so every\n * emphasis surface — CTA panels, Hero statements, and any future band — paints\n * the exact same gradient and reads as one design language.\n */\nexport const emphasisGradient =\n \"radial-gradient(120% 160% at 0% 0%, rgb(var(--color-primary)), rgb(var(--color-primary-hover)) 55%, rgb(var(--color-primary) / 0.85))\";\n\n/**\n * Inline style for an emphasis surface.\n *\n * - Without a `background`, the surface is painted with the brand gradient and\n * the text color is derived from `--color-primary` via CSS `contrast-color()`.\n * - With a `background` (any CSS color), it binds `--lc-bg` so the background\n * and its text color share one source; `contrast-color(var(--lc-bg))` picks\n * white/black and re-evaluates automatically when the value changes.\n *\n * This is the CSS-only contrast path mandated by AGENTS.md — no JS luminance\n * helpers.\n */\nexport function emphasisSurfaceStyle(background?: string): CSSProperties {\n if (background) {\n return {\n \"--lc-bg\": background,\n backgroundColor: \"var(--lc-bg)\",\n color: \"contrast-color(var(--lc-bg))\",\n } as CSSProperties;\n }\n\n return {\n background: emphasisGradient,\n color: \"contrast-color(rgb(var(--color-primary)))\",\n };\n}\n"],"names":["emphasisGradient","emphasisSurfaceStyle","background"],"mappings":"gFAOO,MAAMA,EACX,wIAcK,SAASC,EAAqBC,EAAoC,CACvE,OAAIA,EACK,CACL,UAAWA,EACX,gBAAiB,eACjB,MAAO,8BAAA,EAIJ,CACL,WAAYF,EACZ,MAAO,2CAAA,CAEX"}
|
|
@@ -1,62 +1,72 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { cn as
|
|
4
|
-
import { Slot as
|
|
5
|
-
const
|
|
1
|
+
import { jsx as t, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as y } from "react";
|
|
3
|
+
import { cn as n } from "../utils/cn.js";
|
|
4
|
+
import { Slot as k } from "./Slot.js";
|
|
5
|
+
const N = {
|
|
6
6
|
primary: "bg-primary text-on-primary hover:bg-primary-hover",
|
|
7
|
-
dark: "bg-secondary text-on-secondary hover:bg-secondary-hover",
|
|
8
7
|
outline: "border border-border bg-transparent text-foreground hover:border-foreground/30 hover:bg-surface",
|
|
9
8
|
ghost: "text-foreground hover:bg-surface",
|
|
10
9
|
link: "px-0 h-auto text-primary hover:text-primary-hover"
|
|
11
|
-
},
|
|
10
|
+
}, j = {
|
|
12
11
|
sm: "h-9 px-4 text-[13px] gap-1.5",
|
|
13
12
|
md: "h-11 px-5 text-sm gap-2",
|
|
14
13
|
lg: "h-12 px-7 text-[15px] gap-2"
|
|
15
|
-
},
|
|
14
|
+
}, w = "group inline-flex select-none items-center justify-center rounded-lg font-medium tracking-tight transition-[background-color,border-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 cursor-pointer", B = y(
|
|
16
15
|
({
|
|
17
|
-
className:
|
|
18
|
-
variant:
|
|
19
|
-
size:
|
|
16
|
+
className: f,
|
|
17
|
+
variant: r = "primary",
|
|
18
|
+
size: b = "md",
|
|
20
19
|
iconLeft: s,
|
|
21
20
|
iconRight: i,
|
|
22
|
-
customColor:
|
|
21
|
+
customColor: o,
|
|
23
22
|
fullWidth: m,
|
|
24
|
-
asChild:
|
|
23
|
+
asChild: h,
|
|
25
24
|
style: a,
|
|
26
|
-
type:
|
|
25
|
+
type: x = "button",
|
|
27
26
|
children: l,
|
|
28
27
|
...c
|
|
29
28
|
}, u) => {
|
|
30
|
-
const d =
|
|
29
|
+
const d = o ? {
|
|
31
30
|
...a,
|
|
32
|
-
"--lc-bg":
|
|
31
|
+
"--lc-bg": o,
|
|
33
32
|
backgroundColor: "var(--lc-bg)",
|
|
34
33
|
color: "contrast-color(var(--lc-bg))"
|
|
35
|
-
} : a,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
} : a, e = r === "link", g = !o && (r === "outline" || r === "ghost"), p = n(
|
|
35
|
+
w,
|
|
36
|
+
j[b],
|
|
37
|
+
o ? "hover:brightness-95" : N[r],
|
|
38
|
+
e && "underline-offset-4 hover:underline",
|
|
40
39
|
m && "w-full",
|
|
41
|
-
|
|
40
|
+
f
|
|
42
41
|
);
|
|
43
|
-
return
|
|
42
|
+
return h ? /* @__PURE__ */ t(
|
|
43
|
+
k,
|
|
44
|
+
{
|
|
45
|
+
ref: u,
|
|
46
|
+
"data-unfilled": g ? "" : void 0,
|
|
47
|
+
style: d,
|
|
48
|
+
className: p,
|
|
49
|
+
...c,
|
|
50
|
+
children: l
|
|
51
|
+
}
|
|
52
|
+
) : /* @__PURE__ */ v(
|
|
44
53
|
"button",
|
|
45
54
|
{
|
|
46
55
|
ref: u,
|
|
47
|
-
type:
|
|
56
|
+
type: x,
|
|
57
|
+
"data-unfilled": g ? "" : void 0,
|
|
48
58
|
style: d,
|
|
49
|
-
className:
|
|
59
|
+
className: p,
|
|
50
60
|
...c,
|
|
51
61
|
children: [
|
|
52
|
-
s ? /* @__PURE__ */
|
|
62
|
+
s ? /* @__PURE__ */ t("span", { className: n("shrink-0", !e && "opacity-70"), children: s }) : null,
|
|
53
63
|
l,
|
|
54
|
-
i ? /* @__PURE__ */
|
|
64
|
+
i ? /* @__PURE__ */ t(
|
|
55
65
|
"span",
|
|
56
66
|
{
|
|
57
|
-
className:
|
|
67
|
+
className: n(
|
|
58
68
|
"shrink-0 transition-transform duration-200",
|
|
59
|
-
!
|
|
69
|
+
!e && "opacity-70 group-hover:translate-x-0.5"
|
|
60
70
|
),
|
|
61
71
|
children: i
|
|
62
72
|
}
|
|
@@ -66,8 +76,8 @@ const k = {
|
|
|
66
76
|
);
|
|
67
77
|
}
|
|
68
78
|
);
|
|
69
|
-
|
|
79
|
+
B.displayName = "Button";
|
|
70
80
|
export {
|
|
71
|
-
|
|
81
|
+
B as Button
|
|
72
82
|
};
|
|
73
83
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Slot } from \"./Slot\";\n\nexport type ButtonVariant = \"primary\" | \"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Slot } from \"./Slot\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"link\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n iconLeft?: ReactNode;\n iconRight?: ReactNode;\n /** Paints the button with an arbitrary CSS color; text color is computed for contrast. */\n customColor?: string;\n fullWidth?: boolean;\n /**\n * When `true`, the button styling is applied to a single child element\n * instead of a `<button>`. Use it to render a framework router `<Link>`\n * (Next.js, Remix, React Router…). `iconLeft` / `iconRight` are ignored;\n * pass icons inside the child instead.\n */\n asChild?: boolean;\n}\n\nconst variants: Record<ButtonVariant, string> = {\n primary: \"bg-primary text-on-primary hover:bg-primary-hover\",\n outline:\n \"border border-border bg-transparent text-foreground hover:border-foreground/30 hover:bg-surface\",\n ghost: \"text-foreground hover:bg-surface\",\n link: \"px-0 h-auto text-primary hover:text-primary-hover\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n sm: \"h-9 px-4 text-[13px] gap-1.5\",\n md: \"h-11 px-5 text-sm gap-2\",\n lg: \"h-12 px-7 text-[15px] gap-2\",\n};\n\nconst base =\n \"group inline-flex select-none items-center justify-center rounded-lg font-medium tracking-tight transition-[background-color,border-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 cursor-pointer\";\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant = \"primary\",\n size = \"md\",\n iconLeft,\n iconRight,\n customColor,\n fullWidth,\n asChild,\n style,\n type = \"button\",\n children,\n ...props\n },\n ref,\n ) => {\n const customStyle: CSSProperties | undefined = customColor\n ? ({\n ...style,\n \"--lc-bg\": customColor,\n backgroundColor: \"var(--lc-bg)\",\n color: \"contrast-color(var(--lc-bg))\",\n } as CSSProperties)\n : style;\n\n const isLink = variant === \"link\";\n // Outline/ghost have no fill of their own: on an emphasis band they should\n // inherit the band's contrast color. Marked here so the CSS has an exact,\n // unambiguous hook (skipping it for filled buttons and customColor).\n const unfilled = !customColor && (variant === \"outline\" || variant === \"ghost\");\n\n const classes = cn(\n base,\n sizes[size],\n customColor ? \"hover:brightness-95\" : variants[variant],\n isLink && \"underline-offset-4 hover:underline\",\n fullWidth && \"w-full\",\n className,\n );\n\n if (asChild) {\n return (\n <Slot\n ref={ref}\n data-unfilled={unfilled ? \"\" : undefined}\n style={customStyle}\n className={classes}\n {...props}\n >\n {children}\n </Slot>\n );\n }\n\n return (\n <button\n ref={ref}\n type={type}\n data-unfilled={unfilled ? \"\" : undefined}\n style={customStyle}\n className={classes}\n {...props}\n >\n {iconLeft ? <span className={cn(\"shrink-0\", !isLink && \"opacity-70\")}>{iconLeft}</span> : null}\n {children}\n {iconRight ? (\n <span\n className={cn(\n \"shrink-0 transition-transform duration-200\",\n !isLink && \"opacity-70 group-hover:translate-x-0.5\",\n )}\n >\n {iconRight}\n </span>\n ) : null}\n </button>\n );\n },\n);\nButton.displayName = \"Button\";"],"names":["variants","sizes","base","Button","forwardRef","className","variant","size","iconLeft","iconRight","customColor","fullWidth","asChild","style","type","children","props","ref","customStyle","isLink","unfilled","classes","cn","jsx","Slot","jsxs"],"mappings":";;;;AAwBA,MAAMA,IAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,SACE;AAAA,EACF,OAAO;AAAA,EACP,MAAM;AACR,GAEMC,IAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IACJ,qXAEWC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAyCR,IAC1C;AAAA,MACC,GAAGG;AAAA,MACH,WAAWH;AAAA,MACX,iBAAiB;AAAA,MACjB,OAAO;AAAA,IAAA,IAETG,GAEEM,IAASb,MAAY,QAIrBc,IAAW,CAACV,MAAgBJ,MAAY,aAAaA,MAAY,UAEjEe,IAAUC;AAAA,MACdpB;AAAA,MACAD,EAAMM,CAAI;AAAA,MACVG,IAAc,wBAAwBV,EAASM,CAAO;AAAA,MACtDa,KAAU;AAAA,MACVR,KAAa;AAAA,MACbN;AAAA,IAAA;AAGF,WAAIO,IAEA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAP;AAAA,QACA,iBAAeG,IAAW,KAAK;AAAA,QAC/B,OAAOF;AAAA,QACP,WAAWG;AAAA,QACV,GAAGL;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,MAAAH;AAAA,QACA,iBAAeM,IAAW,KAAK;AAAA,QAC/B,OAAOF;AAAA,QACP,WAAWG;AAAA,QACV,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAR,IAAW,gBAAAe,EAAC,QAAA,EAAK,WAAWD,EAAG,YAAY,CAACH,KAAU,YAAY,GAAI,UAAAX,EAAA,CAAS,IAAU;AAAA,UACzFO;AAAA,UACAN,IACC,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACA,CAACH,KAAU;AAAA,cAAA;AAAA,cAGZ,UAAAV;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAN,EAAO,cAAc;"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
2
|
+
import { forwardRef as f } from "react";
|
|
3
3
|
import { CTAPanel as t } from "./variants/Panel.js";
|
|
4
|
-
import { CTASurface as
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
n.displayName = "CTA";
|
|
4
|
+
import { CTASurface as a } from "./variants/Surface.js";
|
|
5
|
+
const i = f(({ option: e = "panel", ...r }, o) => e === "surface" ? /* @__PURE__ */ m(a, { ref: o, ...r }) : /* @__PURE__ */ m(t, { ref: o, ...r }));
|
|
6
|
+
i.displayName = "CTA";
|
|
8
7
|
export {
|
|
9
|
-
|
|
8
|
+
i as CTA
|
|
10
9
|
};
|
|
11
10
|
//# sourceMappingURL=CTA.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CTA.js","sources":["../../../../src/components/CTA/CTA.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { CTAProps } from \"./types\";\nimport { CTAPanel } from \"./variants/Panel\";\nimport { CTASurface } from \"./variants/Surface\";\
|
|
1
|
+
{"version":3,"file":"CTA.js","sources":["../../../../src/components/CTA/CTA.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { CTAProps } from \"./types\";\nimport { CTAPanel } from \"./variants/Panel\";\nimport { CTASurface } from \"./variants/Surface\";\n\nexport const CTA = forwardRef<HTMLElement, CTAProps>(({ option = \"panel\", ...props }, ref) => {\n if (option === \"surface\") return <CTASurface ref={ref} {...props} />;\n return <CTAPanel ref={ref} {...props} />;\n});\nCTA.displayName = \"CTA\";\n"],"names":["CTA","forwardRef","option","props","ref","CTASurface","jsx","CTAPanel"],"mappings":";;;;AAKO,MAAMA,IAAMC,EAAkC,CAAC,EAAE,QAAAC,IAAS,SAAS,GAAGC,EAAA,GAASC,MAChFF,MAAW,8BAAmBG,GAAA,EAAW,KAAAD,GAAW,GAAGD,GAAO,IAC3D,gBAAAG,EAACC,GAAA,EAAS,KAAAH,GAAW,GAAGD,EAAA,CAAO,CACvC;AACDH,EAAI,cAAc;"}
|
|
@@ -1,26 +1,31 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { cn as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { cn as c } from "../../utils/cn.js";
|
|
3
|
+
const o = "font-display text-balance text-4xl font-semibold leading-[1.05] tracking-[-0.03em] sm:text-5xl", x = "mt-5 max-w-xl text-pretty text-base leading-7 sm:text-lg";
|
|
4
|
+
function m({
|
|
5
|
+
action: t,
|
|
6
|
+
secondaryAction: e,
|
|
7
|
+
align: a,
|
|
8
|
+
actionClassName: s = "flex flex-wrap items-center gap-4",
|
|
9
|
+
emphasis: i = !1
|
|
8
10
|
}) {
|
|
9
|
-
return /* @__PURE__ */
|
|
11
|
+
return /* @__PURE__ */ n(
|
|
10
12
|
"div",
|
|
11
13
|
{
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
"data-emphasis": i ? "" : void 0,
|
|
15
|
+
className: c(
|
|
16
|
+
s,
|
|
17
|
+
a === "center" && "justify-center"
|
|
15
18
|
),
|
|
16
19
|
children: [
|
|
17
|
-
|
|
18
|
-
|
|
20
|
+
t,
|
|
21
|
+
e
|
|
19
22
|
]
|
|
20
23
|
}
|
|
21
24
|
);
|
|
22
25
|
}
|
|
23
26
|
export {
|
|
24
|
-
|
|
27
|
+
m as CTAActions,
|
|
28
|
+
x as ctaDescriptionBase,
|
|
29
|
+
o as ctaTitleBase
|
|
25
30
|
};
|
|
26
31
|
//# sourceMappingURL=parts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.js","sources":["../../../../src/components/CTA/parts.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport function CTAActions({\n action,\n secondaryAction,\n align,\n actionClassName = \"flex flex-wrap items-center gap-4\",\n}: {\n action?: ReactNode;\n secondaryAction?: ReactNode;\n align?: \"left\" | \"center\";\n actionClassName?: string;\n}) {\n return (\n <div\n className={cn(\n actionClassName,\n align === \"center\" && \"justify-center\",\n )}\n >\n {action}\n {secondaryAction}\n </div>\n );\n}"],"names":["CTAActions","action","secondaryAction","align","actionClassName","jsxs","cn"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"parts.js","sources":["../../../../src/components/CTA/parts.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Shared emphasis typography. Every CTA layout uses these so switching option\n * changes only the arrangement, never the type.\n */\nexport const ctaTitleBase =\n \"font-display text-balance text-4xl font-semibold leading-[1.05] tracking-[-0.03em] sm:text-5xl\";\n\nexport const ctaDescriptionBase = \"mt-5 max-w-xl text-pretty text-base leading-7 sm:text-lg\";\n\nexport function CTAActions({\n action,\n secondaryAction,\n align,\n actionClassName = \"flex flex-wrap items-center gap-4\",\n emphasis = false,\n}: {\n action?: ReactNode;\n secondaryAction?: ReactNode;\n align?: \"left\" | \"center\";\n actionClassName?: string;\n /** Marks the actions as sitting on an emphasis band so descendant buttons inherit its contrast color. */\n emphasis?: boolean;\n}) {\n return (\n <div\n data-emphasis={emphasis ? \"\" : undefined}\n className={cn(\n actionClassName,\n align === \"center\" && \"justify-center\",\n )}\n >\n {action}\n {secondaryAction}\n </div>\n );\n}\n"],"names":["ctaTitleBase","ctaDescriptionBase","CTAActions","action","secondaryAction","align","actionClassName","emphasis","jsxs","cn"],"mappings":";;AAOO,MAAMA,IACX,kGAEWC,IAAqB;AAE3B,SAASC,EAAW;AAAA,EACzB,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC,IAAW;AACb,GAOG;AACD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAeD,IAAW,KAAK;AAAA,MAC/B,WAAWE;AAAA,QACTH;AAAA,QACAD,MAAU,YAAY;AAAA,MAAA;AAAA,MAGvB,UAAA;AAAA,QAAAF;AAAA,QACAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { jsx as e, jsxs as a } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
2
|
+
import { forwardRef as f } from "react";
|
|
3
3
|
import { cn as t } from "../../../utils/cn.js";
|
|
4
|
-
import { Container as
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
import { Container as u } from "../../Container.js";
|
|
5
|
+
import { emphasisSurfaceStyle as h } from "../../../utils/surface.js";
|
|
6
|
+
import { ctaTitleBase as x, ctaDescriptionBase as v, CTAActions as y } from "../parts.js";
|
|
7
|
+
const N = f(
|
|
8
|
+
({ className: i, title: l, description: s, action: o, secondaryAction: n, align: r = "left", background: c, id: m, ...d }, p) => /* @__PURE__ */ e("section", { ref: p, id: m, className: t("w-full py-6 pb-20", i), ...d, children: /* @__PURE__ */ e(u, { children: /* @__PURE__ */ a(
|
|
8
9
|
"div",
|
|
9
10
|
{
|
|
10
11
|
className: "relative overflow-hidden rounded-[1.75rem] px-7 py-14 sm:px-14 sm:py-20",
|
|
11
|
-
style:
|
|
12
|
-
background: "radial-gradient(120% 160% at 0% 0%, rgb(var(--color-primary)), rgb(var(--color-primary-hover)) 55%, rgb(var(--color-primary) / 0.85))",
|
|
13
|
-
color: "contrast-color(rgb(var(--color-primary)))"
|
|
14
|
-
},
|
|
12
|
+
style: h(c),
|
|
15
13
|
children: [
|
|
16
14
|
/* @__PURE__ */ e("div", { "aria-hidden": !0, className: "pointer-events-none absolute inset-0 grain opacity-[0.07] mix-blend-overlay" }),
|
|
17
15
|
/* @__PURE__ */ e(
|
|
@@ -31,19 +29,19 @@ const f = p(
|
|
|
31
29
|
),
|
|
32
30
|
children: [
|
|
33
31
|
/* @__PURE__ */ a("div", { className: t("max-w-2xl", r === "center" && "mx-auto"), children: [
|
|
34
|
-
/* @__PURE__ */ e("h2", { className:
|
|
35
|
-
|
|
32
|
+
/* @__PURE__ */ e("h2", { className: x, children: l }),
|
|
33
|
+
s ? /* @__PURE__ */ e(
|
|
36
34
|
"p",
|
|
37
35
|
{
|
|
38
36
|
className: t(
|
|
39
|
-
|
|
40
|
-
r === "center" && "mx-auto
|
|
37
|
+
v,
|
|
38
|
+
r === "center" && "mx-auto"
|
|
41
39
|
),
|
|
42
|
-
children:
|
|
40
|
+
children: s
|
|
43
41
|
}
|
|
44
42
|
) : null
|
|
45
43
|
] }),
|
|
46
|
-
/* @__PURE__ */ e(
|
|
44
|
+
/* @__PURE__ */ e(y, { action: o, secondaryAction: n, align: r, emphasis: !0 })
|
|
47
45
|
]
|
|
48
46
|
}
|
|
49
47
|
)
|
|
@@ -51,8 +49,8 @@ const f = p(
|
|
|
51
49
|
}
|
|
52
50
|
) }) })
|
|
53
51
|
);
|
|
54
|
-
|
|
52
|
+
N.displayName = "CTAPanel";
|
|
55
53
|
export {
|
|
56
|
-
|
|
54
|
+
N as CTAPanel
|
|
57
55
|
};
|
|
58
56
|
//# sourceMappingURL=Panel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","sources":["../../../../../src/components/CTA/variants/Panel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { Container } from \"../../Container\";\nimport { CTAActions } from \"../parts\";\nimport type { CTAProps } from \"../types\";\n\n
|
|
1
|
+
{"version":3,"file":"Panel.js","sources":["../../../../../src/components/CTA/variants/Panel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { Container } from \"../../Container\";\nimport { emphasisSurfaceStyle } from \"../../../utils/surface\";\nimport { CTAActions, ctaDescriptionBase, ctaTitleBase } from \"../parts\";\nimport type { CTAProps } from \"../types\";\n\n/**\n * panel — brand emphasis panel: a gradient derived from `--color-primary`,\n * with a shared grain texture. Passing `background` replaces the gradient with\n * a custom color while keeping the contrast behavior.\n */\nexport const CTAPanel = forwardRef<HTMLElement, CTAProps>(\n (\n { className, title, description, action, secondaryAction, align = \"left\", background, id, ...props },\n ref,\n ) => {\n return (\n <section ref={ref} id={id} className={cn(\"w-full py-6 pb-20\", className)} {...props}>\n <Container>\n <div\n className=\"relative overflow-hidden rounded-[1.75rem] px-7 py-14 sm:px-14 sm:py-20\"\n style={emphasisSurfaceStyle(background)}\n >\n <div aria-hidden className=\"pointer-events-none absolute inset-0 grain opacity-[0.07] mix-blend-overlay\" />\n <div\n aria-hidden\n className=\"pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full\"\n style={{ background: \"rgb(var(--color-accent))\", opacity: 0.35, filter: \"blur(60px)\" }}\n />\n <div\n className={cn(\n \"relative flex flex-col gap-9\",\n align === \"center\" ? \"items-center text-center\" : \"items-start\",\n )}\n >\n <div className={cn(\"max-w-2xl\", align === \"center\" && \"mx-auto\")}>\n <h2 className={ctaTitleBase}>{title}</h2>\n {description ? (\n <p\n className={cn(\n ctaDescriptionBase,\n align === \"center\" && \"mx-auto\",\n )}\n >\n {description}\n </p>\n ) : null}\n </div>\n <CTAActions action={action} secondaryAction={secondaryAction} align={align} emphasis />\n </div>\n </div>\n </Container>\n </section>\n );\n },\n);\nCTAPanel.displayName = \"CTAPanel\";\n"],"names":["CTAPanel","forwardRef","className","title","description","action","secondaryAction","align","background","id","props","ref","jsx","cn","Container","jsxs","emphasisSurfaceStyle","ctaTitleBase","ctaDescriptionBase","CTAActions"],"mappings":";;;;;;AAYO,MAAMA,IAAWC;AAAA,EACtB,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,QAAAC,GAAQ,iBAAAC,GAAiB,OAAAC,IAAQ,QAAQ,YAAAC,GAAY,IAAAC,GAAI,GAAGC,EAAA,GAC7FC,MAGE,gBAAAC,EAAC,WAAA,EAAQ,KAAAD,GAAU,IAAAF,GAAQ,WAAWI,EAAG,qBAAqBX,CAAS,GAAI,GAAGQ,GAC5E,UAAA,gBAAAE,EAACE,GAAA,EACC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAOC,EAAqBR,CAAU;AAAA,MAEtC,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,eAAW,IAAC,WAAU,+EAA8E;AAAA,QACzG,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,4BAA4B,SAAS,MAAM,QAAQ,aAAA;AAAA,UAAa;AAAA,QAAA;AAAA,QAEvF,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF;AAAA,cACT;AAAA,cACAN,MAAU,WAAW,6BAA6B;AAAA,YAAA;AAAA,YAGpD,UAAA;AAAA,cAAA,gBAAAQ,EAAC,SAAI,WAAWF,EAAG,aAAaN,MAAU,YAAY,SAAS,GAC7D,UAAA;AAAA,gBAAA,gBAAAK,EAAC,MAAA,EAAG,WAAWK,GAAe,UAAAd,GAAM;AAAA,gBACnCC,IACC,gBAAAQ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACTK;AAAA,sBACAX,MAAU,YAAY;AAAA,oBAAA;AAAA,oBAGvB,UAAAH;AAAA,kBAAA;AAAA,gBAAA,IAED;AAAA,cAAA,GACN;AAAA,gCACCe,GAAA,EAAW,QAAAd,GAAgB,iBAAAC,GAAkC,OAAAC,GAAc,UAAQ,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACvF;AAAA,IAAA;AAAA,EAAA,GAEJ,EAAA,CACF;AAGN;AACAP,EAAS,cAAc;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
1
|
+
import { jsx as e, jsxs as m } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as d } from "react";
|
|
3
3
|
import { cn as r } from "../../../utils/cn.js";
|
|
4
|
-
import { Container as
|
|
5
|
-
import {
|
|
6
|
-
const
|
|
7
|
-
({ className:
|
|
4
|
+
import { Container as x } from "../../Container.js";
|
|
5
|
+
import { ctaTitleBase as p, ctaDescriptionBase as u, CTAActions as h } from "../parts.js";
|
|
6
|
+
const N = d(
|
|
7
|
+
({ className: c, title: o, description: s, action: a, secondaryAction: l, align: t = "left", background: b, id: n, ...i }, f) => /* @__PURE__ */ e("section", { ref: f, id: n, className: r("w-full", c), ...i, children: /* @__PURE__ */ e(x, { className: "py-20 sm:py-24", children: /* @__PURE__ */ m(
|
|
8
8
|
"div",
|
|
9
9
|
{
|
|
10
10
|
className: r(
|
|
@@ -12,17 +12,27 @@ const u = d(
|
|
|
12
12
|
t === "center" && "items-center text-center sm:flex-col sm:items-center"
|
|
13
13
|
),
|
|
14
14
|
children: [
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
/* @__PURE__ */ e("h2", { className: "
|
|
17
|
-
|
|
15
|
+
/* @__PURE__ */ m("div", { className: r("max-w-3xl", t === "center" && "mx-auto"), children: [
|
|
16
|
+
/* @__PURE__ */ e("h2", { className: r(p, "text-foreground"), children: o }),
|
|
17
|
+
s ? /* @__PURE__ */ e(
|
|
18
|
+
"p",
|
|
19
|
+
{
|
|
20
|
+
className: r(
|
|
21
|
+
u,
|
|
22
|
+
"text-muted-foreground",
|
|
23
|
+
t === "center" && "mx-auto"
|
|
24
|
+
),
|
|
25
|
+
children: s
|
|
26
|
+
}
|
|
27
|
+
) : null
|
|
18
28
|
] }),
|
|
19
|
-
/* @__PURE__ */ e(
|
|
29
|
+
/* @__PURE__ */ e(h, { action: a, secondaryAction: l, align: t })
|
|
20
30
|
]
|
|
21
31
|
}
|
|
22
32
|
) }) })
|
|
23
33
|
);
|
|
24
|
-
|
|
34
|
+
N.displayName = "CTASurface";
|
|
25
35
|
export {
|
|
26
|
-
|
|
36
|
+
N as CTASurface
|
|
27
37
|
};
|
|
28
38
|
//# sourceMappingURL=Surface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Surface.js","sources":["../../../../../src/components/CTA/variants/Surface.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { Container } from \"../../Container\";\nimport { CTAActions } from \"../parts\";\nimport type { CTAProps } from \"../types\";\n\n/** surface — quiet paper band: hairline rule,
|
|
1
|
+
{"version":3,"file":"Surface.js","sources":["../../../../../src/components/CTA/variants/Surface.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { Container } from \"../../Container\";\nimport { CTAActions, ctaDescriptionBase, ctaTitleBase } from \"../parts\";\nimport type { CTAProps } from \"../types\";\n\n/** surface — quiet paper band: hairline rule, display type, actions on the right. */\nexport const CTASurface = forwardRef<HTMLElement, CTAProps>(\n (\n { className, title, description, action, secondaryAction, align = \"left\", background, id, ...props },\n ref,\n ) => (\n <section ref={ref} id={id} className={cn(\"w-full\", className)} {...props}>\n <Container className=\"py-20 sm:py-24\">\n <div\n className={cn(\n \"flex flex-col gap-10 border-t border-border pt-14 sm:flex-row sm:items-end sm:justify-between sm:pt-16\",\n align === \"center\" && \"items-center text-center sm:flex-col sm:items-center\",\n )}\n >\n <div className={cn(\"max-w-3xl\", align === \"center\" && \"mx-auto\")}>\n <h2 className={cn(ctaTitleBase, \"text-foreground\")}>{title}</h2>\n {description ? (\n <p\n className={cn(\n ctaDescriptionBase,\n \"text-muted-foreground\",\n align === \"center\" && \"mx-auto\",\n )}\n >\n {description}\n </p>\n ) : null}\n </div>\n <CTAActions action={action} secondaryAction={secondaryAction} align={align} />\n </div>\n </Container>\n </section>\n ),\n);\nCTASurface.displayName = \"CTASurface\";\n"],"names":["CTASurface","forwardRef","className","title","description","action","secondaryAction","align","background","id","props","ref","jsx","cn","Container","jsxs","ctaTitleBase","ctaDescriptionBase","CTAActions"],"mappings":";;;;;AAOO,MAAMA,IAAaC;AAAA,EACxB,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,QAAAC,GAAQ,iBAAAC,GAAiB,OAAAC,IAAQ,QAAQ,YAAAC,GAAY,IAAAC,GAAI,GAAGC,EAAA,GAC7FC,MAEA,gBAAAC,EAAC,WAAA,EAAQ,KAAAD,GAAU,IAAAF,GAAQ,WAAWI,EAAG,UAAUX,CAAS,GAAI,GAAGQ,GACjE,UAAA,gBAAAE,EAACE,GAAA,EAAU,WAAU,kBACnB,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACT;AAAA,QACAN,MAAU,YAAY;AAAA,MAAA;AAAA,MAGxB,UAAA;AAAA,QAAA,gBAAAQ,EAAC,SAAI,WAAWF,EAAG,aAAaN,MAAU,YAAY,SAAS,GAC7D,UAAA;AAAA,UAAA,gBAAAK,EAAC,QAAG,WAAWC,EAAGG,GAAc,iBAAiB,GAAI,UAAAb,GAAM;AAAA,UAC1DC,IACC,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACTI;AAAA,gBACA;AAAA,gBACAV,MAAU,YAAY;AAAA,cAAA;AAAA,cAGvB,UAAAH;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,QAAA,GACN;AAAA,QACA,gBAAAQ,EAACM,GAAA,EAAW,QAAAb,GAAgB,iBAAAC,GAAkC,OAAAC,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEhF,EAAA,CACF;AAEJ;AACAP,EAAW,cAAc;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { FooterColumns as i } from "./variants/Columns.js";
|
|
3
3
|
import { FooterMinimal as m } from "./variants/Minimal.js";
|
|
4
4
|
import { FooterEditorial as e } from "./variants/Editorial.js";
|
|
5
|
-
const
|
|
6
|
-
|
|
5
|
+
const l = ({ option: t = "columns", ...o }) => t === "minimal" ? /* @__PURE__ */ r(m, { ...o }) : t === "editorial" ? /* @__PURE__ */ r(e, { ...o }) : /* @__PURE__ */ r(i, { ...o });
|
|
6
|
+
l.displayName = "Footer";
|
|
7
7
|
export {
|
|
8
|
-
|
|
8
|
+
l as Footer
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=Footer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.js","sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { FooterProps } from \"./types\";\nimport {
|
|
1
|
+
{"version":3,"file":"Footer.js","sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { FooterProps } from \"./types\";\nimport { FooterColumns } from \"./variants/Columns\";\nimport { FooterMinimal } from \"./variants/Minimal\";\nimport { FooterEditorial } from \"./variants/Editorial\";\n\nexport const Footer = ({ option = \"columns\", ...props }: FooterProps) => {\n if (option === \"minimal\") return <FooterMinimal {...props} />;\n if (option === \"editorial\") return <FooterEditorial {...props} />;\n return <FooterColumns {...props} />;\n};\nFooter.displayName = \"Footer\";\n"],"names":["Footer","option","props","jsx","FooterMinimal","FooterEditorial","FooterColumns"],"mappings":";;;;AAKO,MAAMA,IAAS,CAAC,EAAE,QAAAC,IAAS,WAAW,GAAGC,QAC1CD,MAAW,YAAkB,gBAAAE,EAACC,GAAA,EAAe,GAAGF,GAAO,IACvDD,MAAW,cAAoB,gBAAAE,EAACE,GAAA,EAAiB,GAAGH,GAAO,IACxD,gBAAAC,EAACG,GAAA,EAAe,GAAGJ,EAAA,CAAO;AAEnCF,EAAO,cAAc;"}
|
|
@@ -1,56 +1,57 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { cn as
|
|
1
|
+
import { jsx as r, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { cn as o } from "../../utils/cn.js";
|
|
3
3
|
function m({
|
|
4
4
|
logo: e,
|
|
5
5
|
logoSrc: n,
|
|
6
|
-
logoAlt:
|
|
7
|
-
logoClassName:
|
|
6
|
+
logoAlt: l,
|
|
7
|
+
logoClassName: i,
|
|
8
8
|
brand: t,
|
|
9
|
-
imageClassName:
|
|
9
|
+
imageClassName: s = "h-7 w-auto"
|
|
10
10
|
}) {
|
|
11
11
|
return e || (n ? /* @__PURE__ */ r(
|
|
12
12
|
"img",
|
|
13
13
|
{
|
|
14
14
|
src: n,
|
|
15
|
-
alt:
|
|
16
|
-
className:
|
|
15
|
+
alt: l ?? (typeof t == "string" ? t : "Logo"),
|
|
16
|
+
className: o(s, i)
|
|
17
17
|
}
|
|
18
18
|
) : null);
|
|
19
19
|
}
|
|
20
20
|
function u({ brand: e }) {
|
|
21
|
-
return /* @__PURE__ */
|
|
21
|
+
return /* @__PURE__ */ a("span", { className: "flex items-center gap-2 font-display text-lg font-bold tracking-tight", children: [
|
|
22
22
|
/* @__PURE__ */ r("span", { "aria-hidden": !0, className: "inline-block h-2.5 w-2.5 rounded-sm bg-current" }),
|
|
23
23
|
e
|
|
24
24
|
] });
|
|
25
25
|
}
|
|
26
26
|
function f({ brand: e }) {
|
|
27
|
-
return /* @__PURE__ */ r("span", { className: "font-display text-5xl font-bold tracking-[-0.03em] text-
|
|
27
|
+
return /* @__PURE__ */ r("span", { className: "font-display text-5xl font-bold tracking-[-0.03em] text-current sm:text-7xl", children: e });
|
|
28
28
|
}
|
|
29
29
|
function h({
|
|
30
30
|
columns: e,
|
|
31
31
|
Link: n,
|
|
32
|
-
linkClassName:
|
|
32
|
+
linkClassName: l,
|
|
33
|
+
columnTitleClassName: i = "text-muted-foreground"
|
|
33
34
|
}) {
|
|
34
|
-
return /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: e.map((
|
|
35
|
-
/* @__PURE__ */ r("h3", { className: "text-xs font-semibold uppercase tracking-[0.16em]
|
|
36
|
-
/* @__PURE__ */ r("ul", { className: "mt-4 space-y-2.5", children:
|
|
37
|
-
] },
|
|
35
|
+
return /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: e.map((t) => /* @__PURE__ */ a("div", { children: [
|
|
36
|
+
/* @__PURE__ */ r("h3", { className: o("text-xs font-semibold uppercase tracking-[0.16em]", i), children: t.title }),
|
|
37
|
+
/* @__PURE__ */ r("ul", { className: "mt-4 space-y-2.5", children: t.links.map((s) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(n, { href: s.href, className: l, children: s.label }) }, s.href)) })
|
|
38
|
+
] }, t.title)) });
|
|
38
39
|
}
|
|
39
40
|
function p({
|
|
40
41
|
bottom: e,
|
|
41
42
|
languageSwitcher: n,
|
|
42
|
-
brand:
|
|
43
|
-
wrapperClassName:
|
|
43
|
+
brand: l,
|
|
44
|
+
wrapperClassName: i,
|
|
44
45
|
textClassName: t
|
|
45
46
|
}) {
|
|
46
|
-
return /* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */ r("span", { className:
|
|
47
|
+
return /* @__PURE__ */ a("div", { className: i, children: [
|
|
48
|
+
/* @__PURE__ */ r("span", { className: o(t), children: e }),
|
|
48
49
|
n ? /* @__PURE__ */ r("div", { children: n }) : null,
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
+
/* @__PURE__ */ a("span", { className: o(t), children: [
|
|
50
51
|
"© ",
|
|
51
52
|
(/* @__PURE__ */ new Date()).getFullYear(),
|
|
52
53
|
" ",
|
|
53
|
-
|
|
54
|
+
l,
|
|
54
55
|
". All rights reserved."
|
|
55
56
|
] })
|
|
56
57
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.js","sources":["../../../../src/components/Footer/parts.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { FooterColumn } from \"./types\";\n\nexport function FooterLogoNode({\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brand,\n imageClassName = \"h-7 w-auto\",\n}: {\n logo?: ReactNode;\n logoSrc?: string;\n logoAlt?: string;\n logoClassName?: string;\n brand?: ReactNode;\n imageClassName?: string;\n}) {\n if (logo) return logo;\n if (logoSrc) {\n return (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(imageClassName, logoClassName)}\n />\n );\n }\n return null;\n}\n\nexport function FooterWordmark({ brand }: { brand?: ReactNode }) {\n return (\n <span className=\"flex items-center gap-2 font-display text-lg font-bold tracking-tight\">\n <span aria-hidden className=\"inline-block h-2.5 w-2.5 rounded-sm bg-current\" />\n {brand}\n </span>\n );\n}\n\nexport function FooterEditorialWordmark({ brand }: { brand?: ReactNode }) {\n return (\n <span className=\"font-display text-5xl font-bold tracking-[-0.03em] text-
|
|
1
|
+
{"version":3,"file":"parts.js","sources":["../../../../src/components/Footer/parts.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { FooterColumn } from \"./types\";\n\nexport function FooterLogoNode({\n logo,\n logoSrc,\n logoAlt,\n logoClassName,\n brand,\n imageClassName = \"h-7 w-auto\",\n}: {\n logo?: ReactNode;\n logoSrc?: string;\n logoAlt?: string;\n logoClassName?: string;\n brand?: ReactNode;\n imageClassName?: string;\n}) {\n if (logo) return logo;\n if (logoSrc) {\n return (\n <img\n src={logoSrc}\n alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n className={cn(imageClassName, logoClassName)}\n />\n );\n }\n return null;\n}\n\nexport function FooterWordmark({ brand }: { brand?: ReactNode }) {\n return (\n <span className=\"flex items-center gap-2 font-display text-lg font-bold tracking-tight\">\n <span aria-hidden className=\"inline-block h-2.5 w-2.5 rounded-sm bg-current\" />\n {brand}\n </span>\n );\n}\n\nexport function FooterEditorialWordmark({ brand }: { brand?: ReactNode }) {\n return (\n <span className=\"font-display text-5xl font-bold tracking-[-0.03em] text-current sm:text-7xl\">\n {brand}\n </span>\n );\n}\n\nexport function FooterColumnsBlock({\n columns,\n Link,\n linkClassName,\n columnTitleClassName = \"text-muted-foreground\",\n}: {\n columns: FooterColumn[];\n Link: ElementType;\n linkClassName: string;\n columnTitleClassName?: string;\n}) {\n return (\n <div className=\"grid grid-cols-2 gap-8 md:grid-cols-4\">\n {columns.map((column) => (\n <div key={column.title}>\n <h3 className={cn(\"text-xs font-semibold uppercase tracking-[0.16em]\", columnTitleClassName)}>\n {column.title}\n </h3>\n <ul className=\"mt-4 space-y-2.5\">\n {column.links.map((link) => (\n <li key={link.href}>\n <Link href={link.href} className={linkClassName}>\n {link.label}\n </Link>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n );\n}\n\nexport function FooterBottomBar({\n bottom,\n languageSwitcher,\n brand,\n wrapperClassName,\n textClassName,\n}: {\n bottom?: ReactNode;\n languageSwitcher?: ReactNode;\n brand?: ReactNode;\n wrapperClassName: string;\n textClassName: string;\n}) {\n return (\n <div className={wrapperClassName}>\n <span className={cn(textClassName)}>{bottom}</span>\n {languageSwitcher ? <div>{languageSwitcher}</div> : null}\n <span className={cn(textClassName)}>© {new Date().getFullYear()} {brand}. All rights reserved.</span>\n </div>\n );\n}"],"names":["FooterLogoNode","logo","logoSrc","logoAlt","logoClassName","brand","imageClassName","jsx","cn","FooterWordmark","jsxs","FooterEditorialWordmark","FooterColumnsBlock","columns","Link","linkClassName","columnTitleClassName","column","link","FooterBottomBar","bottom","languageSwitcher","wrapperClassName","textClassName"],"mappings":";;AAIO,SAASA,EAAe;AAAA,EAC7B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC,IAAiB;AACnB,GAOG;AACD,SAAIL,MACAC,IAEA,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKL;AAAA,MACL,KAAKC,MAAY,OAAOE,KAAU,WAAWA,IAAQ;AAAA,MACrD,WAAWG,EAAGF,GAAgBF,CAAa;AAAA,IAAA;AAAA,EAAA,IAI1C;AACT;AAEO,SAASK,EAAe,EAAE,OAAAJ,KAAgC;AAC/D,SACE,gBAAAK,EAAC,QAAA,EAAK,WAAU,yEACd,UAAA;AAAA,IAAA,gBAAAH,EAAC,QAAA,EAAK,eAAW,IAAC,WAAU,kDAAiD;AAAA,IAC5EF;AAAA,EAAA,GACH;AAEJ;AAEO,SAASM,EAAwB,EAAE,OAAAN,KAAgC;AACxE,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAU,+EACb,UAAAF,GACH;AAEJ;AAEO,SAASO,EAAmB;AAAA,EACjC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,sBAAAC,IAAuB;AACzB,GAKG;AACD,SACE,gBAAAT,EAAC,SAAI,WAAU,yCACZ,YAAQ,IAAI,CAACU,MACZ,gBAAAP,EAAC,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAAC,QAAG,WAAWC,EAAG,qDAAqDQ,CAAoB,GACxF,YAAO,OACV;AAAA,IACA,gBAAAT,EAAC,MAAA,EAAG,WAAU,oBACX,UAAAU,EAAO,MAAM,IAAI,CAACC,MACjB,gBAAAX,EAAC,MAAA,EACC,UAAA,gBAAAA,EAACO,KAAK,MAAMI,EAAK,MAAM,WAAWH,GAC/B,UAAAG,EAAK,OACR,EAAA,GAHOA,EAAK,IAId,CACD,EAAA,CACH;AAAA,EAAA,EAAA,GAZQD,EAAO,KAajB,CACD,GACH;AAEJ;AAEO,SAASE,EAAgB;AAAA,EAC9B,QAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,OAAAhB;AAAA,EACA,kBAAAiB;AAAA,EACA,eAAAC;AACF,GAMG;AACD,SACE,gBAAAb,EAAC,OAAA,EAAI,WAAWY,GACd,UAAA;AAAA,IAAA,gBAAAf,EAAC,QAAA,EAAK,WAAWC,EAAGe,CAAa,GAAI,UAAAH,GAAO;AAAA,IAC3CC,IAAmB,gBAAAd,EAAC,OAAA,EAAK,UAAAc,EAAA,CAAiB,IAAS;AAAA,IACpD,gBAAAX,EAAC,QAAA,EAAK,WAAWF,EAAGe,CAAa,GAAG,UAAA;AAAA,MAAA;AAAA,OAAG,oBAAI,KAAA,GAAO,YAAA;AAAA,MAAc;AAAA,MAAElB;AAAA,MAAM;AAAA,IAAA,EAAA,CAAsB;AAAA,EAAA,GAChG;AAEJ;"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { jsx as e, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { cn as t } from "../../../utils/cn.js";
|
|
3
|
+
import { Container as F } from "../../Container.js";
|
|
4
|
+
import { emphasisSurfaceStyle as j } from "../../../utils/surface.js";
|
|
5
|
+
import { FooterLogoNode as B, FooterWordmark as k, FooterBottomBar as L } from "../parts.js";
|
|
6
|
+
function S({
|
|
7
|
+
className: u,
|
|
8
|
+
brand: s,
|
|
9
|
+
logo: x,
|
|
10
|
+
logoSrc: f,
|
|
11
|
+
logoAlt: p,
|
|
12
|
+
logoClassName: h,
|
|
13
|
+
description: m,
|
|
14
|
+
columns: g,
|
|
15
|
+
socials: n,
|
|
16
|
+
bottom: N,
|
|
17
|
+
languageSwitcher: b,
|
|
18
|
+
badge: d,
|
|
19
|
+
background: c,
|
|
20
|
+
LinkComponent: v,
|
|
21
|
+
style: i,
|
|
22
|
+
...w
|
|
23
|
+
}) {
|
|
24
|
+
const y = v ?? "a", C = B({ logo: x, logoSrc: f, logoAlt: p, logoClassName: h, brand: s }) ?? /* @__PURE__ */ e(k, { brand: s }), r = !!c;
|
|
25
|
+
return /* @__PURE__ */ e(
|
|
26
|
+
"footer",
|
|
27
|
+
{
|
|
28
|
+
"data-emphasis": r ? "" : void 0,
|
|
29
|
+
style: r ? { ...j(c), ...i } : i,
|
|
30
|
+
className: t("w-full border-t border-border bg-background", r && "border-current/15", u),
|
|
31
|
+
...w,
|
|
32
|
+
children: /* @__PURE__ */ o(F, { className: "py-16", children: [
|
|
33
|
+
/* @__PURE__ */ o("div", { className: "grid grid-cols-2 gap-10 md:grid-cols-4 lg:grid-cols-6", children: [
|
|
34
|
+
/* @__PURE__ */ o("div", { className: "col-span-2", children: [
|
|
35
|
+
/* @__PURE__ */ e("span", { className: t(r ? "text-current" : "text-foreground"), children: C }),
|
|
36
|
+
m ? /* @__PURE__ */ e("p", { className: t("mt-4 max-w-xs text-sm leading-6", r ? "text-current/60" : "text-muted-foreground"), children: m }) : null,
|
|
37
|
+
n ? /* @__PURE__ */ e("div", { className: "mt-6 flex items-center gap-3", children: n }) : null,
|
|
38
|
+
d ? /* @__PURE__ */ e("div", { className: "mt-6", children: d }) : null
|
|
39
|
+
] }),
|
|
40
|
+
g.map((l) => /* @__PURE__ */ o("div", { children: [
|
|
41
|
+
/* @__PURE__ */ e("h3", { className: t("text-xs font-semibold uppercase tracking-[0.16em]", r ? "text-current/50" : "text-muted-foreground"), children: l.title }),
|
|
42
|
+
/* @__PURE__ */ e("ul", { className: "mt-4 space-y-2.5", children: l.links.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
43
|
+
y,
|
|
44
|
+
{
|
|
45
|
+
href: a.href,
|
|
46
|
+
className: t(
|
|
47
|
+
"text-sm transition-colors duration-150",
|
|
48
|
+
r ? "text-current/70 hover:text-current" : "text-muted-foreground hover:text-foreground"
|
|
49
|
+
),
|
|
50
|
+
children: a.label
|
|
51
|
+
}
|
|
52
|
+
) }, a.href)) })
|
|
53
|
+
] }, l.title))
|
|
54
|
+
] }),
|
|
55
|
+
/* @__PURE__ */ e(
|
|
56
|
+
L,
|
|
57
|
+
{
|
|
58
|
+
bottom: N,
|
|
59
|
+
languageSwitcher: b,
|
|
60
|
+
brand: s,
|
|
61
|
+
wrapperClassName: t(
|
|
62
|
+
"mt-14 flex flex-col items-center justify-between gap-4 border-t pt-8 text-sm sm:flex-row",
|
|
63
|
+
r ? "border-current/15 text-current/50" : "border-border text-muted-foreground"
|
|
64
|
+
),
|
|
65
|
+
textClassName: ""
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
] })
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
S.displayName = "FooterColumns";
|
|
73
|
+
export {
|
|
74
|
+
S as FooterColumns
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=Columns.js.map
|