@repraze/kernelkit 0.1.0-alpha.0 → 0.1.0-alpha.1
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/carousel.d.ts +6 -1
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/carousel.js +30 -2
- package/dist/components/carousel.js.map +1 -1
- package/dist/components/hero.d.ts +14 -2
- package/dist/components/hero.d.ts.map +1 -1
- package/dist/components/hero.js +41 -8
- package/dist/components/hero.js.map +1 -1
- package/package.json +1 -1
- package/src/components/carousel.tsx +35 -0
- package/src/components/hero.tsx +77 -7
|
@@ -10,6 +10,11 @@ type CarouselProps = {
|
|
|
10
10
|
plugins?: CarouselPlugin;
|
|
11
11
|
orientation?: "horizontal" | "vertical";
|
|
12
12
|
setApi?: (api: CarouselApi) => void;
|
|
13
|
+
/**
|
|
14
|
+
* Advance every `autoplay` ms, wrapping to the first slide. Pauses while the pointer is over the
|
|
15
|
+
* carousel or focus is inside it, while the tab is hidden, and never runs under reduced motion.
|
|
16
|
+
*/
|
|
17
|
+
autoplay?: number;
|
|
13
18
|
};
|
|
14
19
|
type CarouselContextProps = {
|
|
15
20
|
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
|
@@ -20,7 +25,7 @@ type CarouselContextProps = {
|
|
|
20
25
|
canScrollNext: boolean;
|
|
21
26
|
} & CarouselProps;
|
|
22
27
|
declare function useCarousel(): CarouselContextProps;
|
|
23
|
-
declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
|
|
28
|
+
declare function Carousel({ orientation, opts, setApi, plugins, autoplay, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
|
|
24
29
|
declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
25
30
|
declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
26
31
|
declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,sCAAsC,CAAC;AAG5D,OAAO,gBAAgB,EAAE,EAAC,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAEjF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,sCAAsC,CAAC;AAG5D,OAAO,gBAAgB,EAAE,EAAC,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAEjF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IACxB,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CAC1B,GAAG,aAAa,CAAC;AAIlB,iBAAS,WAAW,yBAQnB;AAED,iBAAS,QAAQ,CAAC,EACd,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,qBAmH7C;AAED,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAY1E;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgBvE;AAED,iBAAS,gBAAgB,CAAC,EACtB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAuBrC;AAED,iBAAS,YAAY,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAuBrC;AAED,6FAA6F;AAC7F,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAmDvE;AAED,OAAO,EACH,QAAQ,EACR,KAAK,WAAW,EAChB,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,WAAW,GACd,CAAC"}
|
|
@@ -14,7 +14,7 @@ function useCarousel() {
|
|
|
14
14
|
}
|
|
15
15
|
return context;
|
|
16
16
|
}
|
|
17
|
-
function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
|
|
17
|
+
function Carousel({ orientation = "horizontal", opts, setApi, plugins, autoplay, className, children, ...props }) {
|
|
18
18
|
const [carouselRef, api] = useEmblaCarousel({
|
|
19
19
|
...opts,
|
|
20
20
|
axis: orientation === "horizontal" ? "x" : "y",
|
|
@@ -62,6 +62,34 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
|
|
|
62
62
|
api.off("select", onSelect);
|
|
63
63
|
};
|
|
64
64
|
}, [api, onSelect]);
|
|
65
|
+
const rootRef = React.useRef(null);
|
|
66
|
+
React.useEffect(() => {
|
|
67
|
+
const root = rootRef.current;
|
|
68
|
+
if (!api || !autoplay || !root || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
let hovered = false;
|
|
72
|
+
const onEnter = () => (hovered = true);
|
|
73
|
+
const onLeave = () => (hovered = false);
|
|
74
|
+
root.addEventListener("pointerenter", onEnter);
|
|
75
|
+
root.addEventListener("pointerleave", onLeave);
|
|
76
|
+
const timer = window.setInterval(() => {
|
|
77
|
+
if (hovered || root.contains(document.activeElement) || document.hidden) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
if (api.canScrollNext()) {
|
|
81
|
+
api.scrollNext();
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
api.scrollTo(0);
|
|
85
|
+
}
|
|
86
|
+
}, autoplay);
|
|
87
|
+
return () => {
|
|
88
|
+
window.clearInterval(timer);
|
|
89
|
+
root.removeEventListener("pointerenter", onEnter);
|
|
90
|
+
root.removeEventListener("pointerleave", onLeave);
|
|
91
|
+
};
|
|
92
|
+
}, [api, autoplay]);
|
|
65
93
|
return (_jsx(CarouselContext.Provider, { value: {
|
|
66
94
|
carouselRef,
|
|
67
95
|
api,
|
|
@@ -71,7 +99,7 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
|
|
|
71
99
|
scrollNext,
|
|
72
100
|
canScrollPrev,
|
|
73
101
|
canScrollNext,
|
|
74
|
-
}, children: _jsx("div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
|
|
102
|
+
}, children: _jsx("div", { ref: rootRef, onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
|
|
75
103
|
}
|
|
76
104
|
function CarouselContent({ className, ...props }) {
|
|
77
105
|
const { carouselRef, orientation } = useCarousel();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,MAAM,EAAC,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAC,SAAS,EAAC,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAC,EAAE,EAAC,MAAM,IAAI,CAAC;AACtB,OAAO,gBAAgB,EAAE,EAA2B,MAAM,sBAAsB,CAAC;AACjF,OAAO,EAAC,eAAe,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,12 +17,17 @@ import type * as React from "react";
|
|
|
17
17
|
*/
|
|
18
18
|
interface HeroProps extends Omit<React.ComponentProps<"section">, "children"> {
|
|
19
19
|
children?: React.ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* `center` (default): one centered column. `split`: from `lg`, a `HeroBody` on the left and a
|
|
22
|
+
* `HeroShowcase` on the right; below `lg` it falls back to the centered column and hides the showcase.
|
|
23
|
+
*/
|
|
24
|
+
layout?: "center" | "split";
|
|
20
25
|
/** Replaces the dot grid behind the content. `null` for none. */
|
|
21
26
|
background?: React.ReactNode;
|
|
22
27
|
/** Classes for the centered content column. */
|
|
23
28
|
contentClassName?: string;
|
|
24
29
|
}
|
|
25
|
-
declare function Hero({ className, contentClassName, background, children, ...props }: HeroProps): React.JSX.Element;
|
|
30
|
+
declare function Hero({ className, contentClassName, background, layout, children, ...props }: HeroProps): React.JSX.Element;
|
|
26
31
|
/** The brand mark or an illustration above the title. */
|
|
27
32
|
declare function HeroMedia({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
28
33
|
/** Badges above the title: version, status. */
|
|
@@ -35,5 +40,12 @@ declare function HeroDescription({ className, render, ...props }: useRender.Comp
|
|
|
35
40
|
declare function HeroActions({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
36
41
|
/** Under the actions: an install command, a swatch strip. */
|
|
37
42
|
declare function HeroFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
38
|
-
|
|
43
|
+
/** The text column of a split hero: media, eyebrow, title, description, actions, footer. */
|
|
44
|
+
declare function HeroBody({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
45
|
+
/**
|
|
46
|
+
* The right column of a split hero: a carousel, a demo, a screenshot. Hidden below `lg`, where the hero
|
|
47
|
+
* is one centered column; give it a fixed height so heroes across the suite line up.
|
|
48
|
+
*/
|
|
49
|
+
declare function HeroShowcase({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
50
|
+
export { Hero, HeroActions, HeroBody, HeroDescription, HeroEyebrow, HeroFooter, HeroMedia, HeroShowcase, HeroTitle };
|
|
39
51
|
//# sourceMappingURL=hero.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AAEpD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;;;;;;;;;;;GAcG;AACH,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,iBAAS,IAAI,CAAC,EAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AAEpD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;;;;;;;;;;;GAcG;AACH,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,iEAAiE;IACjE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,iBAAS,IAAI,CAAC,EAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,qBAoBxG;AAcD,yDAAyD;AACzD,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,0EAgBhF;AAED,+CAA+C;AAC/C,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,0EAelF;AAED,kEAAkE;AAClE,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,0EAiB/E;AAED,4DAA4D;AAC5D,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,0EAUpF;AAED,0FAA0F;AAC1F,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,0EAelF;AAED,6DAA6D;AAC7D,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,0EAejF;AAED,4FAA4F;AAC5F,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,0EAe/E;AAED;;;GAGG;AACH,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,0EAOnF;AAED,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAC,CAAC"}
|
package/dist/components/hero.js
CHANGED
|
@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
4
4
|
import { useRender } from "@base-ui/react/use-render";
|
|
5
5
|
import { cn } from "cn";
|
|
6
|
-
function Hero({ className, contentClassName, background, children, ...props }) {
|
|
7
|
-
return (_jsxs("section", { "data-slot": "hero", className: cn("relative isolate overflow-hidden border-b border-border bg-muted/40", className), ...props, children: [background === undefined ? _jsx(HeroDots, {}) : background, _jsx("div", { className: cn("relative mx-auto flex w-full max-w-(--kk-site-width) flex-col items-center gap-5 px-4 py-10 text-center md:px-6 md:py-14", contentClassName), children: children })] }));
|
|
6
|
+
function Hero({ className, contentClassName, background, layout = "center", children, ...props }) {
|
|
7
|
+
return (_jsxs("section", { "data-slot": "hero", "data-layout": layout, className: cn("group/hero relative isolate overflow-hidden border-b border-border bg-muted/40", className), ...props, children: [background === undefined ? _jsx(HeroDots, {}) : background, _jsx("div", { className: cn("relative mx-auto flex w-full max-w-(--kk-site-width) flex-col items-center gap-5 px-4 py-10 text-center md:px-6 md:py-14", layout === "split" && "lg:grid lg:grid-cols-2 lg:gap-12 lg:text-left", contentClassName), children: children })] }));
|
|
8
8
|
}
|
|
9
9
|
/** The default backdrop: a faint 16px dot grid (12% foreground, so high contrast's bright borders don't
|
|
10
10
|
* shout behind the title), masked to fade toward the edges. */
|
|
@@ -15,7 +15,9 @@ function HeroDots() {
|
|
|
15
15
|
function HeroMedia({ className, render, ...props }) {
|
|
16
16
|
return useRender({
|
|
17
17
|
defaultTagName: "div",
|
|
18
|
-
props: mergeProps({
|
|
18
|
+
props: mergeProps({
|
|
19
|
+
className: cn("flex items-center justify-center [&_svg]:shrink-0", "lg:group-data-[layout=split]/hero:justify-start", className),
|
|
20
|
+
}, props),
|
|
19
21
|
render,
|
|
20
22
|
state: { slot: "hero-media" },
|
|
21
23
|
});
|
|
@@ -24,7 +26,9 @@ function HeroMedia({ className, render, ...props }) {
|
|
|
24
26
|
function HeroEyebrow({ className, render, ...props }) {
|
|
25
27
|
return useRender({
|
|
26
28
|
defaultTagName: "div",
|
|
27
|
-
props: mergeProps({
|
|
29
|
+
props: mergeProps({
|
|
30
|
+
className: cn("flex flex-wrap items-center justify-center gap-2 lg:group-data-[layout=split]/hero:justify-start", className),
|
|
31
|
+
}, props),
|
|
28
32
|
render,
|
|
29
33
|
state: { slot: "hero-eyebrow" },
|
|
30
34
|
});
|
|
@@ -34,7 +38,9 @@ function HeroTitle({ className, render, ...props }) {
|
|
|
34
38
|
return useRender({
|
|
35
39
|
defaultTagName: "h1",
|
|
36
40
|
props: mergeProps({
|
|
37
|
-
className: cn("max-w-4xl font-heading text-4xl font-semibold tracking-tight text-balance md:text-5xl xl:text-6xl",
|
|
41
|
+
className: cn("max-w-4xl font-heading text-4xl font-semibold tracking-tight text-balance md:text-5xl xl:text-6xl",
|
|
42
|
+
// half the width beside a showcase: one step smaller
|
|
43
|
+
"xl:group-data-[layout=split]/hero:text-5xl", className),
|
|
38
44
|
}, props),
|
|
39
45
|
render,
|
|
40
46
|
state: { slot: "hero-title" },
|
|
@@ -53,7 +59,9 @@ function HeroDescription({ className, render, ...props }) {
|
|
|
53
59
|
function HeroActions({ className, render, ...props }) {
|
|
54
60
|
return useRender({
|
|
55
61
|
defaultTagName: "div",
|
|
56
|
-
props: mergeProps({
|
|
62
|
+
props: mergeProps({
|
|
63
|
+
className: cn("flex flex-wrap items-center justify-center gap-2 lg:group-data-[layout=split]/hero:justify-start", className),
|
|
64
|
+
}, props),
|
|
57
65
|
render,
|
|
58
66
|
state: { slot: "hero-actions" },
|
|
59
67
|
});
|
|
@@ -62,10 +70,35 @@ function HeroActions({ className, render, ...props }) {
|
|
|
62
70
|
function HeroFooter({ className, render, ...props }) {
|
|
63
71
|
return useRender({
|
|
64
72
|
defaultTagName: "div",
|
|
65
|
-
props: mergeProps({
|
|
73
|
+
props: mergeProps({
|
|
74
|
+
className: cn("flex w-full flex-col items-center gap-3 lg:group-data-[layout=split]/hero:items-start", className),
|
|
75
|
+
}, props),
|
|
66
76
|
render,
|
|
67
77
|
state: { slot: "hero-footer" },
|
|
68
78
|
});
|
|
69
79
|
}
|
|
70
|
-
|
|
80
|
+
/** The text column of a split hero: media, eyebrow, title, description, actions, footer. */
|
|
81
|
+
function HeroBody({ className, render, ...props }) {
|
|
82
|
+
return useRender({
|
|
83
|
+
defaultTagName: "div",
|
|
84
|
+
props: mergeProps({
|
|
85
|
+
className: cn("flex w-full min-w-0 flex-col items-center gap-5 lg:group-data-[layout=split]/hero:items-start", className),
|
|
86
|
+
}, props),
|
|
87
|
+
render,
|
|
88
|
+
state: { slot: "hero-body" },
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* The right column of a split hero: a carousel, a demo, a screenshot. Hidden below `lg`, where the hero
|
|
93
|
+
* is one centered column; give it a fixed height so heroes across the suite line up.
|
|
94
|
+
*/
|
|
95
|
+
function HeroShowcase({ className, render, ...props }) {
|
|
96
|
+
return useRender({
|
|
97
|
+
defaultTagName: "div",
|
|
98
|
+
props: mergeProps({ className: cn("hidden w-full min-w-0 text-left lg:block", className) }, props),
|
|
99
|
+
render,
|
|
100
|
+
state: { slot: "hero-showcase" },
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
export { Hero, HeroActions, HeroBody, HeroDescription, HeroEyebrow, HeroFooter, HeroMedia, HeroShowcase, HeroTitle };
|
|
71
104
|
//# sourceMappingURL=hero.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,UAAU,EAAC,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAC,EAAE,EAAC,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../src/components/hero.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -17,6 +17,11 @@ type CarouselProps = {
|
|
|
17
17
|
plugins?: CarouselPlugin;
|
|
18
18
|
orientation?: "horizontal" | "vertical";
|
|
19
19
|
setApi?: (api: CarouselApi) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Advance every `autoplay` ms, wrapping to the first slide. Pauses while the pointer is over the
|
|
22
|
+
* carousel or focus is inside it, while the tab is hidden, and never runs under reduced motion.
|
|
23
|
+
*/
|
|
24
|
+
autoplay?: number;
|
|
20
25
|
};
|
|
21
26
|
|
|
22
27
|
type CarouselContextProps = {
|
|
@@ -45,6 +50,7 @@ function Carousel({
|
|
|
45
50
|
opts,
|
|
46
51
|
setApi,
|
|
47
52
|
plugins,
|
|
53
|
+
autoplay,
|
|
48
54
|
className,
|
|
49
55
|
children,
|
|
50
56
|
...props
|
|
@@ -109,6 +115,34 @@ function Carousel({
|
|
|
109
115
|
};
|
|
110
116
|
}, [api, onSelect]);
|
|
111
117
|
|
|
118
|
+
const rootRef = React.useRef<HTMLDivElement>(null);
|
|
119
|
+
React.useEffect(() => {
|
|
120
|
+
const root = rootRef.current;
|
|
121
|
+
if (!api || !autoplay || !root || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
let hovered = false;
|
|
125
|
+
const onEnter = () => (hovered = true);
|
|
126
|
+
const onLeave = () => (hovered = false);
|
|
127
|
+
root.addEventListener("pointerenter", onEnter);
|
|
128
|
+
root.addEventListener("pointerleave", onLeave);
|
|
129
|
+
const timer = window.setInterval(() => {
|
|
130
|
+
if (hovered || root.contains(document.activeElement) || document.hidden) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
if (api.canScrollNext()) {
|
|
134
|
+
api.scrollNext();
|
|
135
|
+
} else {
|
|
136
|
+
api.scrollTo(0);
|
|
137
|
+
}
|
|
138
|
+
}, autoplay);
|
|
139
|
+
return () => {
|
|
140
|
+
window.clearInterval(timer);
|
|
141
|
+
root.removeEventListener("pointerenter", onEnter);
|
|
142
|
+
root.removeEventListener("pointerleave", onLeave);
|
|
143
|
+
};
|
|
144
|
+
}, [api, autoplay]);
|
|
145
|
+
|
|
112
146
|
return (
|
|
113
147
|
<CarouselContext.Provider
|
|
114
148
|
value={{
|
|
@@ -123,6 +157,7 @@ function Carousel({
|
|
|
123
157
|
}}
|
|
124
158
|
>
|
|
125
159
|
<div
|
|
160
|
+
ref={rootRef}
|
|
126
161
|
onKeyDownCapture={handleKeyDown}
|
|
127
162
|
className={cn("relative", className)}
|
|
128
163
|
role="region"
|
package/src/components/hero.tsx
CHANGED
|
@@ -22,23 +22,30 @@ import type * as React from "react";
|
|
|
22
22
|
*/
|
|
23
23
|
interface HeroProps extends Omit<React.ComponentProps<"section">, "children"> {
|
|
24
24
|
children?: React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* `center` (default): one centered column. `split`: from `lg`, a `HeroBody` on the left and a
|
|
27
|
+
* `HeroShowcase` on the right; below `lg` it falls back to the centered column and hides the showcase.
|
|
28
|
+
*/
|
|
29
|
+
layout?: "center" | "split";
|
|
25
30
|
/** Replaces the dot grid behind the content. `null` for none. */
|
|
26
31
|
background?: React.ReactNode;
|
|
27
32
|
/** Classes for the centered content column. */
|
|
28
33
|
contentClassName?: string;
|
|
29
34
|
}
|
|
30
35
|
|
|
31
|
-
function Hero({className, contentClassName, background, children, ...props}: HeroProps) {
|
|
36
|
+
function Hero({className, contentClassName, background, layout = "center", children, ...props}: HeroProps) {
|
|
32
37
|
return (
|
|
33
38
|
<section
|
|
34
39
|
data-slot="hero"
|
|
35
|
-
|
|
40
|
+
data-layout={layout}
|
|
41
|
+
className={cn("group/hero relative isolate overflow-hidden border-b border-border bg-muted/40", className)}
|
|
36
42
|
{...props}
|
|
37
43
|
>
|
|
38
44
|
{background === undefined ? <HeroDots /> : background}
|
|
39
45
|
<div
|
|
40
46
|
className={cn(
|
|
41
47
|
"relative mx-auto flex w-full max-w-(--kk-site-width) flex-col items-center gap-5 px-4 py-10 text-center md:px-6 md:py-14",
|
|
48
|
+
layout === "split" && "lg:grid lg:grid-cols-2 lg:gap-12 lg:text-left",
|
|
42
49
|
contentClassName,
|
|
43
50
|
)}
|
|
44
51
|
>
|
|
@@ -65,7 +72,13 @@ function HeroMedia({className, render, ...props}: useRender.ComponentProps<"div"
|
|
|
65
72
|
return useRender({
|
|
66
73
|
defaultTagName: "div",
|
|
67
74
|
props: mergeProps<"div">(
|
|
68
|
-
{
|
|
75
|
+
{
|
|
76
|
+
className: cn(
|
|
77
|
+
"flex items-center justify-center [&_svg]:shrink-0",
|
|
78
|
+
"lg:group-data-[layout=split]/hero:justify-start",
|
|
79
|
+
className,
|
|
80
|
+
),
|
|
81
|
+
},
|
|
69
82
|
props,
|
|
70
83
|
),
|
|
71
84
|
render,
|
|
@@ -77,7 +90,15 @@ function HeroMedia({className, render, ...props}: useRender.ComponentProps<"div"
|
|
|
77
90
|
function HeroEyebrow({className, render, ...props}: useRender.ComponentProps<"div">) {
|
|
78
91
|
return useRender({
|
|
79
92
|
defaultTagName: "div",
|
|
80
|
-
props: mergeProps<"div">(
|
|
93
|
+
props: mergeProps<"div">(
|
|
94
|
+
{
|
|
95
|
+
className: cn(
|
|
96
|
+
"flex flex-wrap items-center justify-center gap-2 lg:group-data-[layout=split]/hero:justify-start",
|
|
97
|
+
className,
|
|
98
|
+
),
|
|
99
|
+
},
|
|
100
|
+
props,
|
|
101
|
+
),
|
|
81
102
|
render,
|
|
82
103
|
state: {slot: "hero-eyebrow"},
|
|
83
104
|
});
|
|
@@ -91,6 +112,8 @@ function HeroTitle({className, render, ...props}: useRender.ComponentProps<"h1">
|
|
|
91
112
|
{
|
|
92
113
|
className: cn(
|
|
93
114
|
"max-w-4xl font-heading text-4xl font-semibold tracking-tight text-balance md:text-5xl xl:text-6xl",
|
|
115
|
+
// half the width beside a showcase: one step smaller
|
|
116
|
+
"xl:group-data-[layout=split]/hero:text-5xl",
|
|
94
117
|
className,
|
|
95
118
|
),
|
|
96
119
|
},
|
|
@@ -118,7 +141,15 @@ function HeroDescription({className, render, ...props}: useRender.ComponentProps
|
|
|
118
141
|
function HeroActions({className, render, ...props}: useRender.ComponentProps<"div">) {
|
|
119
142
|
return useRender({
|
|
120
143
|
defaultTagName: "div",
|
|
121
|
-
props: mergeProps<"div">(
|
|
144
|
+
props: mergeProps<"div">(
|
|
145
|
+
{
|
|
146
|
+
className: cn(
|
|
147
|
+
"flex flex-wrap items-center justify-center gap-2 lg:group-data-[layout=split]/hero:justify-start",
|
|
148
|
+
className,
|
|
149
|
+
),
|
|
150
|
+
},
|
|
151
|
+
props,
|
|
152
|
+
),
|
|
122
153
|
render,
|
|
123
154
|
state: {slot: "hero-actions"},
|
|
124
155
|
});
|
|
@@ -128,10 +159,49 @@ function HeroActions({className, render, ...props}: useRender.ComponentProps<"di
|
|
|
128
159
|
function HeroFooter({className, render, ...props}: useRender.ComponentProps<"div">) {
|
|
129
160
|
return useRender({
|
|
130
161
|
defaultTagName: "div",
|
|
131
|
-
props: mergeProps<"div">(
|
|
162
|
+
props: mergeProps<"div">(
|
|
163
|
+
{
|
|
164
|
+
className: cn(
|
|
165
|
+
"flex w-full flex-col items-center gap-3 lg:group-data-[layout=split]/hero:items-start",
|
|
166
|
+
className,
|
|
167
|
+
),
|
|
168
|
+
},
|
|
169
|
+
props,
|
|
170
|
+
),
|
|
132
171
|
render,
|
|
133
172
|
state: {slot: "hero-footer"},
|
|
134
173
|
});
|
|
135
174
|
}
|
|
136
175
|
|
|
137
|
-
|
|
176
|
+
/** The text column of a split hero: media, eyebrow, title, description, actions, footer. */
|
|
177
|
+
function HeroBody({className, render, ...props}: useRender.ComponentProps<"div">) {
|
|
178
|
+
return useRender({
|
|
179
|
+
defaultTagName: "div",
|
|
180
|
+
props: mergeProps<"div">(
|
|
181
|
+
{
|
|
182
|
+
className: cn(
|
|
183
|
+
"flex w-full min-w-0 flex-col items-center gap-5 lg:group-data-[layout=split]/hero:items-start",
|
|
184
|
+
className,
|
|
185
|
+
),
|
|
186
|
+
},
|
|
187
|
+
props,
|
|
188
|
+
),
|
|
189
|
+
render,
|
|
190
|
+
state: {slot: "hero-body"},
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* The right column of a split hero: a carousel, a demo, a screenshot. Hidden below `lg`, where the hero
|
|
196
|
+
* is one centered column; give it a fixed height so heroes across the suite line up.
|
|
197
|
+
*/
|
|
198
|
+
function HeroShowcase({className, render, ...props}: useRender.ComponentProps<"div">) {
|
|
199
|
+
return useRender({
|
|
200
|
+
defaultTagName: "div",
|
|
201
|
+
props: mergeProps<"div">({className: cn("hidden w-full min-w-0 text-left lg:block", className)}, props),
|
|
202
|
+
render,
|
|
203
|
+
state: {slot: "hero-showcase"},
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
export {Hero, HeroActions, HeroBody, HeroDescription, HeroEyebrow, HeroFooter, HeroMedia, HeroShowcase, HeroTitle};
|