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

package/dist/showcase/CallToAction.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+interface CallToActionProps {
+  title: ReactNode;
+  lead: ReactNode;
+  actions: ReactNode;
+  note?: ReactNode;
+}
+/** The closing panel of a page: the Lar mark drawn large and faint behind one last invitation. */
+export declare function CallToAction({ title, lead, actions, note }: CallToActionProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CallToAction.d.ts.map

package/dist/showcase/CallToAction.js

@@ -0,0 +1,54 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/CallToAction.tsx
+const MARK_L = "M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z";
+const MARK_S = "M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z";
+/** The closing panel of a page: the Lar mark drawn large and faint behind one last invitation. */
+function CallToAction({ title, lead, actions, note }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-base-300 bg-base-100 dark:bg-base-100/70 relative isolate overflow-hidden rounded-[1.75rem] border px-6 py-16 text-center sm:px-12 sm:py-20",
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "absolute inset-0 -z-10 bg-[radial-gradient(60%_80%_at_50%_0%,var(--lar-glow),transparent_70%)]"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex max-w-[640px] flex-col items-center gap-5",
+			children: [
+				/* @__PURE__ */ jsxs("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 100 100",
+					className: "mb-1 size-9 text-(--color-brand-ink)",
+					children: [/* @__PURE__ */ jsx("path", {
+						d: MARK_L,
+						fill: "currentColor"
+					}), /* @__PURE__ */ jsx("path", {
+						d: MARK_S,
+						fill: "#355292"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Heading, {
+					as: "h2",
+					variant: "headline",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					variant: "lead",
+					tone: "muted",
+					children: lead
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-3 flex w-full flex-col items-center justify-center gap-3 sm:w-auto sm:flex-row sm:flex-wrap max-sm:[&>a]:w-full max-sm:[&>a]:max-w-[320px]",
+					children: actions
+				}),
+				note ? /* @__PURE__ */ jsx(Text, {
+					variant: "caption",
+					tone: "muted",
+					className: "text-balance dark:text-[#96969f]",
+					children: note
+				}) : null
+			]
+		})]
+	});
+}
+export { CallToAction };
+
+//# sourceMappingURL=CallToAction.js.map

