@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/showcase/FeatureRow.js

@@ -0,0 +1,91 @@
+import { Eyebrow } from "../layout/PageSection.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+// src/showcase/FeatureRow.tsx
+/** A feature told in copy on one side and shown on a device on the other. */
+function FeatureRow({ eyebrow, title, children, points, media, reverse, wide, badge, mediaWidth = "measure", largeMedia }) {
+	const id = useId();
+	if (wide) return /* @__PURE__ */ jsxs("article", {
+		"aria-labelledby": id,
+		className: "flex flex-col gap-12",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "grid gap-x-16 gap-y-4 lg:grid-cols-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4",
+				children: [
+					eyebrow ? /* @__PURE__ */ jsx(Eyebrow, { children: eyebrow }) : null,
+					/* @__PURE__ */ jsx(Heading, {
+						id,
+						as: "h3",
+						variant: "feature",
+						children: title
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						variant: "prose",
+						tone: "muted",
+						children
+					})
+				]
+			}), points?.length ? /* @__PURE__ */ jsx("div", {
+				className: "lg:pt-9",
+				children: /* @__PURE__ */ jsx(PointList, { points })
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			className: `mx-auto w-full ${mediaWidth === "full" ? "" : "max-w-[780px]"}`,
+			children: media
+		})]
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		"aria-labelledby": id,
+		className: `grid items-center gap-8 sm:gap-12 lg:gap-16 ${reverse ? largeMedia ? "lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]" : "lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]" : largeMedia ? "lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]" : "lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]"}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `flex flex-col gap-4 max-sm:[&>h3]:mb-1 ${reverse ? "lg:order-2" : ""}`,
+			children: [
+				eyebrow ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx(Eyebrow, { children: eyebrow }), badge]
+				}) : null,
+				/* @__PURE__ */ jsx(Heading, {
+					id,
+					as: "h3",
+					variant: "feature",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					variant: "prose",
+					tone: "muted",
+					children
+				}),
+				points?.length ? /* @__PURE__ */ jsx(PointList, { points }) : null
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: reverse ? "lg:order-1" : "",
+			children: media
+		})]
+	});
+}
+/** Checked lines under a feature. */
+function PointList({ points }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "mt-2 flex flex-col gap-2.5",
+		children: points.map((point) => /* @__PURE__ */ jsxs("li", {
+			className: "text-base-800 flex gap-2.5 text-[15px] leading-6",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "bg-primary/12 text-primary dark:bg-primary/25 mt-[3px] inline-flex size-[18px] shrink-0 items-center justify-center rounded-full dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)] [&>svg]:size-3",
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			}), point]
+		}, point))
+	});
+}
+/** A stack of feature rows with room between them. */
+function FeatureRows({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-16 sm:gap-24",
+		children
+	});
+}
+export { FeatureRow, FeatureRows, PointList };
+
+//# sourceMappingURL=FeatureRow.js.map

package/dist/showcase/FeatureRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureRow.js","names":[],"sources":["../../src/showcase/FeatureRow.tsx"],"sourcesContent":["import { CheckIcon } from 'lucide-react';\nimport { type ReactNode, useId } from 'react';\n\nimport { Eyebrow } from '../layout/PageSection';\nimport { Heading, Text } from '../typography/Typography';\n\ninterface FeatureRowProps {\n    eyebrow?: string;\n    title: string;\n    children: ReactNode;\n    points?: readonly string[];\n    media: ReactNode;\n    /** Puts the media on the left. */\n    reverse?: boolean;\n    /** Copy in two columns above media that spans the full width, for detailed screenshots. */\n    wide?: boolean;\n    /** A status chip beside the eyebrow. */\n    badge?: ReactNode;\n    /** How wide a wide row's media runs: the whole column, or a centred, readable measure. */\n    mediaWidth?: 'full' | 'measure';\n    /** Gives the media two-thirds of a side-by-side row instead of seven twelfths. */\n    largeMedia?: boolean;\n}\n\n/** A feature told in copy on one side and shown on a device on the other. */\nexport function FeatureRow({\n    eyebrow,\n    title,\n    children,\n    points,\n    media,\n    reverse,\n    wide,\n    badge,\n    mediaWidth = 'measure',\n    largeMedia,\n}: FeatureRowProps) {\n    const id = useId();\n\n    if (wide)\n        return (\n            <article aria-labelledby={id} className=\"flex flex-col gap-12\">\n                <div className=\"grid gap-x-16 gap-y-4 lg:grid-cols-2\">\n                    <div className=\"flex flex-col gap-4\">\n                        {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}\n                        <Heading id={id} as=\"h3\" variant=\"feature\">\n                            {title}\n                        </Heading>\n                        <Text variant=\"prose\" tone=\"muted\">\n                            {children}\n                        </Text>\n                    </div>\n                    {points?.length ? (\n                        <div className=\"lg:pt-9\">\n                            <PointList points={points} />\n                        </div>\n                    ) : null}\n                </div>\n                <div className={`mx-auto w-full ${mediaWidth === 'full' ? '' : 'max-w-[780px]'}`}>{media}</div>\n            </article>\n        );\n\n    return (\n        <article\n            aria-labelledby={id}\n            className={`grid items-center gap-8 sm:gap-12 lg:gap-16 ${reverse ? (largeMedia ? 'lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]' : 'lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]') : largeMedia ? 'lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]' : 'lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]'}`}\n        >\n            <div className={`flex flex-col gap-4 max-sm:[&>h3]:mb-1 ${reverse ? 'lg:order-2' : ''}`}>\n                {eyebrow ? (\n                    <div className=\"flex items-center gap-3\">\n                        <Eyebrow>{eyebrow}</Eyebrow>\n                        {badge}\n                    </div>\n                ) : null}\n                <Heading id={id} as=\"h3\" variant=\"feature\">\n                    {title}\n                </Heading>\n                <Text variant=\"prose\" tone=\"muted\">\n                    {children}\n                </Text>\n                {points?.length ? <PointList points={points} /> : null}\n            </div>\n            <div className={reverse ? 'lg:order-1' : ''}>{media}</div>\n        </article>\n    );\n}\n\n/** Checked lines under a feature. */\nexport function PointList({ points }: { points: readonly string[] }) {\n    return (\n        <ul className=\"mt-2 flex flex-col gap-2.5\">\n            {points.map((point) => (\n                <li key={point} className=\"text-base-800 flex gap-2.5 text-[15px] leading-6\">\n                    <span className=\"bg-primary/12 text-primary dark:bg-primary/25 mt-[3px] inline-flex size-[18px] shrink-0 items-center justify-center rounded-full dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)] [&>svg]:size-3\">\n                        <CheckIcon />\n                    </span>\n                    {point}\n                </li>\n            ))}\n        </ul>\n    );\n}\n\n/** A stack of feature rows with room between them. */\nexport function FeatureRows({ children }: { children: ReactNode }) {\n    return <div className=\"flex flex-col gap-16 sm:gap-24\">{children}</div>;\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,WAAW,EACvB,SACA,OACA,UACA,QACA,OACA,SACA,MACA,OACA,aAAa,WACb,cACgB;CAChB,MAAM,KAAK,MAAM;CAEjB,IAAI,MACA,OACI,qBAAC,WAAD;EAAS,mBAAiB;EAAI,WAAU;EAAxC,UAAA,CACI,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACK,UAAU,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,IAAI;KAC1C,oBAAC,SAAD;MAAa;MAAI,IAAG;MAAK,SAAQ;MAC5B,UAAA;KACI,CAAA;KACT,oBAAC,MAAD;MAAM,SAAQ;MAAQ,MAAK;MACtB;KACC,CAAA;IACL;GACJ,CAAA,GAAA,QAAQ,SACL,oBAAC,OAAD;IAAK,WAAU;IACX,UAAA,oBAAC,WAAD,EAAmB,OAAS,CAAA;GAC3B,CAAA,IACL,IACH;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW,kBAAkB,eAAe,SAAS,KAAK;GAAoB,UAAA;EAAW,CAAA,CACzF;;CAGjB,OACI,qBAAC,WAAD;EACI,mBAAiB;EACjB,WAAW,+CAA+C,UAAW,aAAa,+CAA+C,+CAAgD,aAAa,+CAA+C;EAFjP,UAAA,CAII,qBAAC,OAAD;GAAK,WAAW,0CAA0C,UAAU,eAAe;GAAnF,UAAA;IACK,UACG,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACI,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,GAC1B,KACA;IACL,CAAA,IAAA;IACJ,oBAAC,SAAD;KAAa;KAAI,IAAG;KAAK,SAAQ;KAC5B,UAAA;IACI,CAAA;IACT,oBAAC,MAAD;KAAM,SAAQ;KAAQ,MAAK;KACtB;IACC,CAAA;IACL,QAAQ,SAAS,oBAAC,WAAD,EAAmB,OAAS,CAAA,IAAI;GACjD;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW,UAAU,eAAe;GAAK,UAAA;EAAW,CAAA,CACpD;;AAEjB;;AAGA,SAAgB,UAAU,EAAE,UAAyC;CACjE,OACI,oBAAC,MAAD;EAAI,WAAU;EACT,UAAA,OAAO,KAAK,UACT,qBAAC,MAAD;GAAgB,WAAU;GAA1B,UAAA,CACI,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,WAAD,CAAY,CAAA;GACV,CAAA,GACL,KACD;EALK,GAAA,KAKL,CACP;CACD,CAAA;AAEZ;;AAGA,SAAgB,YAAY,EAAE,YAAqC;CAC/D,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAkC;CAAc,CAAA;AAC1E"}

package/dist/showcase/Hero.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+interface HeroProps {
+  announcement?: ReactNode;
+  title: ReactNode;
+  lead: ReactNode;
+  actions?: ReactNode;
+  note?: ReactNode;
+  visual?: ReactNode;
+  /** Tints the glow behind the hero with a product hue. */
+  hue?: number;
+}
+/** A page's opening: a centred statement over the brand glow, then the product on its devices. */
+export declare function Hero({ announcement, title, lead, actions, note, visual, hue }: HeroProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Hero.d.ts.map

package/dist/showcase/Hero.js

@@ -0,0 +1,73 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { Backdrop } from "./Stage.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/Hero.tsx
+/** A page's opening: a centred statement over the brand glow, then the product on its devices. */
+function Hero({ announcement, title, lead, actions, note, visual, hue }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "relative isolate",
+		children: [
+			/* @__PURE__ */ jsx(Backdrop, { hue }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mx-auto flex w-full max-w-[1200px] flex-col items-center px-5 pt-8 text-center sm:px-8 sm:pt-16 lg:pt-16",
+				children: [
+					announcement ? /* @__PURE__ */ jsx(Intro, {
+						delay: 0,
+						children: announcement
+					}) : null,
+					/* @__PURE__ */ jsx(Intro, {
+						delay: 60,
+						children: /* @__PURE__ */ jsx(Heading, {
+							as: "h1",
+							variant: "display",
+							className: "mx-auto mt-5 max-w-[920px] whitespace-pre-line",
+							children: title
+						})
+					}),
+					/* @__PURE__ */ jsx(Intro, {
+						delay: 140,
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: "lead",
+							tone: "muted",
+							className: "mx-auto mt-5 max-w-[640px]",
+							children: lead
+						})
+					}),
+					actions ? /* @__PURE__ */ jsx(Intro, {
+						delay: 220,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:flex-wrap max-sm:[&>a]:w-full max-sm:[&>a]:max-w-[320px]",
+							children: actions
+						})
+					}) : null,
+					note ? /* @__PURE__ */ jsx(Intro, {
+						delay: 280,
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: "body",
+							tone: "muted",
+							className: "mx-auto mt-4 max-w-[560px] text-balance dark:text-[#96969f]",
+							children: note
+						})
+					}) : null
+				]
+			}),
+			visual ? /* @__PURE__ */ jsx("div", {
+				className: "mx-auto w-full max-w-[1200px] px-5 pt-7 pb-6 sm:px-8 sm:pt-12 sm:pb-28",
+				children: /* @__PURE__ */ jsx(Intro, {
+					delay: 320,
+					children: visual
+				})
+			}) : /* @__PURE__ */ jsx("div", { className: "pb-16 sm:pb-24" })
+		]
+	});
+}
+function Intro({ children, delay }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "lar-intro w-full",
+		style: { "--lar-intro-delay": `${delay}ms` },
+		children
+	});
+}
+export { Hero };
+
+//# sourceMappingURL=Hero.js.map

package/dist/showcase/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","names":[],"sources":["../../src/showcase/Hero.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nimport { Heading, Text } from '../typography/Typography';\nimport { Backdrop } from './Stage';\n\ninterface HeroProps {\n    announcement?: ReactNode;\n    title: ReactNode;\n    lead: ReactNode;\n    actions?: ReactNode;\n    note?: ReactNode;\n    visual?: ReactNode;\n    /** Tints the glow behind the hero with a product hue. */\n    hue?: number;\n}\n\n/** A page's opening: a centred statement over the brand glow, then the product on its devices. */\nexport function Hero({ announcement, title, lead, actions, note, visual, hue }: HeroProps) {\n    return (\n        <section className=\"relative isolate\">\n            <Backdrop hue={hue} />\n            <div className=\"mx-auto flex w-full max-w-[1200px] flex-col items-center px-5 pt-8 text-center sm:px-8 sm:pt-16 lg:pt-16\">\n                {announcement ? <Intro delay={0}>{announcement}</Intro> : null}\n                <Intro delay={60}>\n                    <Heading as=\"h1\" variant=\"display\" className=\"mx-auto mt-5 max-w-[920px] whitespace-pre-line\">\n                        {title}\n                    </Heading>\n                </Intro>\n                <Intro delay={140}>\n                    <Text variant=\"lead\" tone=\"muted\" className=\"mx-auto mt-5 max-w-[640px]\">\n                        {lead}\n                    </Text>\n                </Intro>\n                {actions ? (\n                    <Intro delay={220}>\n                        <div className=\"mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:flex-wrap max-sm:[&>a]:w-full max-sm:[&>a]:max-w-[320px]\">\n                            {actions}\n                        </div>\n                    </Intro>\n                ) : null}\n                {note ? (\n                    <Intro delay={280}>\n                        <Text\n                            variant=\"body\"\n                            tone=\"muted\"\n                            className=\"mx-auto mt-4 max-w-[560px] text-balance dark:text-[#96969f]\"\n                        >\n                            {note}\n                        </Text>\n                    </Intro>\n                ) : null}\n            </div>\n            {visual ? (\n                <div className=\"mx-auto w-full max-w-[1200px] px-5 pt-7 pb-6 sm:px-8 sm:pt-12 sm:pb-28\">\n                    <Intro delay={320}>{visual}</Intro>\n                </div>\n            ) : (\n                <div className=\"pb-16 sm:pb-24\" />\n            )}\n        </section>\n    );\n}\n\nfunction Intro({ children, delay }: { children: ReactNode; delay: number }) {\n    return (\n        <div className=\"lar-intro w-full\" style={{ '--lar-intro-delay': `${delay}ms` } as CSSProperties}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAiBA,SAAgB,KAAK,EAAE,cAAc,OAAO,MAAM,SAAS,MAAM,QAAQ,OAAkB;CACvF,OACI,qBAAC,WAAD;EAAS,WAAU;EAAnB,UAAA;GACI,oBAAC,UAAD,EAAe,IAAM,CAAA;GACrB,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACK,eAAe,oBAAC,OAAD;MAAO,OAAO;MAAI,UAAA;KAAoB,CAAA,IAAI;KAC1D,oBAAC,OAAD;MAAO,OAAO;MACV,UAAA,oBAAC,SAAD;OAAS,IAAG;OAAK,SAAQ;OAAU,WAAU;OACxC,UAAA;MACI,CAAA;KACN,CAAA;KACP,oBAAC,OAAD;MAAO,OAAO;MACV,UAAA,oBAAC,MAAD;OAAM,SAAQ;OAAO,MAAK;OAAQ,WAAU;OACvC,UAAA;MACC,CAAA;KACH,CAAA;KACN,UACG,oBAAC,OAAD;MAAO,OAAO;MACV,UAAA,oBAAC,OAAD;OAAK,WAAU;OACV,UAAA;MACA,CAAA;KACF,CAAA,IACP;KACH,OACG,oBAAC,OAAD;MAAO,OAAO;MACV,UAAA,oBAAC,MAAD;OACI,SAAQ;OACR,MAAK;OACL,WAAU;OAET,UAAA;MACC,CAAA;KACH,CAAA,IACP;IACH;;GACJ,SACG,oBAAC,OAAD;IAAK,WAAU;IACX,UAAA,oBAAC,OAAD;KAAO,OAAO;KAAM,UAAA;IAAc,CAAA;GACjC,CAAA,IAEL,oBAAC,OAAD,EAAK,WAAU,iBAAkB,CAAA;EAEhC;;AAEjB;AAEA,SAAS,MAAM,EAAE,UAAU,SAAiD;CACxE,OACI,oBAAC,OAAD;EAAK,WAAU;EAAmB,OAAO,EAAE,qBAAqB,GAAG,MAAM,IAAI;EACxE;CACA,CAAA;AAEb"}

package/dist/showcase/PhotoSearchConcept.d.ts

@@ -0,0 +1,14 @@
+export interface ConceptPhoto {
+  src: string;
+  alt: string;
+  /** Whether the photo matches the search shown above the grid. */
+  match: boolean;
+}
+/** An illustration, not a screenshot: a search over your own photo library, with the matches lit. Its label says
+ *  it is a concept. */
+export declare function PhotoSearchConcept({ query, photos, label }: {
+  query: string;
+  photos: readonly ConceptPhoto[];
+  label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PhotoSearchConcept.d.ts.map

package/dist/showcase/PhotoSearchConcept.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+// src/showcase/PhotoSearchConcept.tsx
+/** An illustration, not a screenshot: a search over your own photo library, with the matches lit. Its label says
+*  it is a concept. */
+function PhotoSearchConcept({ query, photos, label }) {
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-base-300 bg-base-100/80 text-base-content dark:bg-base-200/70 [&>svg]:text-base-600 flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm [&>svg]:size-4",
+				children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: query
+				})]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "grid grid-cols-3 gap-1.5",
+				children: photos.map((photo) => /* @__PURE__ */ jsxs("li", {
+					className: "relative overflow-hidden rounded-md",
+					children: [/* @__PURE__ */ jsx("img", {
+						src: photo.src,
+						alt: photo.alt,
+						loading: "lazy",
+						width: 320,
+						height: 320,
+						className: `aspect-square w-full object-cover transition-opacity ${photo.match ? "" : "opacity-35"}`
+					}), photo.match ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "absolute inset-0 rounded-md ring-2 ring-white/80 ring-inset"
+					}) : null]
+				}, photo.src))
+			}),
+			/* @__PURE__ */ jsx("figcaption", {
+				className: "text-base-700 text-xs",
+				children: label
+			})
+		]
+	});
+}
+export { PhotoSearchConcept };
+
+//# sourceMappingURL=PhotoSearchConcept.js.map

package/dist/showcase/PhotoSearchConcept.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoSearchConcept.js","names":[],"sources":["../../src/showcase/PhotoSearchConcept.tsx"],"sourcesContent":["import { SearchIcon } from 'lucide-react';\n\nexport interface ConceptPhoto {\n    src: string;\n    alt: string;\n    /** Whether the photo matches the search shown above the grid. */\n    match: boolean;\n}\n\n/** An illustration, not a screenshot: a search over your own photo library, with the matches lit. Its label says\n *  it is a concept. */\nexport function PhotoSearchConcept({\n    query,\n    photos,\n    label,\n}: {\n    query: string;\n    photos: readonly ConceptPhoto[];\n    label: string;\n}) {\n    return (\n        <figure className=\"flex flex-col gap-3\">\n            <div className=\"border-base-300 bg-base-100/80 text-base-content dark:bg-base-200/70 [&>svg]:text-base-600 flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm [&>svg]:size-4\">\n                <SearchIcon />\n                <span className=\"truncate\">{query}</span>\n            </div>\n            <ul className=\"grid grid-cols-3 gap-1.5\">\n                {photos.map((photo) => (\n                    <li key={photo.src} className=\"relative overflow-hidden rounded-md\">\n                        <img\n                            src={photo.src}\n                            alt={photo.alt}\n                            loading=\"lazy\"\n                            width={320}\n                            height={320}\n                            className={`aspect-square w-full object-cover transition-opacity ${photo.match ? '' : 'opacity-35'}`}\n                        />\n                        {photo.match ? (\n                            <span\n                                aria-hidden=\"true\"\n                                className=\"absolute inset-0 rounded-md ring-2 ring-white/80 ring-inset\"\n                            />\n                        ) : null}\n                    </li>\n                ))}\n            </ul>\n            <figcaption className=\"text-base-700 text-xs\">{label}</figcaption>\n        </figure>\n    );\n}\n"],"mappings":";;;;;AAWA,SAAgB,mBAAmB,EAC/B,OACA,QACA,SAKD;CACC,OACI,qBAAC,UAAD;EAAQ,WAAU;EAAlB,UAAA;GACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA;IAAY,CAAA,CACvC;;GACL,oBAAC,MAAD;IAAI,WAAU;IACT,UAAA,OAAO,KAAK,UACT,qBAAC,MAAD;KAAoB,WAAU;KAA9B,UAAA,CACI,oBAAC,OAAD;MACI,KAAK,MAAM;MACX,KAAK,MAAM;MACX,SAAQ;MACR,OAAO;MACP,QAAQ;MACR,WAAW,wDAAwD,MAAM,QAAQ,KAAK;KACzF,CAAA,GACA,MAAM,QACH,oBAAC,QAAD;MACI,eAAY;MACZ,WAAU;KACb,CAAA,IACD,IACJ;IAfK,GAAA,MAAM,GAeX,CACP;GACD,CAAA;GACJ,oBAAC,cAAD;IAAY,WAAU;IAAyB,UAAA;GAAkB,CAAA;EAC7D;;AAEhB"}

package/dist/showcase/Platforms.d.ts

@@ -0,0 +1,15 @@
+import { Readiness } from "./Status.js";
+import { ReactNode } from "react";
+export interface Platform {
+  name: string;
+  detail: string;
+  icon: ReactNode;
+  status: Readiness;
+  statusLabel: string;
+}
+/** Every screen Lar reaches, each with where it stands: compact rows on phones, cards on wider screens. */
+export declare function PlatformGrid({ platforms, label }: {
+  platforms: readonly Platform[];
+  label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Platforms.d.ts.map

package/dist/showcase/Platforms.js

@@ -0,0 +1,48 @@
+import { StatusPill } from "./Status.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/Platforms.tsx
+/** Every screen Lar reaches, each with where it stands: compact rows on phones, cards on wider screens. */
+function PlatformGrid({ platforms, label }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: "divide-base-300/70 border-base-300/80 bg-base-100/60 dark:bg-base-100/40 grid divide-y rounded-2xl border sm:grid-cols-2 sm:gap-3 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent lg:grid-cols-4 sm:dark:bg-transparent",
+		children: platforms.map((platform) => /* @__PURE__ */ jsxs("li", {
+			"data-status": platform.status,
+			className: "sm:border-base-300/80 sm:bg-base-100/60 sm:dark:bg-base-100/40 flex items-start gap-3 p-4 sm:flex-col sm:items-stretch sm:gap-4 sm:rounded-2xl sm:border sm:p-5 sm:data-[status=planned]:border-dashed sm:data-[status=planned]:bg-transparent",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-base-200 text-base-800 ring-base-300/70 dark:bg-base-300/60 inline-flex size-9 items-center justify-center rounded-[0.65rem] ring-1 ring-inset sm:size-10 [&>svg]:size-[18px] sm:[&>svg]:size-5",
+					children: platform.icon
+				}), /* @__PURE__ */ jsx("span", {
+					className: "hidden sm:inline-flex",
+					children: /* @__PURE__ */ jsx(StatusPill, {
+						status: platform.status,
+						children: platform.statusLabel
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:gap-1",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-base-content text-[15px] font-semibold tracking-[-0.01em]",
+						children: platform.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sm:hidden",
+						children: /* @__PURE__ */ jsx(StatusPill, {
+							status: platform.status,
+							children: platform.statusLabel
+						})
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-base-700 text-sm leading-5",
+					children: platform.detail
+				})]
+			})]
+		}, platform.name))
+	});
+}
+export { PlatformGrid };
+
+//# sourceMappingURL=Platforms.js.map

package/dist/showcase/Platforms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Platforms.js","names":[],"sources":["../../src/showcase/Platforms.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { type Readiness, StatusPill } from './Status';\n\nexport interface Platform {\n    name: string;\n    detail: string;\n    icon: ReactNode;\n    status: Readiness;\n    statusLabel: string;\n}\n\n/** Every screen Lar reaches, each with where it stands: compact rows on phones, cards on wider screens. */\nexport function PlatformGrid({ platforms, label }: { platforms: readonly Platform[]; label: string }) {\n    return (\n        <ul\n            aria-label={label}\n            className=\"divide-base-300/70 border-base-300/80 bg-base-100/60 dark:bg-base-100/40 grid divide-y rounded-2xl border sm:grid-cols-2 sm:gap-3 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent lg:grid-cols-4 sm:dark:bg-transparent\"\n        >\n            {platforms.map((platform) => (\n                <li\n                    key={platform.name}\n                    data-status={platform.status}\n                    className=\"sm:border-base-300/80 sm:bg-base-100/60 sm:dark:bg-base-100/40 flex items-start gap-3 p-4 sm:flex-col sm:items-stretch sm:gap-4 sm:rounded-2xl sm:border sm:p-5 sm:data-[status=planned]:border-dashed sm:data-[status=planned]:bg-transparent\"\n                >\n                    <div className=\"flex shrink-0 items-start justify-between gap-3\">\n                        <span className=\"bg-base-200 text-base-800 ring-base-300/70 dark:bg-base-300/60 inline-flex size-9 items-center justify-center rounded-[0.65rem] ring-1 ring-inset sm:size-10 [&>svg]:size-[18px] sm:[&>svg]:size-5\">\n                            {platform.icon}\n                        </span>\n                        <span className=\"hidden sm:inline-flex\">\n                            <StatusPill status={platform.status}>{platform.statusLabel}</StatusPill>\n                        </span>\n                    </div>\n                    <div className=\"flex min-w-0 flex-1 flex-col gap-0.5 sm:gap-1\">\n                        <span className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n                            <span className=\"text-base-content text-[15px] font-semibold tracking-[-0.01em]\">\n                                {platform.name}\n                            </span>\n                            <span className=\"sm:hidden\">\n                                <StatusPill status={platform.status}>{platform.statusLabel}</StatusPill>\n                            </span>\n                        </span>\n                        <span className=\"text-base-700 text-sm leading-5\">{platform.detail}</span>\n                    </div>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;;AAaA,SAAgB,aAAa,EAAE,WAAW,SAA4D;CAClG,OACI,oBAAC,MAAD;EACI,cAAY;EACZ,WAAU;EAET,UAAA,UAAU,KAAK,aACZ,qBAAC,MAAD;GAEI,eAAa,SAAS;GACtB,WAAU;GAHd,UAAA,CAKI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,QAAD;KAAM,WAAU;KACX,UAAA,SAAS;IACR,CAAA,GACN,oBAAC,QAAD;KAAM,WAAU;KACZ,UAAA,oBAAC,YAAD;MAAY,QAAQ,SAAS;MAAS,UAAA,SAAS;KAAwB,CAAA;IACrE,CAAA,CACL;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACI,oBAAC,QAAD;MAAM,WAAU;MACX,UAAA,SAAS;KACR,CAAA,GACN,oBAAC,QAAD;MAAM,WAAU;MACZ,UAAA,oBAAC,YAAD;OAAY,QAAQ,SAAS;OAAS,UAAA,SAAS;MAAwB,CAAA;KACrE,CAAA,CACJ;IACN,CAAA,GAAA,oBAAC,QAAD;KAAM,WAAU;KAAmC,UAAA,SAAS;IAAa,CAAA,CACxE;GACL,CAAA,CAAA;EAvBK,GAAA,SAAS,IAuBd,CACP;CACD,CAAA;AAEZ"}

package/dist/showcase/ProductBand.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export interface ProductEntry {
+  name: string;
+  icon: ReactNode;
+  status: ReactNode;
+  summary: string;
+  href: string;
+}
+/** The family of products under a hero, one compact entry each, wrapping as the family grows. */
+export declare function ProductIndex({ products, label, onNavigate }: {
+  products: readonly ProductEntry[];
+  label: string;
+  onNavigate: (href: string) => void;
+}): import("react").JSX.Element;
+interface ProductBandProps {
+  /** The band's colour world: a hue and how strongly it shows. */
+  hue: number;
+  chroma?: number;
+  icon: ReactNode;
+  name: string;
+  status: ReactNode;
+  title: string;
+  description: string;
+  actions: ReactNode;
+  media: ReactNode;
+  /** Puts the media on the left. */
+  reverse?: boolean;
+  /** A short line under the actions, such as requirements. */
+  note?: ReactNode;
+}
+/** One product's own space on a page that presents several: its colour, its devices, its way in. */
+export declare function ProductBand({ hue, chroma, icon, name, status, title, description, actions, media, reverse, note }: ProductBandProps): import("react").JSX.Element;
+/** Product bands one after another, as many as the family has. */
+export declare function ProductBands({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ProductBand.d.ts.map

package/dist/showcase/ProductBand.js

@@ -0,0 +1,120 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon } from "lucide-react";
+// src/showcase/ProductBand.tsx
+/** The family of products under a hero, one compact entry each, wrapping as the family grows. */
+function ProductIndex({ products, label, onNavigate }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: "mx-auto flex max-w-[880px] flex-wrap justify-center gap-3",
+		children: products.map((product) => /* @__PURE__ */ jsx("li", {
+			className: "w-full sm:w-[calc(50%-0.375rem)] lg:w-[calc(50%-0.375rem)]",
+			children: /* @__PURE__ */ jsxs("a", {
+				...tabbable,
+				href: product.href,
+				onClick: (event) => {
+					if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+					event.preventDefault();
+					onNavigate(product.href);
+				},
+				className: "group/entry border-base-300 bg-base-100/70 hover:border-base-400 focus-visible:outline-primary dark:bg-base-100/50 flex h-full items-center gap-3 rounded-2xl border px-4 py-3 text-left shadow-xs/5 backdrop-blur transition-[border-color,background-color] focus-visible:outline-2",
+				children: [
+					product.icon,
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-base-content text-[15px] font-semibold tracking-[-0.01em]",
+								children: product.name
+							}), product.status]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-base-700 text-sm leading-5",
+							children: product.summary
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-base-600 inline-flex transition-transform duration-200 group-hover/entry:translate-x-0.5 [&_svg]:size-4",
+						children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+					})
+				]
+			})
+		}, product.href))
+	});
+}
+/** One product's own space on a page that presents several: its colour, its devices, its way in. */
+function ProductBand({ hue, chroma = .13, icon, name, status, title, description, actions, media, reverse, note }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("article", {
+		"aria-labelledby": id,
+		className: "border-base-300 bg-base-100 dark:bg-base-100/70 relative isolate overflow-hidden rounded-[2rem] border",
+		style: {
+			"--lar-band-hue": hue,
+			"--lar-band-chroma": chroma
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "absolute inset-0 -z-10 bg-[radial-gradient(70%_90%_at_var(--lar-band-x)_50%,oklch(0.6_var(--lar-band-chroma)_var(--lar-band-hue)/0.24),transparent_70%)] dark:bg-[radial-gradient(70%_90%_at_var(--lar-band-x)_50%,oklch(0.42_var(--lar-band-chroma)_var(--lar-band-hue)/0.45),transparent_70%)]",
+			style: { "--lar-band-x": reverse ? "20%" : "80%" }
+		}), /* @__PURE__ */ jsxs("div", {
+			className: `grid items-center gap-5 p-6 sm:p-10 lg:gap-12 lg:p-12 ${reverse ? "lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]" : "lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]"}`,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: `contents lg:flex lg:flex-col lg:gap-5 ${reverse ? "lg:order-2" : ""}`,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "order-1 flex items-center gap-3 lg:order-none",
+						children: [
+							icon,
+							/* @__PURE__ */ jsx(Text, {
+								as: "span",
+								variant: "label",
+								children: name
+							}),
+							status
+						]
+					}),
+					/* @__PURE__ */ jsx(Heading, {
+						id,
+						as: "h2",
+						variant: "feature",
+						className: "order-2 lg:order-none lg:text-[1.875rem] lg:leading-[1.15]",
+						children: title
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						variant: "lead",
+						tone: "muted",
+						className: "order-4 lg:order-none",
+						children: description
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "order-5 mt-1 flex flex-col gap-3 lg:order-none",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap items-center gap-3 max-sm:flex-col max-sm:[&>a]:w-full",
+							children: actions
+						}), note ? /* @__PURE__ */ jsx(Text, {
+							variant: "caption",
+							tone: "muted",
+							className: "dark:text-[#96969f]",
+							children: note
+						}) : null]
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: `order-3 my-3 lg:my-0 ${reverse ? "lg:order-1" : "lg:order-none"}`,
+				children: media
+			})]
+		})]
+	});
+}
+/** Product bands one after another, as many as the family has. */
+function ProductBands({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-6 sm:gap-8",
+		children
+	});
+}
+export { ProductBand, ProductBands, ProductIndex };
+
+//# sourceMappingURL=ProductBand.js.map

package/dist/showcase/ProductBand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductBand.js","names":[],"sources":["../../src/showcase/ProductBand.tsx"],"sourcesContent":["import { ArrowRightIcon } from 'lucide-react';\nimport { type CSSProperties, type ReactNode, useId } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Heading, Text } from '../typography/Typography';\n\nexport interface ProductEntry {\n    name: string;\n    icon: ReactNode;\n    status: ReactNode;\n    summary: string;\n    href: string;\n}\n\n/** The family of products under a hero, one compact entry each, wrapping as the family grows. */\nexport function ProductIndex({\n    products,\n    label,\n    onNavigate,\n}: {\n    products: readonly ProductEntry[];\n    label: string;\n    onNavigate: (href: string) => void;\n}) {\n    return (\n        <ul aria-label={label} className=\"mx-auto flex max-w-[880px] flex-wrap justify-center gap-3\">\n            {products.map((product) => (\n                <li key={product.href} className=\"w-full sm:w-[calc(50%-0.375rem)] lg:w-[calc(50%-0.375rem)]\">\n                    <a\n                        {...tabbable}\n                        href={product.href}\n                        onClick={(event) => {\n                            if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n                            event.preventDefault();\n                            onNavigate(product.href);\n                        }}\n                        className=\"group/entry border-base-300 bg-base-100/70 hover:border-base-400 focus-visible:outline-primary dark:bg-base-100/50 flex h-full items-center gap-3 rounded-2xl border px-4 py-3 text-left shadow-xs/5 backdrop-blur transition-[border-color,background-color] focus-visible:outline-2\"\n                    >\n                        {product.icon}\n                        <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                            <span className=\"flex flex-wrap items-center gap-2\">\n                                <span className=\"text-base-content text-[15px] font-semibold tracking-[-0.01em]\">\n                                    {product.name}\n                                </span>\n                                {product.status}\n                            </span>\n                            <span className=\"text-base-700 text-sm leading-5\">{product.summary}</span>\n                        </span>\n                        <span className=\"text-base-600 inline-flex transition-transform duration-200 group-hover/entry:translate-x-0.5 [&_svg]:size-4\">\n                            <ArrowRightIcon />\n                        </span>\n                    </a>\n                </li>\n            ))}\n        </ul>\n    );\n}\n\ninterface ProductBandProps {\n    /** The band's colour world: a hue and how strongly it shows. */\n    hue: number;\n    chroma?: number;\n    icon: ReactNode;\n    name: string;\n    status: ReactNode;\n    title: string;\n    description: string;\n    actions: ReactNode;\n    media: ReactNode;\n    /** Puts the media on the left. */\n    reverse?: boolean;\n    /** A short line under the actions, such as requirements. */\n    note?: ReactNode;\n}\n\n/** One product's own space on a page that presents several: its colour, its devices, its way in. */\nexport function ProductBand({\n    hue,\n    chroma = 0.13,\n    icon,\n    name,\n    status,\n    title,\n    description,\n    actions,\n    media,\n    reverse,\n    note,\n}: ProductBandProps) {\n    const id = useId();\n\n    return (\n        <article\n            aria-labelledby={id}\n            className=\"border-base-300 bg-base-100 dark:bg-base-100/70 relative isolate overflow-hidden rounded-[2rem] border\"\n            style={{ '--lar-band-hue': hue, '--lar-band-chroma': chroma } as CSSProperties}\n        >\n            <div\n                aria-hidden=\"true\"\n                className=\"absolute inset-0 -z-10 bg-[radial-gradient(70%_90%_at_var(--lar-band-x)_50%,oklch(0.6_var(--lar-band-chroma)_var(--lar-band-hue)/0.24),transparent_70%)] dark:bg-[radial-gradient(70%_90%_at_var(--lar-band-x)_50%,oklch(0.42_var(--lar-band-chroma)_var(--lar-band-hue)/0.45),transparent_70%)]\"\n                style={{ '--lar-band-x': reverse ? '20%' : '80%' } as CSSProperties}\n            />\n            {/* On narrow screens the text wrapper dissolves, so the product's picture sits right under its\n                heading, before the description and actions. */}\n            <div\n                className={`grid items-center gap-5 p-6 sm:p-10 lg:gap-12 lg:p-12 ${reverse ? 'lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]' : 'lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]'}`}\n            >\n                <div className={`contents lg:flex lg:flex-col lg:gap-5 ${reverse ? 'lg:order-2' : ''}`}>\n                    <div className=\"order-1 flex items-center gap-3 lg:order-none\">\n                        {icon}\n                        <Text as=\"span\" variant=\"label\">\n                            {name}\n                        </Text>\n                        {status}\n                    </div>\n                    <Heading\n                        id={id}\n                        as=\"h2\"\n                        variant=\"feature\"\n                        className=\"order-2 lg:order-none lg:text-[1.875rem] lg:leading-[1.15]\"\n                    >\n                        {title}\n                    </Heading>\n                    <Text variant=\"lead\" tone=\"muted\" className=\"order-4 lg:order-none\">\n                        {description}\n                    </Text>\n                    <div className=\"order-5 mt-1 flex flex-col gap-3 lg:order-none\">\n                        <div className=\"flex flex-wrap items-center gap-3 max-sm:flex-col max-sm:[&>a]:w-full\">\n                            {actions}\n                        </div>\n                        {note ? (\n                            <Text variant=\"caption\" tone=\"muted\" className=\"dark:text-[#96969f]\">\n                                {note}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n                <div className={`order-3 my-3 lg:my-0 ${reverse ? 'lg:order-1' : 'lg:order-none'}`}>{media}</div>\n            </div>\n        </article>\n    );\n}\n\n/** Product bands one after another, as many as the family has. */\nexport function ProductBands({ children }: { children: ReactNode }) {\n    return <div className=\"flex flex-col gap-6 sm:gap-8\">{children}</div>;\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,aAAa,EACzB,UACA,OACA,cAKD;CACC,OACI,oBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAC5B,UAAA,SAAS,KAAK,YACX,oBAAC,MAAD;GAAuB,WAAU;GAC7B,UAAA,qBAAC,KAAD;IACI,GAAI;IACJ,MAAM,QAAQ;IACd,UAAU,UAAU;KAChB,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,GAAG;KAE5E,MAAM,eAAe;KACrB,WAAW,QAAQ,IAAI;IAC3B;IACA,WAAU;IATd,UAAA;KAWK,QAAQ;KACT,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACI,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACI,oBAAC,QAAD;QAAM,WAAU;QACX,UAAA,QAAQ;OACP,CAAA,GACL,QAAQ,MACP;MACN,CAAA,GAAA,oBAAC,QAAD;OAAM,WAAU;OAAmC,UAAA,QAAQ;MAAc,CAAA,CACvE;;KACN,oBAAC,QAAD;MAAM,WAAU;MACZ,UAAA,oBAAC,gBAAD,CAAiB,CAAA;KACf,CAAA;IACP;;EACH,GA1BK,QAAQ,IA0Bb,CACP;CACD,CAAA;AAEZ;;AAoBA,SAAgB,YAAY,EACxB,KACA,SAAS,KACT,MACA,MACA,QACA,OACA,aACA,SACA,OACA,SACA,QACiB;CACjB,MAAM,KAAK,MAAM;CAEjB,OACI,qBAAC,WAAD;EACI,mBAAiB;EACjB,WAAU;EACV,OAAO;GAAE,kBAAkB;GAAK,qBAAqB;EAAO;EAHhE,UAAA,CAKI,oBAAC,OAAD;GACI,eAAY;GACZ,WAAU;GACV,OAAO,EAAE,gBAAgB,UAAU,QAAQ,MAAM;EACpD,CAAA,GAGD,qBAAC,OAAD;GACI,WAAW,yDAAyD,UAAU,+CAA+C;GADjI,UAAA,CAGI,qBAAC,OAAD;IAAK,WAAW,yCAAyC,UAAU,eAAe;IAAlF,UAAA;KACI,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACK;OACD,oBAAC,MAAD;QAAM,IAAG;QAAO,SAAQ;QACnB,UAAA;OACC,CAAA;OACL;MACA;;KACL,oBAAC,SAAD;MACQ;MACJ,IAAG;MACH,SAAQ;MACR,WAAU;MAET,UAAA;KACI,CAAA;KACT,oBAAC,MAAD;MAAM,SAAQ;MAAO,MAAK;MAAQ,WAAU;MACvC,UAAA;KACC,CAAA;KACN,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACI,oBAAC,OAAD;OAAK,WAAU;OACV,UAAA;MACA,CAAA,GACJ,OACG,oBAAC,MAAD;OAAM,SAAQ;OAAU,MAAK;OAAQ,WAAU;OAC1C,UAAA;MACC,CAAA,IACN,IACH;;IACJ;GACL,CAAA,GAAA,oBAAC,OAAD;IAAK,WAAW,wBAAwB,UAAU,eAAe;IAAoB,UAAA;GAAW,CAAA,CAC/F;EACA,CAAA,CAAA;;AAEjB;;AAGA,SAAgB,aAAa,EAAE,YAAqC;CAChE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAgC;CAAc,CAAA;AACxE"}

package/dist/showcase/Roadmap.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+export interface RoadmapItem {
+  icon: ReactNode;
+  title: string;
+  body: string;
+  /** The next big thing: a card of its own above the list, in an app's hue, with its highlights and an
+   *  illustration of the idea. */
+  featured?: {
+    hue: number;
+    highlights: readonly string[];
+    visual?: ReactNode;
+    steps?: readonly string[];
+  };
+}
+/** What is planned: a featured card for the next big thing, then quiet dashed cards that read like promises. */
+export declare function Roadmap({ items, label, statusLabel }: {
+  items: readonly RoadmapItem[];
+  label: string;
+  statusLabel: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Roadmap.d.ts.map