package/dist/showcase/CallToAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallToAction.js","names":[],"sources":["../../src/showcase/CallToAction.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Heading, Text } from '../typography/Typography';\n\nconst MARK_L = 'M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z';\nconst MARK_S =\n    'M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z';\n\ninterface CallToActionProps {\n    title: ReactNode;\n    lead: ReactNode;\n    actions: ReactNode;\n    note?: ReactNode;\n}\n\n/** The closing panel of a page: the Lar mark drawn large and faint behind one last invitation. */\nexport function CallToAction({ title, lead, actions, note }: CallToActionProps) {\n    return (\n        <div className=\"border-base-300 bg-base-100 dark:bg-base-100/70 relative isolate overflow-hidden rounded-[1.75rem] border px-6 py-16 text-center sm:px-12 sm:py-20\">\n            <div\n                aria-hidden=\"true\"\n                className=\"absolute inset-0 -z-10 bg-[radial-gradient(60%_80%_at_50%_0%,var(--lar-glow),transparent_70%)]\"\n            />\n            <div className=\"mx-auto flex max-w-[640px] flex-col items-center gap-5\">\n                <svg aria-hidden=\"true\" viewBox=\"0 0 100 100\" className=\"mb-1 size-9 text-(--color-brand-ink)\">\n                    <path d={MARK_L} fill=\"currentColor\" />\n                    <path d={MARK_S} fill=\"#355292\" />\n                </svg>\n                <Heading as=\"h2\" variant=\"headline\">\n                    {title}\n                </Heading>\n                <Text variant=\"lead\" tone=\"muted\">\n                    {lead}\n                </Text>\n                <div className=\"mt-3 flex w-full flex-col items-center justify-center gap-3 sm:w-auto sm:flex-row sm:flex-wrap max-sm:[&>a]:w-full max-sm:[&>a]:max-w-[320px]\">\n                    {actions}\n                </div>\n                {note ? (\n                    <Text variant=\"caption\" tone=\"muted\" className=\"text-balance dark:text-[#96969f]\">\n                        {note}\n                    </Text>\n                ) : null}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;AAIA,MAAM,SAAS;AACf,MAAM,SACF;;AAUJ,SAAgB,aAAa,EAAE,OAAO,MAAM,SAAS,QAA2B;CAC5E,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,oBAAC,OAAD;GACI,eAAY;GACZ,WAAU;EACb,CAAA,GACD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACI,qBAAC,OAAD;KAAK,eAAY;KAAO,SAAQ;KAAc,WAAU;KAAxD,UAAA,CACI,oBAAC,QAAD;MAAM,GAAG;MAAQ,MAAK;KAAgB,CAAA,GACtC,oBAAC,QAAD;MAAM,GAAG;MAAQ,MAAK;KAAW,CAAA,CAChC;;IACL,oBAAC,SAAD;KAAS,IAAG;KAAK,SAAQ;KACpB,UAAA;IACI,CAAA;IACT,oBAAC,MAAD;KAAM,SAAQ;KAAO,MAAK;KACrB,UAAA;IACC,CAAA;IACN,oBAAC,OAAD;KAAK,WAAU;KACV,UAAA;IACA,CAAA;IACJ,OACG,oBAAC,MAAD;KAAM,SAAQ;KAAU,MAAK;KAAQ,WAAU;KAC1C,UAAA;IACC,CAAA,IACN;GACH;EACJ,CAAA,CAAA;;AAEb"}

package/dist/showcase/Cards.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+interface ProductCardProps {
+  /** A lar-brand app hue; omit for Factory's neutral graphite. */
+  hue?: number;
+  icon: ReactNode;
+  name: string;
+  status: ReactNode;
+  title: string;
+  description: string;
+  linkLabel: string;
+  href: string;
+  onNavigate: (href: string) => void;
+  media: ReactNode;
+}
+/** A product on the home page: its name and promise above a screenshot that runs off the card's edge. */
+export declare function ProductCard({ hue, icon, name, status, title, description, linkLabel, href, onNavigate, media }: ProductCardProps): import("react").JSX.Element;
+/** Two or three product cards side by side. */
+export declare function ProductGrid({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+interface FeatureTileProps {
+  icon: ReactNode;
+  title: string;
+  children: ReactNode;
+  hue?: number;
+}
+/** A short benefit: an icon in a tinted square, a title and a sentence or two. */
+export declare function FeatureTile({ icon, title, children, hue }: FeatureTileProps): import("react").JSX.Element;
+export declare function FeatureGrid({ children, columns }: {
+  children: ReactNode;
+  columns?: 2 | 3 | 4;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Cards.d.ts.map

package/dist/showcase/Cards.js

@@ -0,0 +1,122 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon } from "lucide-react";
+// src/showcase/Cards.tsx
+/** A product on the home page: its name and promise above a screenshot that runs off the card's edge. */
+function ProductCard({ hue, icon, name, status, title, description, linkLabel, href, onNavigate, media }) {
+	return /* @__PURE__ */ jsxs("article", {
+		className: "group/product border-base-300 bg-base-100 hover:border-base-400 dark:bg-base-100/80 relative isolate flex flex-col overflow-hidden rounded-[1.5rem] border shadow-[0_1px_0_rgb(255_255_255/4%)_inset] transition-[border-color,box-shadow] duration-300 hover:shadow-[0_30px_80px_-40px_rgb(0_0_0/45%)]",
+		style: {
+			"--lar-card-hue": hue ?? 264,
+			"--lar-card-chroma": hue === void 0 ? .01 : .12
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "absolute inset-0 -z-10 bg-[radial-gradient(80%_60%_at_100%_0%,oklch(0.6_var(--lar-card-chroma)_var(--lar-card-hue)/0.16),transparent_70%)] transition-opacity duration-500 group-hover/product:opacity-150 dark:bg-[radial-gradient(80%_60%_at_100%_0%,oklch(0.5_var(--lar-card-chroma)_var(--lar-card-hue)/0.3),transparent_70%)]"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-5 p-7 pb-8 sm:p-9 sm:pb-10",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [
+							icon,
+							/* @__PURE__ */ jsx("div", {
+								className: "flex min-w-0 flex-col",
+								children: /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									variant: "label",
+									children: name
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "ml-auto",
+								children: status
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Heading, {
+						as: "h3",
+						variant: "feature",
+						className: "max-w-[440px]",
+						children: title
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						variant: "prose",
+						tone: "muted",
+						className: "max-w-[460px]",
+						children: description
+					}),
+					/* @__PURE__ */ jsxs("a", {
+						...tabbable,
+						href,
+						onClick: (event) => {
+							if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+							event.preventDefault();
+							onNavigate(href);
+						},
+						className: "text-base-content focus-visible:before:outline-primary inline-flex w-fit items-center gap-1.5 text-[15px] font-medium before:absolute before:inset-0 before:z-10 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-[-2px] [&_svg]:size-4",
+						children: [linkLabel, /* @__PURE__ */ jsx("span", {
+							className: "inline-flex transition-transform duration-200 group-hover/product:translate-x-1",
+							children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative h-[240px] overflow-hidden [mask-image:linear-gradient(to_bottom,#000_calc(100%-56px),transparent)] pl-7 sm:h-[320px] sm:pl-9",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover/product:-translate-y-2",
+					children: media
+				})
+			})
+		]
+	});
+}
+/** Two or three product cards side by side. */
+function ProductGrid({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-5 lg:grid-cols-2",
+		children
+	});
+}
+/** A short benefit: an icon in a tinted square, a title and a sentence or two. */
+function FeatureTile({ icon, title, children, hue }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sm:border-base-300/80 sm:bg-base-100/60 sm:dark:bg-base-100/40 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 p-4 sm:flex sm:flex-col sm:gap-3 sm:rounded-[1.125rem] sm:border sm:p-6",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `row-span-2 inline-flex size-8 items-center justify-center rounded-[0.6rem] ring-1 ring-inset sm:size-10 sm:rounded-[0.7rem] [&>svg]:size-4 sm:[&>svg]:size-5 ${hue === void 0 ? "bg-primary/10 text-primary ring-primary/15 dark:bg-primary/20 dark:ring-primary/30 dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]" : "kind-badge ring-current/10"}`,
+				style: hue === void 0 ? void 0 : { "--lar-kind-hue": hue },
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(Heading, {
+				as: "h3",
+				variant: "subsection",
+				className: "self-center sm:mt-1 sm:self-auto",
+				children: title
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "prose",
+				tone: "muted",
+				className: "col-start-2",
+				children
+			})
+		]
+	});
+}
+function FeatureGrid({ children, columns = 3 }) {
+	return /* @__PURE__ */ jsx("div", {
+		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:gap-4 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent sm:dark:bg-transparent ${{
+			2: "sm:grid-cols-2",
+			3: "sm:grid-cols-2 lg:grid-cols-3",
+			4: "sm:grid-cols-2 lg:grid-cols-4"
+		}[columns]}`,
+		children
+	});
+}
+export { FeatureGrid, FeatureTile, ProductCard, ProductGrid };
+
+//# sourceMappingURL=Cards.js.map

package/dist/showcase/Cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cards.js","names":[],"sources":["../../src/showcase/Cards.tsx"],"sourcesContent":["import { ArrowRightIcon } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Heading, Text } from '../typography/Typography';\n\ninterface ProductCardProps {\n    /** A lar-brand app hue; omit for Factory's neutral graphite. */\n    hue?: number;\n    icon: ReactNode;\n    name: string;\n    status: ReactNode;\n    title: string;\n    description: string;\n    linkLabel: string;\n    href: string;\n    onNavigate: (href: string) => void;\n    media: ReactNode;\n}\n\n/** A product on the home page: its name and promise above a screenshot that runs off the card's edge. */\nexport function ProductCard({\n    hue,\n    icon,\n    name,\n    status,\n    title,\n    description,\n    linkLabel,\n    href,\n    onNavigate,\n    media,\n}: ProductCardProps) {\n    return (\n        <article\n            className=\"group/product border-base-300 bg-base-100 hover:border-base-400 dark:bg-base-100/80 relative isolate flex flex-col overflow-hidden rounded-[1.5rem] border shadow-[0_1px_0_rgb(255_255_255/4%)_inset] transition-[border-color,box-shadow] duration-300 hover:shadow-[0_30px_80px_-40px_rgb(0_0_0/45%)]\"\n            style={\n                { '--lar-card-hue': hue ?? 264, '--lar-card-chroma': hue === undefined ? 0.01 : 0.12 } as CSSProperties\n            }\n        >\n            <div\n                aria-hidden=\"true\"\n                className=\"absolute inset-0 -z-10 bg-[radial-gradient(80%_60%_at_100%_0%,oklch(0.6_var(--lar-card-chroma)_var(--lar-card-hue)/0.16),transparent_70%)] transition-opacity duration-500 group-hover/product:opacity-150 dark:bg-[radial-gradient(80%_60%_at_100%_0%,oklch(0.5_var(--lar-card-chroma)_var(--lar-card-hue)/0.3),transparent_70%)]\"\n            />\n            <div className=\"flex flex-col gap-5 p-7 pb-8 sm:p-9 sm:pb-10\">\n                <div className=\"flex items-center gap-3\">\n                    {icon}\n                    <div className=\"flex min-w-0 flex-col\">\n                        <Text as=\"span\" variant=\"label\">\n                            {name}\n                        </Text>\n                    </div>\n                    <span className=\"ml-auto\">{status}</span>\n                </div>\n                <Heading as=\"h3\" variant=\"feature\" className=\"max-w-[440px]\">\n                    {title}\n                </Heading>\n                <Text variant=\"prose\" tone=\"muted\" className=\"max-w-[460px]\">\n                    {description}\n                </Text>\n                <a\n                    {...tabbable}\n                    href={href}\n                    onClick={(event) => {\n                        if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n                        event.preventDefault();\n                        onNavigate(href);\n                    }}\n                    className=\"text-base-content focus-visible:before:outline-primary inline-flex w-fit items-center gap-1.5 text-[15px] font-medium before:absolute before:inset-0 before:z-10 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-[-2px] [&_svg]:size-4\"\n                >\n                    {linkLabel}\n                    <span className=\"inline-flex transition-transform duration-200 group-hover/product:translate-x-1\">\n                        <ArrowRightIcon />\n                    </span>\n                </a>\n            </div>\n            <div className=\"relative h-[240px] overflow-hidden [mask-image:linear-gradient(to_bottom,#000_calc(100%-56px),transparent)] pl-7 sm:h-[320px] sm:pl-9\">\n                <div className=\"transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover/product:-translate-y-2\">\n                    {media}\n                </div>\n            </div>\n        </article>\n    );\n}\n\n/** Two or three product cards side by side. */\nexport function ProductGrid({ children }: { children: ReactNode }) {\n    return <div className=\"grid gap-5 lg:grid-cols-2\">{children}</div>;\n}\n\ninterface FeatureTileProps {\n    icon: ReactNode;\n    title: string;\n    children: ReactNode;\n    hue?: number;\n}\n\n/** A short benefit: an icon in a tinted square, a title and a sentence or two. */\nexport function FeatureTile({ icon, title, children, hue }: FeatureTileProps) {\n    return (\n        <div className=\"sm:border-base-300/80 sm:bg-base-100/60 sm:dark:bg-base-100/40 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 p-4 sm:flex sm:flex-col sm:gap-3 sm:rounded-[1.125rem] sm:border sm:p-6\">\n            <span\n                className={`row-span-2 inline-flex size-8 items-center justify-center rounded-[0.6rem] ring-1 ring-inset sm:size-10 sm:rounded-[0.7rem] [&>svg]:size-4 sm:[&>svg]:size-5 ${hue === undefined ? 'bg-primary/10 text-primary ring-primary/15 dark:bg-primary/20 dark:ring-primary/30 dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]' : 'kind-badge ring-current/10'}`}\n                style={hue === undefined ? undefined : ({ '--lar-kind-hue': hue } as CSSProperties)}\n            >\n                {icon}\n            </span>\n            <Heading as=\"h3\" variant=\"subsection\" className=\"self-center sm:mt-1 sm:self-auto\">\n                {title}\n            </Heading>\n            <Text variant=\"prose\" tone=\"muted\" className=\"col-start-2\">\n                {children}\n            </Text>\n        </div>\n    );\n}\n\nexport function FeatureGrid({ children, columns = 3 }: { children: ReactNode; columns?: 2 | 3 | 4 }) {\n    const layouts = {\n        2: 'sm:grid-cols-2',\n        3: 'sm:grid-cols-2 lg:grid-cols-3',\n        4: 'sm:grid-cols-2 lg:grid-cols-4',\n    };\n\n    return (\n        <div\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:gap-4 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent sm:dark:bg-transparent ${layouts[columns]}`}\n        >\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,YAAY,EACxB,KACA,MACA,MACA,QACA,OACA,aACA,WACA,MACA,YACA,SACiB;CACjB,OACI,qBAAC,WAAD;EACI,WAAU;EACV,OACI;GAAE,kBAAkB,OAAO;GAAK,qBAAqB,QAAQ,KAAA,IAAY,MAAO;EAAK;EAH7F,UAAA;GAMI,oBAAC,OAAD;IACI,eAAY;IACZ,WAAU;GACb,CAAA;GACD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACK;OACD,oBAAC,OAAD;QAAK,WAAU;QACX,UAAA,oBAAC,MAAD;SAAM,IAAG;SAAO,SAAQ;SACnB,UAAA;QACC,CAAA;OACL,CAAA;OACL,oBAAC,QAAD;QAAM,WAAU;QAAW,UAAA;OAAa,CAAA;MACvC;;KACL,oBAAC,SAAD;MAAS,IAAG;MAAK,SAAQ;MAAU,WAAU;MACxC,UAAA;KACI,CAAA;KACT,oBAAC,MAAD;MAAM,SAAQ;MAAQ,MAAK;MAAQ,WAAU;MACxC,UAAA;KACC,CAAA;KACN,qBAAC,KAAD;MACI,GAAI;MACE;MACN,UAAU,UAAU;OAChB,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,GAAG;OAE5E,MAAM,eAAe;OACrB,WAAW,IAAI;MACnB;MACA,WAAU;MATd,UAAA,CAWK,WACD,oBAAC,QAAD;OAAM,WAAU;OACZ,UAAA,oBAAC,gBAAD,CAAiB,CAAA;MACf,CAAA,CACP;;IACF;;GACL,oBAAC,OAAD;IAAK,WAAU;IACX,UAAA,oBAAC,OAAD;KAAK,WAAU;KACV,UAAA;IACA,CAAA;GACJ,CAAA;EACA;;AAEjB;;AAGA,SAAgB,YAAY,EAAE,YAAqC;CAC/D,OAAO,oBAAC,OAAD;EAAK,WAAU;EAA6B;CAAc,CAAA;AACrE;;AAUA,SAAgB,YAAY,EAAE,MAAM,OAAO,UAAU,OAAyB;CAC1E,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACI,oBAAC,QAAD;IACI,WAAW,gKAAgK,QAAQ,KAAA,IAAY,qJAAqJ;IACpV,OAAO,QAAQ,KAAA,IAAY,KAAA,IAAa,EAAE,kBAAkB,IAAI;IAE/D,UAAA;GACC,CAAA;GACN,oBAAC,SAAD;IAAS,IAAG;IAAK,SAAQ;IAAa,WAAU;IAC3C,UAAA;GACI,CAAA;GACT,oBAAC,MAAD;IAAM,SAAQ;IAAQ,MAAK;IAAQ,WAAU;IACxC;GACC,CAAA;EACL;;AAEb;AAEA,SAAgB,YAAY,EAAE,UAAU,UAAU,KAAmD;CAOjG,OACI,oBAAC,OAAD;EACI,WAAW,yMAAyM;GAPxN,GAAG;GACH,GAAG;GACH,GAAG;EAK2N,EAAE;EAE3N;CACA,CAAA;AAEb"}

package/dist/showcase/Devices.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+export interface ScreenshotProps {
+  /** The screenshot shown with the dark theme, and with both when there is no light one. */
+  dark: string;
+  light?: string;
+  alt: string;
+  /** Loads at once, for the first screen of a page. */
+  eager?: boolean;
+  /** Natural pixel size, so the browser can reserve the space before the image arrives. */
+  width?: number;
+  height?: number;
+}
+/** A product screenshot that follows the page's theme when it has a light and a dark capture. */
+export declare function Screenshot({ dark, light, alt, eager, width, height }: ScreenshotProps): import("react").JSX.Element;
+interface FrameProps {
+  children: ReactNode;
+  /** A soft contact shadow under the device. */
+  shadow?: boolean;
+}
+/** A MacBook Pro: a notched display with the macOS menu bar, on an aluminium base that follows the theme. */
+export declare function LaptopFrame({ children, shadow, app, menu, time }: FrameProps & {
+  app: string;
+  menu?: readonly string[];
+  time?: string;
+}): import("react").JSX.Element;
+/** An iPhone Pro with its Dynamic Island and side buttons, for an iOS screenshot at 1206 × 2622. */
+export declare function PhoneFrame({ children, shadow }: FrameProps): import("react").JSX.Element;
+/** An iPad Pro with even, thin bezels; the screenshot sets the aspect ratio. */
+export declare function TabletFrame({ children, shadow, aspect }: FrameProps & {
+  aspect?: string;
+}): import("react").JSX.Element;
+/** A slim television on a pedestal, for a 16:9 capture. */
+export declare function TvFrame({ children, shadow, stand }: FrameProps & {
+  stand?: boolean;
+}): import("react").JSX.Element;
+/** A Safari-style window with traffic lights and an address field. */
+export declare function BrowserFrame({ children, shadow, address, aspect, fade, tone }: FrameProps & {
+  address: string;
+  aspect?: string;
+  fade?: 'right' | 'bottom' | 'both' | 'under' | 'tail';
+  tone?: 'dark';
+}): import("react").JSX.Element;
+/** A Mac app window whose screenshot already carries its own title bar: corners, a hairline and depth only.
+ *  A bezel sets a dark-only capture in a dark display edge, so it reads as a deliberate dark shot on a light page;
+ *  a fade dissolves an edge where the capture is cropped. */
+export declare function AppWindow({ children, shadow, bezel, fade }: FrameProps & {
+  bezel?: boolean;
+  fade?: 'right' | 'bottom' | 'both';
+}): import("react").JSX.Element;
+/** A close-up cut from a screenshot, raised on glass above a device to point at one detail. */
+export declare function Callout({ children, compact, fade }: {
+  children: ReactNode;
+  compact?: boolean;
+  fade?: boolean;
+}): import("react").JSX.Element;
+/** A close-up with a smaller detail card overlapping its lower corner. */
+export declare function CalloutPair({ base, detail }: {
+  base: ReactNode;
+  detail: ReactNode;
+}): import("react").JSX.Element;
+/** Close-ups one under another, for a phone-width column. */
+export declare function CalloutStack({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Media with a short, numbered reading guide floating over a quiet corner of it, on wide screens. */
+export declare function GuidedMedia({ children, guide, label }: {
+  children: ReactNode;
+  guide: readonly string[];
+  label: string;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Devices.d.ts.map

package/dist/showcase/Devices.js

@@ -0,0 +1,249 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/Devices.tsx
+/** A product screenshot that follows the page's theme when it has a light and a dark capture. */
+function Screenshot({ dark, light, alt, eager, width, height }) {
+	const loading = eager ? "eager" : "lazy";
+	const priority = eager ? "high" : "auto";
+	if (!light) return /* @__PURE__ */ jsx("img", {
+		src: dark,
+		alt,
+		loading,
+		fetchPriority: priority,
+		width,
+		height,
+		decoding: "async"
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("img", {
+		src: light,
+		alt,
+		loading,
+		fetchPriority: priority,
+		width,
+		height,
+		decoding: "async",
+		className: "dark:hidden!"
+	}), /* @__PURE__ */ jsx("img", {
+		src: dark,
+		alt,
+		loading,
+		width,
+		height,
+		decoding: "async",
+		className: "hidden! dark:block!"
+	})] });
+}
+/** A MacBook Pro: a notched display with the macOS menu bar, on an aluminium base that follows the theme. */
+function LaptopFrame({ children, shadow = true, app, menu = [], time }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lar-device lar-laptop",
+		"data-shadow": shadow ? "float" : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "lar-laptop__lid",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "lar-laptop__screen",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "lar-laptop__menubar",
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ jsx(LarMenuMark, {}),
+							/* @__PURE__ */ jsx("span", { children: app }),
+							menu.map((item) => /* @__PURE__ */ jsx("span", { children: item }, item)),
+							time ? /* @__PURE__ */ jsx("time", { children: time }) : null
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "lar-laptop__notch",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "lar-laptop__app",
+						children
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "lar-laptop__base",
+			"aria-hidden": "true"
+		})]
+	});
+}
+/** The menu bar's leading glyph: the Lar mark stands in for the Apple menu, so the frame claims no one's logo. */
+function LarMenuMark() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 100 100",
+		className: "size-[1.3cqi] shrink-0",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z",
+			fill: "currentColor"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z",
+			fill: "currentColor"
+		})]
+	});
+}
+/** An iPhone Pro with its Dynamic Island and side buttons, for an iOS screenshot at 1206 × 2622. */
+function PhoneFrame({ children, shadow = true }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "lar-device",
+		"data-shadow": shadow ? "float" : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "lar-phone",
+			children: [
+				/* @__PURE__ */ jsx("i", {
+					className: "lar-phone__button lar-phone__button--action",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("i", {
+					className: "lar-phone__button lar-phone__button--volume-up",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("i", {
+					className: "lar-phone__button lar-phone__button--volume-down",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("i", {
+					className: "lar-phone__button lar-phone__button--side",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "lar-phone__screen",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "lar-phone__island",
+						"aria-hidden": "true"
+					}), children]
+				})
+			]
+		})
+	});
+}
+/** An iPad Pro with even, thin bezels; the screenshot sets the aspect ratio. */
+function TabletFrame({ children, shadow = true, aspect = "4 / 3" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "lar-device",
+		"data-shadow": shadow ? "float" : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "lar-tablet",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "lar-tablet__screen",
+				style: { aspectRatio: aspect },
+				children
+			})
+		})
+	});
+}
+/** A slim television on a pedestal, for a 16:9 capture. */
+function TvFrame({ children, shadow = true, stand = true }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lar-device lar-tv",
+		"data-shadow": shadow ? "float" : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "lar-tv__panel",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "lar-tv__screen",
+				children
+			})
+		}), stand ? /* @__PURE__ */ jsx("div", {
+			className: "lar-tv__stand",
+			"aria-hidden": "true"
+		}) : null]
+	});
+}
+/** A Safari-style window with traffic lights and an address field. */
+function BrowserFrame({ children, shadow = true, address, aspect = "16 / 10", fade, tone }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `lar-device ${tone === "dark" ? "dark lar-dark-palette" : ""}`,
+		"data-shadow": shadow ? "float" : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "lar-window",
+			"data-fade": fade === "bottom" || fade === "tail" ? fade : void 0,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "lar-window__bar",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "lar-window__lights",
+					children: [
+						/* @__PURE__ */ jsx("i", {}),
+						/* @__PURE__ */ jsx("i", {}),
+						/* @__PURE__ */ jsx("i", {})
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "lar-window__address",
+					children: address
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "lar-window__screen",
+				"data-fade": fade === "bottom" || fade === "tail" ? void 0 : fade,
+				style: { aspectRatio: aspect },
+				children
+			})]
+		})
+	});
+}
+/** A Mac app window whose screenshot already carries its own title bar: corners, a hairline and depth only.
+*  A bezel sets a dark-only capture in a dark display edge, so it reads as a deliberate dark shot on a light page;
+*  a fade dissolves an edge where the capture is cropped. */
+function AppWindow({ children, shadow = true, bezel, fade }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "lar-device",
+		"data-shadow": shadow ? "float" : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "lar-app-window",
+			"data-bezel": bezel || void 0,
+			"data-fade": fade,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "lar-app-window__fade",
+				children
+			})
+		})
+	});
+}
+/** A close-up cut from a screenshot, raised on glass above a device to point at one detail. */
+function Callout({ children, compact, fade }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `lar-callout ${compact ? "mx-auto max-w-[240px]" : ""}`,
+		"data-fade": fade || void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "lar-callout__fade",
+			children
+		})
+	});
+}
+/** A close-up with a smaller detail card overlapping its lower corner. */
+function CalloutPair({ base, detail }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative pb-[18%]",
+		children: [base, /* @__PURE__ */ jsx("div", {
+			className: "absolute right-[-2%] bottom-0 w-[62%] rotate-[1.5deg]",
+			children: detail
+		})]
+	});
+}
+/** Close-ups one under another, for a phone-width column. */
+function CalloutStack({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mx-auto flex max-w-[330px] flex-col gap-3",
+		children
+	});
+}
+/** Media with a short, numbered reading guide floating over a quiet corner of it, on wide screens. */
+function GuidedMedia({ children, guide, label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex flex-col gap-4",
+		children: [children, /* @__PURE__ */ jsx("ol", {
+			"aria-label": label,
+			className: "text-base-content md:glass-menu flex flex-col gap-2 text-sm leading-5 md:absolute md:top-[8%] md:right-[4%] md:max-w-[260px] md:rounded-xl md:p-4",
+			children: guide.map((step, index) => /* @__PURE__ */ jsxs("li", {
+				className: "flex gap-2.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-primary text-primary-content inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums",
+					children: index + 1
+				}), step]
+			}, step))
+		})]
+	});
+}
+export { AppWindow, BrowserFrame, Callout, CalloutPair, CalloutStack, GuidedMedia, LaptopFrame, PhoneFrame, Screenshot, TabletFrame, TvFrame };
+
+//# sourceMappingURL=Devices.js.map

package/dist/showcase/Devices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Devices.js","names":[],"sources":["../../src/showcase/Devices.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface ScreenshotProps {\n    /** The screenshot shown with the dark theme, and with both when there is no light one. */\n    dark: string;\n    light?: string;\n    alt: string;\n    /** Loads at once, for the first screen of a page. */\n    eager?: boolean;\n    /** Natural pixel size, so the browser can reserve the space before the image arrives. */\n    width?: number;\n    height?: number;\n}\n\n/** A product screenshot that follows the page's theme when it has a light and a dark capture. */\nexport function Screenshot({ dark, light, alt, eager, width, height }: ScreenshotProps) {\n    const loading = eager ? 'eager' : 'lazy';\n    const priority = eager ? 'high' : 'auto';\n\n    if (!light)\n        return (\n            <img\n                src={dark}\n                alt={alt}\n                loading={loading}\n                fetchPriority={priority}\n                width={width}\n                height={height}\n                decoding=\"async\"\n            />\n        );\n\n    return (\n        <>\n            <img\n                src={light}\n                alt={alt}\n                loading={loading}\n                fetchPriority={priority}\n                width={width}\n                height={height}\n                decoding=\"async\"\n                className=\"dark:hidden!\"\n            />\n            <img\n                src={dark}\n                alt={alt}\n                loading={loading}\n                width={width}\n                height={height}\n                decoding=\"async\"\n                className=\"hidden! dark:block!\"\n            />\n        </>\n    );\n}\n\ninterface FrameProps {\n    children: ReactNode;\n    /** A soft contact shadow under the device. */\n    shadow?: boolean;\n}\n\n/** A MacBook Pro: a notched display with the macOS menu bar, on an aluminium base that follows the theme. */\nexport function LaptopFrame({\n    children,\n    shadow = true,\n    app,\n    menu = [],\n    time,\n}: FrameProps & { app: string; menu?: readonly string[]; time?: string }) {\n    return (\n        <div className=\"lar-device lar-laptop\" data-shadow={shadow ? 'float' : undefined}>\n            <div className=\"lar-laptop__lid\">\n                <div className=\"lar-laptop__screen\">\n                    <div className=\"lar-laptop__menubar\" aria-hidden=\"true\">\n                        <LarMenuMark />\n                        <span>{app}</span>\n                        {menu.map((item) => (\n                            <span key={item}>{item}</span>\n                        ))}\n                        {time ? <time>{time}</time> : null}\n                    </div>\n                    <div className=\"lar-laptop__notch\" aria-hidden=\"true\" />\n                    <div className=\"lar-laptop__app\">{children}</div>\n                </div>\n            </div>\n            <div className=\"lar-laptop__base\" aria-hidden=\"true\" />\n        </div>\n    );\n}\n\n/** The menu bar's leading glyph: the Lar mark stands in for the Apple menu, so the frame claims no one's logo. */\nfunction LarMenuMark() {\n    return (\n        <svg viewBox=\"0 0 100 100\" className=\"size-[1.3cqi] shrink-0\" aria-hidden=\"true\">\n            <path d=\"M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z\" fill=\"currentColor\" />\n            <path\n                d=\"M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n}\n\n/** An iPhone Pro with its Dynamic Island and side buttons, for an iOS screenshot at 1206 × 2622. */\nexport function PhoneFrame({ children, shadow = true }: FrameProps) {\n    return (\n        <div className=\"lar-device\" data-shadow={shadow ? 'float' : undefined}>\n            <div className=\"lar-phone\">\n                <i className=\"lar-phone__button lar-phone__button--action\" aria-hidden=\"true\" />\n                <i className=\"lar-phone__button lar-phone__button--volume-up\" aria-hidden=\"true\" />\n                <i className=\"lar-phone__button lar-phone__button--volume-down\" aria-hidden=\"true\" />\n                <i className=\"lar-phone__button lar-phone__button--side\" aria-hidden=\"true\" />\n                <div className=\"lar-phone__screen\">\n                    <div className=\"lar-phone__island\" aria-hidden=\"true\" />\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\n/** An iPad Pro with even, thin bezels; the screenshot sets the aspect ratio. */\nexport function TabletFrame({ children, shadow = true, aspect = '4 / 3' }: FrameProps & { aspect?: string }) {\n    return (\n        <div className=\"lar-device\" data-shadow={shadow ? 'float' : undefined}>\n            <div className=\"lar-tablet\">\n                <div className=\"lar-tablet__screen\" style={{ aspectRatio: aspect }}>\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\n/** A slim television on a pedestal, for a 16:9 capture. */\nexport function TvFrame({ children, shadow = true, stand = true }: FrameProps & { stand?: boolean }) {\n    return (\n        <div className=\"lar-device lar-tv\" data-shadow={shadow ? 'float' : undefined}>\n            <div className=\"lar-tv__panel\">\n                <div className=\"lar-tv__screen\">{children}</div>\n            </div>\n            {stand ? <div className=\"lar-tv__stand\" aria-hidden=\"true\" /> : null}\n        </div>\n    );\n}\n\n/** A Safari-style window with traffic lights and an address field. */\nexport function BrowserFrame({\n    children,\n    shadow = true,\n    address,\n    aspect = '16 / 10',\n    fade,\n    tone,\n}: FrameProps & {\n    address: string;\n    aspect?: string;\n    fade?: 'right' | 'bottom' | 'both' | 'under' | 'tail';\n    tone?: 'dark';\n}) {\n    return (\n        <div\n            className={`lar-device ${tone === 'dark' ? 'dark lar-dark-palette' : ''}`}\n            data-shadow={shadow ? 'float' : undefined}\n        >\n            <div className=\"lar-window\" data-fade={fade === 'bottom' || fade === 'tail' ? fade : undefined}>\n                <div className=\"lar-window__bar\" aria-hidden=\"true\">\n                    <span className=\"lar-window__lights\">\n                        <i />\n                        <i />\n                        <i />\n                    </span>\n                    <span className=\"lar-window__address\">{address}</span>\n                </div>\n                <div\n                    className=\"lar-window__screen\"\n                    data-fade={fade === 'bottom' || fade === 'tail' ? undefined : fade}\n                    style={{ aspectRatio: aspect }}\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\n/** A Mac app window whose screenshot already carries its own title bar: corners, a hairline and depth only.\n *  A bezel sets a dark-only capture in a dark display edge, so it reads as a deliberate dark shot on a light page;\n *  a fade dissolves an edge where the capture is cropped. */\nexport function AppWindow({\n    children,\n    shadow = true,\n    bezel,\n    fade,\n}: FrameProps & { bezel?: boolean; fade?: 'right' | 'bottom' | 'both' }) {\n    return (\n        <div className=\"lar-device\" data-shadow={shadow ? 'float' : undefined}>\n            <div className=\"lar-app-window\" data-bezel={bezel || undefined} data-fade={fade}>\n                <div className=\"lar-app-window__fade\">{children}</div>\n            </div>\n        </div>\n    );\n}\n\n/** A close-up cut from a screenshot, raised on glass above a device to point at one detail. */\nexport function Callout({ children, compact, fade }: { children: ReactNode; compact?: boolean; fade?: boolean }) {\n    return (\n        <div className={`lar-callout ${compact ? 'mx-auto max-w-[240px]' : ''}`} data-fade={fade || undefined}>\n            <div className=\"lar-callout__fade\">{children}</div>\n        </div>\n    );\n}\n\n/** A close-up with a smaller detail card overlapping its lower corner. */\nexport function CalloutPair({ base, detail }: { base: ReactNode; detail: ReactNode }) {\n    return (\n        <div className=\"relative pb-[18%]\">\n            {base}\n            <div className=\"absolute right-[-2%] bottom-0 w-[62%] rotate-[1.5deg]\">{detail}</div>\n        </div>\n    );\n}\n\n/** Close-ups one under another, for a phone-width column. */\nexport function CalloutStack({ children }: { children: ReactNode }) {\n    return <div className=\"mx-auto flex max-w-[330px] flex-col gap-3\">{children}</div>;\n}\n\n/** Media with a short, numbered reading guide floating over a quiet corner of it, on wide screens. */\nexport function GuidedMedia({\n    children,\n    guide,\n    label,\n}: {\n    children: ReactNode;\n    guide: readonly string[];\n    label: string;\n}) {\n    return (\n        <div className=\"relative flex flex-col gap-4\">\n            {children}\n            <ol\n                aria-label={label}\n                className=\"text-base-content md:glass-menu flex flex-col gap-2 text-sm leading-5 md:absolute md:top-[8%] md:right-[4%] md:max-w-[260px] md:rounded-xl md:p-4\"\n            >\n                {guide.map((step, index) => (\n                    <li key={step} className=\"flex gap-2.5\">\n                        <span className=\"bg-primary text-primary-content inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums\">\n                            {index + 1}\n                        </span>\n                        {step}\n                    </li>\n                ))}\n            </ol>\n        </div>\n    );\n}\n"],"mappings":";;;AAeA,SAAgB,WAAW,EAAE,MAAM,OAAO,KAAK,OAAO,OAAO,UAA2B;CACpF,MAAM,UAAU,QAAQ,UAAU;CAClC,MAAM,WAAW,QAAQ,SAAS;CAElC,IAAI,CAAC,OACD,OACI,oBAAC,OAAD;EACI,KAAK;EACA;EACI;EACT,eAAe;EACR;EACC;EACR,UAAS;CACZ,CAAA;CAGT,OACI,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,OAAD;EACI,KAAK;EACA;EACI;EACT,eAAe;EACR;EACC;EACR,UAAS;EACT,WAAU;CACb,CAAA,GACD,oBAAC,OAAD;EACI,KAAK;EACA;EACI;EACF;EACC;EACR,UAAS;EACT,WAAU;CACb,CAAA,CACH,EAAA,CAAA;AAEV;;AASA,SAAgB,YAAY,EACxB,UACA,SAAS,MACT,KACA,OAAO,CAAC,GACR,QACsE;CACtE,OACI,qBAAC,OAAD;EAAK,WAAU;EAAwB,eAAa,SAAS,UAAU,KAAA;EAAvE,UAAA,CACI,oBAAC,OAAD;GAAK,WAAU;GACX,UAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,qBAAC,OAAD;MAAK,WAAU;MAAsB,eAAY;MAAjD,UAAA;OACI,oBAAC,aAAD,CAAc,CAAA;OACd,oBAAC,QAAD,EAAA,UAAO,IAAU,CAAA;OAChB,KAAK,KAAK,SACP,oBAAC,QAAD,EAAA,UAAkB,KAAW,GAAlB,IAAkB,CAChC;OACA,OAAO,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI;MAC7B;;KACL,oBAAC,OAAD;MAAK,WAAU;MAAoB,eAAY;KAAQ,CAAA;KACvD,oBAAC,OAAD;MAAK,WAAU;MAAmB;KAAc,CAAA;IAC/C;;EACJ,CAAA,GACL,oBAAC,OAAD;GAAK,WAAU;GAAmB,eAAY;EAAQ,CAAA,CACrD;;AAEb;;AAGA,SAAS,cAAc;CACnB,OACI,qBAAC,OAAD;EAAK,SAAQ;EAAc,WAAU;EAAyB,eAAY;EAA1E,UAAA,CACI,oBAAC,QAAD;GAAM,GAAE;GAA4C,MAAK;EAAgB,CAAA,GACzE,oBAAC,QAAD;GACI,GAAE;GACF,MAAK;EACR,CAAA,CACA;;AAEb;;AAGA,SAAgB,WAAW,EAAE,UAAU,SAAS,QAAoB;CAChE,OACI,oBAAC,OAAD;EAAK,WAAU;EAAa,eAAa,SAAS,UAAU,KAAA;EACxD,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACI,oBAAC,KAAD;KAAG,WAAU;KAA8C,eAAY;IAAQ,CAAA;IAC/E,oBAAC,KAAD;KAAG,WAAU;KAAiD,eAAY;IAAQ,CAAA;IAClF,oBAAC,KAAD;KAAG,WAAU;KAAmD,eAAY;IAAQ,CAAA;IACpF,oBAAC,KAAD;KAAG,WAAU;KAA4C,eAAY;IAAQ,CAAA;IAC7E,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACI,oBAAC,OAAD;MAAK,WAAU;MAAoB,eAAY;KAAQ,CAAA,GACtD,QACA;;GACJ;;CACJ,CAAA;AAEb;;AAGA,SAAgB,YAAY,EAAE,UAAU,SAAS,MAAM,SAAS,WAA6C;CACzG,OACI,oBAAC,OAAD;EAAK,WAAU;EAAa,eAAa,SAAS,UAAU,KAAA;EACxD,UAAA,oBAAC,OAAD;GAAK,WAAU;GACX,UAAA,oBAAC,OAAD;IAAK,WAAU;IAAqB,OAAO,EAAE,aAAa,OAAO;IAC5D;GACA,CAAA;EACJ,CAAA;CACJ,CAAA;AAEb;;AAGA,SAAgB,QAAQ,EAAE,UAAU,SAAS,MAAM,QAAQ,QAA0C;CACjG,OACI,qBAAC,OAAD;EAAK,WAAU;EAAoB,eAAa,SAAS,UAAU,KAAA;EAAnE,UAAA,CACI,oBAAC,OAAD;GAAK,WAAU;GACX,UAAA,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA;EAC9C,CAAA,GACJ,QAAQ,oBAAC,OAAD;GAAK,WAAU;GAAgB,eAAY;EAAQ,CAAA,IAAI,IAC/D;;AAEb;;AAGA,SAAgB,aAAa,EACzB,UACA,SAAS,MACT,SACA,SAAS,WACT,MACA,QAMD;CACC,OACI,oBAAC,OAAD;EACI,WAAW,cAAc,SAAS,SAAS,0BAA0B;EACrE,eAAa,SAAS,UAAU,KAAA;EAEhC,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAa,aAAW,SAAS,YAAY,SAAS,SAAS,OAAO,KAAA;GAArF,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAkB,eAAY;IAA7C,UAAA,CACI,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACI,oBAAC,KAAD,CAAI,CAAA;MACJ,oBAAC,KAAD,CAAI,CAAA;MACJ,oBAAC,KAAD,CAAI,CAAA;KACF;IACN,CAAA,GAAA,oBAAC,QAAD;KAAM,WAAU;KAAuB,UAAA;IAAc,CAAA,CACpD;GACL,CAAA,GAAA,oBAAC,OAAD;IACI,WAAU;IACV,aAAW,SAAS,YAAY,SAAS,SAAS,KAAA,IAAY;IAC9D,OAAO,EAAE,aAAa,OAAO;IAE5B;GACA,CAAA,CACJ;;CACJ,CAAA;AAEb;;;;AAKA,SAAgB,UAAU,EACtB,UACA,SAAS,MACT,OACA,QACqE;CACrE,OACI,oBAAC,OAAD;EAAK,WAAU;EAAa,eAAa,SAAS,UAAU,KAAA;EACxD,UAAA,oBAAC,OAAD;GAAK,WAAU;GAAiB,cAAY,SAAS,KAAA;GAAW,aAAW;GACvE,UAAA,oBAAC,OAAD;IAAK,WAAU;IAAwB;GAAc,CAAA;EACpD,CAAA;CACJ,CAAA;AAEb;;AAGA,SAAgB,QAAQ,EAAE,UAAU,SAAS,QAAoE;CAC7G,OACI,oBAAC,OAAD;EAAK,WAAW,eAAe,UAAU,0BAA0B;EAAM,aAAW,QAAQ,KAAA;EACxF,UAAA,oBAAC,OAAD;GAAK,WAAU;GAAqB;EAAc,CAAA;CACjD,CAAA;AAEb;;AAGA,SAAgB,YAAY,EAAE,MAAM,UAAkD;CAClF,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACK,MACD,oBAAC,OAAD;GAAK,WAAU;GAAyD,UAAA;EAAY,CAAA,CACnF;;AAEb;;AAGA,SAAgB,aAAa,EAAE,YAAqC;CAChE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAA6C;CAAc,CAAA;AACrF;;AAGA,SAAgB,YAAY,EACxB,UACA,OACA,SAKD;CACC,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACK,UACD,oBAAC,MAAD;GACI,cAAY;GACZ,WAAU;GAET,UAAA,MAAM,KAAK,MAAM,UACd,qBAAC,MAAD;IAAe,WAAU;IAAzB,UAAA,CACI,oBAAC,QAAD;KAAM,WAAU;KACX,UAAA,QAAQ;IACP,CAAA,GACL,IACD;GALK,GAAA,IAKL,CACP;EACD,CAAA,CACH;;AAEb"}

package/dist/showcase/FeatureRow.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+interface FeatureRowProps {
+  eyebrow?: string;
+  title: string;
+  children: ReactNode;
+  points?: readonly string[];
+  media: ReactNode;
+  /** Puts the media on the left. */
+  reverse?: boolean;
+  /** Copy in two columns above media that spans the full width, for detailed screenshots. */
+  wide?: boolean;
+  /** A status chip beside the eyebrow. */
+  badge?: ReactNode;
+  /** How wide a wide row's media runs: the whole column, or a centred, readable measure. */
+  mediaWidth?: 'full' | 'measure';
+  /** Gives the media two-thirds of a side-by-side row instead of seven twelfths. */
+  largeMedia?: boolean;
+}
+/** A feature told in copy on one side and shown on a device on the other. */
+export declare function FeatureRow({ eyebrow, title, children, points, media, reverse, wide, badge, mediaWidth, largeMedia }: FeatureRowProps): import("react").JSX.Element;
+/** Checked lines under a feature. */
+export declare function PointList({ points }: {
+  points: readonly string[];
+}): import("react").JSX.Element;
+/** A stack of feature rows with room between them. */
+export declare function FeatureRows({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=FeatureRow.d.ts.map