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

package/dist/layout/Flow.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { Flex, Grid, SimpleGrid, Stack } from "@ninna-ui/layout";
+// src/layout/Flow.tsx
+const spacing = {
+	none: "0",
+	tight: "1",
+	related: "2",
+	group: "3",
+	section: "4",
+	page: "6"
+};
+function Stack$1({ space = "group", ...props }) {
+	return /* @__PURE__ */ jsx(Stack, {
+		...props,
+		gap: spacing[space]
+	});
+}
+function Inline({ space = "related", wrap, ...props }) {
+	return /* @__PURE__ */ jsx(Flex, {
+		...props,
+		gap: spacing[space],
+		wrap: wrap ? "wrap" : "nowrap"
+	});
+}
+function Grid$1({ variant = "content", ...props }) {
+	if (variant === "posters") return /* @__PURE__ */ jsx(SimpleGrid, {
+		...props,
+		gap: "4",
+		style: { gridTemplateColumns: "repeat(auto-fill, minmax(min(6.5rem, 100%), 1fr))" }
+	});
+	if (variant === "details") return /* @__PURE__ */ jsx(Grid, {
+		...props,
+		gap: "6",
+		columns: {
+			base: 1,
+			md: 2
+		}
+	});
+	if (variant === "pairs") return /* @__PURE__ */ jsx(Grid, {
+		...props,
+		gap: "3",
+		columns: {
+			base: 1,
+			lg: 2
+		}
+	});
+	if (variant === "overview") return /* @__PURE__ */ jsx(Grid, {
+		...props,
+		gap: "3",
+		columns: {
+			base: 1,
+			md: 2,
+			lg: 3,
+			"2xl": 4
+		}
+	});
+	return /* @__PURE__ */ jsx(SimpleGrid, {
+		...props,
+		gap: "3",
+		minChildWidth: variant === "metrics" ? "min(11rem, 100%)" : "min(16rem, 100%)"
+	});
+}
+export { Grid$1 as Grid, Inline, Stack$1 as Stack };
+
+//# sourceMappingURL=Flow.js.map

package/dist/layout/Flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.js","names":["Stack","NinnaStack","NinnaFlex","Grid","NinnaGrid","NinnaResponsiveGrid"],"sources":["../../src/layout/Flow.tsx"],"sourcesContent":["import {\n    Flex as NinnaFlex,\n    type FlexProps,\n    Grid as NinnaResponsiveGrid,\n    SimpleGrid as NinnaGrid,\n    Stack as NinnaStack,\n    type StackProps as NinnaStackProps,\n} from '@ninna-ui/layout';\nimport type { ComponentProps, ElementType } from 'react';\n\nconst spacing = { none: '0', tight: '1', related: '2', group: '3', section: '4', page: '6' } as const;\n\nexport type FlowSpace = keyof typeof spacing;\n\nexport type StackProps<C extends ElementType = 'div'> = Omit<NinnaStackProps<C>, 'gap' | 'direction'> & {\n    space?: FlowSpace;\n};\n\nexport function Stack<C extends ElementType = 'div'>({ space = 'group', ...props }: StackProps<C>) {\n    return <NinnaStack {...(props as NinnaStackProps<C>)} gap={spacing[space]} />;\n}\n\ntype InlineProps<C extends ElementType> = Omit<FlexProps<C>, 'gap' | 'direction' | 'wrap'> & {\n    space?: FlowSpace;\n    wrap?: boolean;\n};\n\nexport function Inline<C extends ElementType = 'div'>({ space = 'related', wrap, ...props }: InlineProps<C>) {\n    return <NinnaFlex {...(props as FlexProps<C>)} gap={spacing[space]} wrap={wrap ? 'wrap' : 'nowrap'} />;\n}\n\ntype GridProps = Omit<ComponentProps<typeof NinnaGrid>, 'gap' | 'minChildWidth' | 'columns'> & {\n    variant?: 'metrics' | 'content' | 'overview' | 'details' | 'pairs' | 'posters';\n};\n\nexport function Grid({ variant = 'content', ...props }: GridProps) {\n    if (variant === 'posters')\n        return (\n            <NinnaGrid\n                {...props}\n                gap=\"4\"\n                style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(6.5rem, 100%), 1fr))' }}\n            />\n        );\n\n    if (variant === 'details') return <NinnaResponsiveGrid {...props} gap=\"6\" columns={{ base: 1, md: 2 }} />;\n\n    if (variant === 'pairs') return <NinnaResponsiveGrid {...props} gap=\"3\" columns={{ base: 1, lg: 2 }} />;\n\n    if (variant === 'overview')\n        return <NinnaResponsiveGrid {...props} gap=\"3\" columns={{ base: 1, md: 2, lg: 3, '2xl': 4 }} />;\n\n    return (\n        <NinnaGrid {...props} gap=\"3\" minChildWidth={variant === 'metrics' ? 'min(11rem, 100%)' : 'min(16rem, 100%)'} />\n    );\n}\n"],"mappings":";;;AAUA,MAAM,UAAU;CAAE,MAAM;CAAK,OAAO;CAAK,SAAS;CAAK,OAAO;CAAK,SAAS;CAAK,MAAM;AAAI;AAQ3F,SAAgBA,QAAqC,EAAE,QAAQ,SAAS,GAAG,SAAwB;CAC/F,OAAO,oBAACC,OAAD;EAAY,GAAK;EAA8B,KAAK,QAAQ;CAAS,CAAA;AAChF;AAOA,SAAgB,OAAsC,EAAE,QAAQ,WAAW,MAAM,GAAG,SAAyB;CACzG,OAAO,oBAACC,MAAD;EAAW,GAAK;EAAwB,KAAK,QAAQ;EAAQ,MAAM,OAAO,SAAS;CAAW,CAAA;AACzG;AAMA,SAAgBC,OAAK,EAAE,UAAU,WAAW,GAAG,SAAoB;CAC/D,IAAI,YAAY,WACZ,OACI,oBAACC,YAAD;EACI,GAAI;EACJ,KAAI;EACJ,OAAO,EAAE,qBAAqB,oDAAoD;CACrF,CAAA;CAGT,IAAI,YAAY,WAAW,OAAO,oBAACC,MAAD;EAAqB,GAAI;EAAO,KAAI;EAAI,SAAS;GAAE,MAAM;GAAG,IAAI;EAAE;CAAI,CAAA;CAExG,IAAI,YAAY,SAAS,OAAO,oBAACA,MAAD;EAAqB,GAAI;EAAO,KAAI;EAAI,SAAS;GAAE,MAAM;GAAG,IAAI;EAAE;CAAI,CAAA;CAEtG,IAAI,YAAY,YACZ,OAAO,oBAACA,MAAD;EAAqB,GAAI;EAAO,KAAI;EAAI,SAAS;GAAE,MAAM;GAAG,IAAI;GAAG,IAAI;GAAG,OAAO;EAAE;CAAI,CAAA;CAElG,OACI,oBAACD,YAAD;EAAW,GAAI;EAAO,KAAI;EAAI,eAAe,YAAY,YAAY,qBAAqB;CAAqB,CAAA;AAEvH"}

package/dist/layout/PageLayout.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+interface PageLayoutProps {
+  label?: string;
+  children?: ReactNode;
+  header?: ReactNode;
+  title?: string;
+  description?: ReactNode;
+  variant?: 'default' | 'detail';
+}
+export declare function PageLayout({ children, header, title, description, label, variant }: PageLayoutProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PageLayout.d.ts.map

package/dist/layout/PageLayout.js

@@ -0,0 +1,31 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { ContentContainer } from "./ContentContainer.js";
+import { Stack } from "./Flow.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/PageLayout.tsx
+function PageLayout({ children, header, title, description, label, variant = "default" }) {
+	return /* @__PURE__ */ jsxs("main", {
+		"aria-label": label,
+		className: "flex min-w-0 flex-1 flex-col [--lar-page-gutter:--spacing(4)]",
+		children: [header, /* @__PURE__ */ jsx(ContentContainer, {
+			className: "pt-(--lar-page-gutter) pb-10 md:pb-12",
+			children: /* @__PURE__ */ jsxs(Stack, {
+				space: variant === "detail" ? "page" : "section",
+				children: [title ? /* @__PURE__ */ jsxs(Stack, {
+					space: "related",
+					children: [/* @__PURE__ */ jsx(Heading, {
+						as: "h1",
+						variant: "page",
+						children: title
+					}), description ? /* @__PURE__ */ jsx(Text, {
+						tone: "muted",
+						children: description
+					}) : null]
+				}) : null, children]
+			})
+		})]
+	});
+}
+export { PageLayout };
+
+//# sourceMappingURL=PageLayout.js.map

package/dist/layout/PageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.js","names":[],"sources":["../../src/layout/PageLayout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Heading, Text } from '../typography/Typography';\nimport { ContentContainer } from './ContentContainer';\nimport { Stack } from './Flow';\n\ninterface PageLayoutProps {\n    label?: string;\n    children?: ReactNode;\n    header?: ReactNode;\n    title?: string;\n    description?: ReactNode;\n    variant?: 'default' | 'detail';\n}\n\nexport function PageLayout({ children, header, title, description, label, variant = 'default' }: PageLayoutProps) {\n    return (\n        <main aria-label={label} className=\"flex min-w-0 flex-1 flex-col [--lar-page-gutter:--spacing(4)]\">\n            {header}\n            <ContentContainer className=\"pt-(--lar-page-gutter) pb-10 md:pb-12\">\n                <Stack space={variant === 'detail' ? 'page' : 'section'}>\n                    {title ? (\n                        <Stack space=\"related\">\n                            <Heading as=\"h1\" variant=\"page\">\n                                {title}\n                            </Heading>\n                            {description ? <Text tone=\"muted\">{description}</Text> : null}\n                        </Stack>\n                    ) : null}\n                    {children}\n                </Stack>\n            </ContentContainer>\n        </main>\n    );\n}\n"],"mappings":";;;;;AAeA,SAAgB,WAAW,EAAE,UAAU,QAAQ,OAAO,aAAa,OAAO,UAAU,aAA8B;CAC9G,OACI,qBAAC,QAAD;EAAM,cAAY;EAAO,WAAU;EAAnC,UAAA,CACK,QACD,oBAAC,kBAAD;GAAkB,WAAU;GACxB,UAAA,qBAAC,OAAD;IAAO,OAAO,YAAY,WAAW,SAAS;IAA9C,UAAA,CACK,QACG,qBAAC,OAAD;KAAO,OAAM;KAAb,UAAA,CACI,oBAAC,SAAD;MAAS,IAAG;MAAK,SAAQ;MACpB,UAAA;KACI,CAAA,GACR,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAS,UAAA;KAAkB,CAAA,IAAI,IACtD;IACP,CAAA,IAAA,MACH,QACE;;EACO,CAAA,CAChB;;AAEd"}

package/dist/layout/PageSection.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+declare const widths: {
+  readonly narrow: 'max-w-[880px]';
+  readonly default: 'max-w-[1200px]';
+};
+declare const spacing: {
+  readonly hero: 'pt-16 pb-20 sm:pt-24 sm:pb-28';
+  readonly default: 'py-12 sm:py-20';
+  readonly tight: 'py-12 sm:py-20';
+  /** The last band before the footer, which follows a full section. */
+  readonly closing: 'pt-0 pb-14 sm:pb-20';
+};
+interface PageSectionProps {
+  children: ReactNode;
+  id?: string;
+  width?: keyof typeof widths;
+  space?: keyof typeof spacing;
+  /** A raised band separates a section from the ones around it. */
+  tone?: 'plain' | 'raised';
+  /** Names the section for assistive technology when it has no SectionHeading. */
+  label?: string;
+  background?: ReactNode;
+  /** The section's SectionHeading, set above the content with room to breathe. */
+  heading?: ReactNode;
+}
+/** One band of a marketing page, centred in the page column. */
+export declare function PageSection({ children, id, width, space, tone, label, background, heading }: PageSectionProps): import("react").JSX.Element;
+interface SectionHeadingProps {
+  eyebrow?: string;
+  title: ReactNode;
+  lead?: ReactNode;
+  align?: 'center' | 'start';
+  level?: 'h1' | 'h2';
+  size?: 'display' | 'headline';
+}
+/** The eyebrow, title and lead that open a section. */
+export declare function SectionHeading({ eyebrow, title, lead, align, level, size }: SectionHeadingProps): import("react").JSX.Element;
+/** A short label above a title, in the brand navy. */
+export declare function Eyebrow({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PageSection.d.ts.map

package/dist/layout/PageSection.js

@@ -0,0 +1,63 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/PageSection.tsx
+const widths = {
+	narrow: "max-w-[880px]",
+	default: "max-w-[1200px]"
+};
+const spacing = {
+	hero: "pt-16 pb-20 sm:pt-24 sm:pb-28",
+	default: "py-12 sm:py-20",
+	tight: "py-12 sm:py-20",
+	/** The last band before the footer, which follows a full section. */
+	closing: "pt-0 pb-14 sm:pb-20"
+};
+/** One band of a marketing page, centred in the page column. */
+function PageSection({ children, id, width = "default", space = "default", tone = "plain", label, background, heading }) {
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label,
+		className: `relative isolate scroll-mt-16 ${tone === "raised" ? "border-base-300/80 bg-base-100/70 dark:bg-base-100/50 border-y" : ""}`,
+		children: [background, /* @__PURE__ */ jsxs("div", {
+			className: `mx-auto w-full px-5 sm:px-8 ${widths[width]} ${spacing[space]}`,
+			children: [heading ? /* @__PURE__ */ jsx("div", {
+				className: "lar-reveal mb-8 sm:mb-16",
+				children: heading
+			}) : null, children]
+		})]
+	});
+}
+/** The eyebrow, title and lead that open a section. */
+function SectionHeading({ eyebrow, title, lead, align = "center", level = "h2", size = "headline" }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("header", {
+		"aria-labelledby": id,
+		className: `flex flex-col gap-4 ${align === "center" ? "mx-auto max-w-[760px] items-center text-center" : "max-w-[640px]"}`,
+		children: [
+			eyebrow ? /* @__PURE__ */ jsx(Eyebrow, { children: eyebrow }) : null,
+			/* @__PURE__ */ jsx(Heading, {
+				id,
+				as: level,
+				variant: size,
+				children: title
+			}),
+			lead ? /* @__PURE__ */ jsx(Text, {
+				variant: "lead",
+				tone: "muted",
+				className: align === "center" ? "max-w-[620px]" : "",
+				children: lead
+			}) : null
+		]
+	});
+}
+/** A short label above a title, in the brand navy. */
+function Eyebrow({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-primary text-[13px] font-semibold tracking-[-0.005em] dark:text-[color-mix(in_srgb,var(--color-primary)_50%,white)]",
+		children
+	});
+}
+export { Eyebrow, PageSection, SectionHeading };
+
+//# sourceMappingURL=PageSection.js.map

package/dist/layout/PageSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSection.js","names":[],"sources":["../../src/layout/PageSection.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { Heading, Text } from '../typography/Typography';\n\nconst widths = {\n    narrow: 'max-w-[880px]',\n    default: 'max-w-[1200px]',\n} as const;\n\nconst spacing = {\n    hero: 'pt-16 pb-20 sm:pt-24 sm:pb-28',\n    default: 'py-12 sm:py-20',\n    tight: 'py-12 sm:py-20',\n    /** The last band before the footer, which follows a full section. */\n    closing: 'pt-0 pb-14 sm:pb-20',\n} as const;\n\ninterface PageSectionProps {\n    children: ReactNode;\n    id?: string;\n    width?: keyof typeof widths;\n    space?: keyof typeof spacing;\n    /** A raised band separates a section from the ones around it. */\n    tone?: 'plain' | 'raised';\n    /** Names the section for assistive technology when it has no SectionHeading. */\n    label?: string;\n    background?: ReactNode;\n    /** The section's SectionHeading, set above the content with room to breathe. */\n    heading?: ReactNode;\n}\n\n/** One band of a marketing page, centred in the page column. */\nexport function PageSection({\n    children,\n    id,\n    width = 'default',\n    space = 'default',\n    tone = 'plain',\n    label,\n    background,\n    heading,\n}: PageSectionProps) {\n    return (\n        <section\n            id={id}\n            aria-label={label}\n            className={`relative isolate scroll-mt-16 ${tone === 'raised' ? 'border-base-300/80 bg-base-100/70 dark:bg-base-100/50 border-y' : ''}`}\n        >\n            {background}\n            <div className={`mx-auto w-full px-5 sm:px-8 ${widths[width]} ${spacing[space]}`}>\n                {heading ? <div className=\"lar-reveal mb-8 sm:mb-16\">{heading}</div> : null}\n                {children}\n            </div>\n        </section>\n    );\n}\n\ninterface SectionHeadingProps {\n    eyebrow?: string;\n    title: ReactNode;\n    lead?: ReactNode;\n    align?: 'center' | 'start';\n    level?: 'h1' | 'h2';\n    size?: 'display' | 'headline';\n}\n\n/** The eyebrow, title and lead that open a section. */\nexport function SectionHeading({\n    eyebrow,\n    title,\n    lead,\n    align = 'center',\n    level = 'h2',\n    size = 'headline',\n}: SectionHeadingProps) {\n    const id = useId();\n\n    return (\n        <header\n            aria-labelledby={id}\n            className={`flex flex-col gap-4 ${align === 'center' ? 'mx-auto max-w-[760px] items-center text-center' : 'max-w-[640px]'}`}\n        >\n            {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}\n            <Heading id={id} as={level} variant={size}>\n                {title}\n            </Heading>\n            {lead ? (\n                <Text variant=\"lead\" tone=\"muted\" className={align === 'center' ? 'max-w-[620px]' : ''}>\n                    {lead}\n                </Text>\n            ) : null}\n        </header>\n    );\n}\n\n/** A short label above a title, in the brand navy. */\nexport function Eyebrow({ children }: { children: ReactNode }) {\n    return (\n        <span className=\"text-primary text-[13px] font-semibold tracking-[-0.005em] dark:text-[color-mix(in_srgb,var(--color-primary)_50%,white)]\">\n            {children}\n        </span>\n    );\n}\n"],"mappings":";;;;AAIA,MAAM,SAAS;CACX,QAAQ;CACR,SAAS;AACb;AAEA,MAAM,UAAU;CACZ,MAAM;CACN,SAAS;CACT,OAAO;;CAEP,SAAS;AACb;;AAiBA,SAAgB,YAAY,EACxB,UACA,IACA,QAAQ,WACR,QAAQ,WACR,OAAO,SACP,OACA,YACA,WACiB;CACjB,OACI,qBAAC,WAAD;EACQ;EACJ,cAAY;EACZ,WAAW,iCAAiC,SAAS,WAAW,mEAAmE;EAHvI,UAAA,CAKK,YACD,qBAAC,OAAD;GAAK,WAAW,+BAA+B,OAAO,OAAO,GAAG,QAAQ;GAAxE,UAAA,CACK,UAAU,oBAAC,OAAD;IAAK,WAAU;IAA4B,UAAA;GAAa,CAAA,IAAI,MACtE,QACA;EACA,CAAA,CAAA;;AAEjB;;AAYA,SAAgB,eAAe,EAC3B,SACA,OACA,MACA,QAAQ,UACR,QAAQ,MACR,OAAO,cACa;CACpB,MAAM,KAAK,MAAM;CAEjB,OACI,qBAAC,UAAD;EACI,mBAAiB;EACjB,WAAW,uBAAuB,UAAU,WAAW,mDAAmD;EAF9G,UAAA;GAIK,UAAU,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,IAAI;GAC1C,oBAAC,SAAD;IAAa;IAAI,IAAI;IAAO,SAAS;IAChC,UAAA;GACI,CAAA;GACR,OACG,oBAAC,MAAD;IAAM,SAAQ;IAAO,MAAK;IAAQ,WAAW,UAAU,WAAW,kBAAkB;IAC/E,UAAA;GACC,CAAA,IACN;EACA;;AAEhB;;AAGA,SAAgB,QAAQ,EAAE,YAAqC;CAC3D,OACI,oBAAC,QAAD;EAAM,WAAU;EACX;CACC,CAAA;AAEd"}

package/dist/layout/ScrollArea.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from "react";
+export type ScrollAreaProps = Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style'>;
+export declare function ScrollArea(props: ScrollAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/layout/ScrollArea.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+// src/layout/ScrollArea.tsx
+function ScrollArea(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: "max-h-64 min-h-0 overflow-y-auto overscroll-contain pr-1"
+	});
+}
+export { ScrollArea };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/layout/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../src/layout/ScrollArea.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nexport type ScrollAreaProps = Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style'>;\n\nexport function ScrollArea(props: ScrollAreaProps) {\n    return <div {...props} className=\"max-h-64 min-h-0 overflow-y-auto overscroll-contain pr-1\" />;\n}\n"],"mappings":";;AAIA,SAAgB,WAAW,OAAwB;CAC/C,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAU;CAA4D,CAAA;AACjG"}

package/dist/layout/Section.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+interface SectionProps {
+  title: string;
+  description?: ReactNode;
+  count?: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  level?: 'h2' | 'h3' | 'h4';
+}
+export declare function Section({ title, description, count, actions, children, level }: SectionProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Section.d.ts.map

package/dist/layout/Section.js

@@ -0,0 +1,36 @@
+import { Badge } from "../display/Badge.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { Inline, Stack } from "./Flow.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/Section.tsx
+function Section({ title, description, count, actions, children, level = "h2" }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Stack, {
+		as: "section",
+		space: "section",
+		"aria-labelledby": id,
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			space: "tight",
+			children: [/* @__PURE__ */ jsxs(Inline, {
+				justify: "between",
+				align: "center",
+				children: [/* @__PURE__ */ jsxs(Inline, {
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Heading, {
+						id,
+						as: level,
+						variant: level === "h2" ? "section" : "subsection",
+						children: title
+					}), count != null ? /* @__PURE__ */ jsx(Badge, { children: count }) : null]
+				}), actions]
+			}), description ? /* @__PURE__ */ jsx(Text, {
+				tone: "muted",
+				children: description
+			}) : null]
+		}), children]
+	});
+}
+export { Section };
+
+//# sourceMappingURL=Section.js.map

package/dist/layout/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","names":[],"sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { Badge } from '../display/Badge';\nimport { Heading, Text } from '../typography/Typography';\nimport { Inline, Stack } from './Flow';\n\ninterface SectionProps {\n    title: string;\n    description?: ReactNode;\n    count?: ReactNode;\n    actions?: ReactNode;\n    children: ReactNode;\n    level?: 'h2' | 'h3' | 'h4';\n}\n\nexport function Section({ title, description, count, actions, children, level = 'h2' }: SectionProps) {\n    const id = useId();\n\n    return (\n        <Stack as=\"section\" space=\"section\" aria-labelledby={id}>\n            <Stack space=\"tight\">\n                <Inline justify=\"between\" align=\"center\">\n                    <Inline align=\"center\">\n                        <Heading id={id} as={level} variant={level === 'h2' ? 'section' : 'subsection'}>\n                            {title}\n                        </Heading>\n                        {count != null ? <Badge>{count}</Badge> : null}\n                    </Inline>\n                    {actions}\n                </Inline>\n                {description ? <Text tone=\"muted\">{description}</Text> : null}\n            </Stack>\n            {children}\n        </Stack>\n    );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,QAAQ,EAAE,OAAO,aAAa,OAAO,SAAS,UAAU,QAAQ,QAAsB;CAClG,MAAM,KAAK,MAAM;CAEjB,OACI,qBAAC,OAAD;EAAO,IAAG;EAAU,OAAM;EAAU,mBAAiB;EAArD,UAAA,CACI,qBAAC,OAAD;GAAO,OAAM;GAAb,UAAA,CACI,qBAAC,QAAD;IAAQ,SAAQ;IAAU,OAAM;IAAhC,UAAA,CACI,qBAAC,QAAD;KAAQ,OAAM;KAAd,UAAA,CACI,oBAAC,SAAD;MAAa;MAAI,IAAI;MAAO,SAAS,UAAU,OAAO,YAAY;MAC7D,UAAA;KACI,CAAA,GACR,SAAS,OAAO,oBAAC,OAAD,EAAA,UAAQ,MAAa,CAAA,IAAI,IACtC;IACP,CAAA,GAAA,OACG;GACP,CAAA,GAAA,cAAc,oBAAC,MAAD;IAAM,MAAK;IAAS,UAAA;GAAkB,CAAA,IAAI,IACtD;EACN,CAAA,GAAA,QACE;;AAEf"}

package/dist/layout/Site.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+export interface SiteLink {
+  label: string;
+  href: string;
+  current?: boolean;
+  external?: boolean;
+}
+interface SiteShellProps {
+  skipLabel: string;
+  header: ReactNode;
+  footer: ReactNode;
+  children: ReactNode;
+}
+/** The website frame: a glass header that stays on top while the document scrolls under it, then the footer. */
+export declare function SiteShell({ skipLabel, header, footer, children }: SiteShellProps): import("react").JSX.Element;
+interface SiteHeaderProps {
+  brand: ReactNode;
+  links: readonly SiteLink[];
+  actions: ReactNode;
+  /** Secondary controls, such as the theme switch: in the bar on wide screens and in the menu on narrow ones. */
+  utilities?: ReactNode;
+  menuLabel: string;
+  closeMenuLabel: string;
+  navigationLabel: string;
+  onNavigate: (href: string) => void;
+}
+export declare function SiteHeader({ brand, links, actions, utilities, menuLabel, closeMenuLabel, navigationLabel, onNavigate }: SiteHeaderProps): import("react").JSX.Element;
+interface SiteFooterProps {
+  brand: ReactNode;
+  tagline: string;
+  columns: readonly {
+    title: string;
+    links: readonly SiteLink[];
+  }[];
+  legal: string;
+  note: ReactNode;
+  onNavigate: (href: string) => void;
+}
+export declare function SiteFooter({ brand, tagline, columns, legal, note, onNavigate }: SiteFooterProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Site.d.ts.map

package/dist/layout/Site.js

@@ -0,0 +1,157 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuIcon, XIcon } from "lucide-react";
+// src/layout/Site.tsx
+/** The website frame: a glass header that stays on top while the document scrolls under it, then the footer. */
+function SiteShell({ skipLabel, header, footer, children }) {
+	const scrolled = useScrolled();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-dvh min-w-0 flex-col overflow-x-clip pr-[env(safe-area-inset-right)] pl-[env(safe-area-inset-left)]",
+		children: [
+			/* @__PURE__ */ jsx("a", {
+				href: "#content",
+				className: "bg-base-100 sr-only z-[60] rounded-md px-3 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3",
+				children: skipLabel
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-scrolled": scrolled || void 0,
+				className: "glass-bar data-scrolled:border-base-300 sticky top-0 z-50 shrink-0 border-b border-transparent pt-[env(safe-area-inset-top)] transition-[border-color] duration-300",
+				children: header
+			}),
+			/* @__PURE__ */ jsx("main", {
+				id: "content",
+				className: "flex-1",
+				children
+			}),
+			footer
+		]
+	});
+}
+function SiteHeader({ brand, links, actions, utilities, menuLabel, closeMenuLabel, navigationLabel, onNavigate }) {
+	const [open, setOpen] = useState(false);
+	function follow(href) {
+		setOpen(false);
+		onNavigate(href);
+	}
+	return /* @__PURE__ */ jsxs("header", {
+		className: "mx-auto flex h-14 w-full max-w-[1200px] items-center gap-6 px-5 sm:px-8",
+		children: [
+			brand,
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": navigationLabel,
+				className: "hidden items-center gap-1 md:flex",
+				children: links.map((link) => /* @__PURE__ */ jsx(NavLink, {
+					link,
+					onNavigate: follow
+				}, link.href))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-2 max-sm:[&>a]:hidden",
+				children: [utilities ? /* @__PURE__ */ jsx("div", {
+					className: "hidden md:contents",
+					children: utilities
+				}) : null, actions]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				...tabbable,
+				type: "button",
+				"aria-expanded": open,
+				"aria-controls": "site-menu",
+				"aria-label": open ? closeMenuLabel : menuLabel,
+				onClick: () => setOpen((value) => !value),
+				className: "text-base-800 hover:bg-base-200 -mr-2 inline-flex size-9 items-center justify-center rounded-md transition-colors md:hidden [&_svg]:size-5",
+				children: open ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {})
+			}),
+			open ? /* @__PURE__ */ jsxs("nav", {
+				id: "site-menu",
+				"aria-label": navigationLabel,
+				className: "glass-menu absolute inset-x-3 top-[calc(100%+0.5rem)] flex flex-col gap-1 rounded-2xl p-2 md:hidden",
+				children: [links.map((link) => /* @__PURE__ */ jsx(NavLink, {
+					link,
+					onNavigate: follow,
+					large: true
+				}, link.href)), utilities ? /* @__PURE__ */ jsx("div", {
+					className: "border-base-300 mt-1 border-t px-3 pt-3 pb-1",
+					children: utilities
+				}) : null]
+			}) : null
+		]
+	});
+}
+function NavLink({ link, onNavigate, large }) {
+	return /* @__PURE__ */ jsx("a", {
+		...tabbable,
+		href: link.href,
+		"aria-current": link.current ? "page" : void 0,
+		...link.external ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		onClick: (event) => {
+			if (link.external || event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+			event.preventDefault();
+			onNavigate(link.href);
+		},
+		className: `text-base-700 hover:text-base-content aria-[current=page]:text-base-content focus-visible:outline-primary rounded-md font-medium transition-colors focus-visible:outline-2 ${large ? "hover:bg-base-200 px-3 py-2.5 text-base" : "px-2.5 py-1.5 text-sm"}`,
+		children: link.label
+	});
+}
+function SiteFooter({ brand, tagline, columns, legal, note, onNavigate }) {
+	return /* @__PURE__ */ jsxs("footer", {
+		className: "border-base-300 bg-base-50 border-t",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mx-auto grid w-full max-w-[1200px] grid-cols-2 gap-x-6 gap-y-10 px-5 pt-14 pb-10 sm:px-8 md:grid-cols-[1.4fr_repeat(4,1fr)]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "col-span-2 flex flex-col gap-3 md:col-span-1",
+				children: [brand, /* @__PURE__ */ jsx("p", {
+					className: "text-base-700 max-w-64 text-sm leading-6",
+					children: tagline
+				})]
+			}), columns.map((column) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-base-800 text-xs font-semibold tracking-[0.06em] uppercase",
+					children: column.title
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-2",
+					children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+						...tabbable,
+						href: link.href,
+						...link.external ? {
+							target: "_blank",
+							rel: "noreferrer"
+						} : {},
+						onClick: (event) => {
+							if (link.external || !link.href.startsWith("/")) return;
+							if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+							event.preventDefault();
+							onNavigate(link.href);
+						},
+						className: "text-base-700 hover:text-base-content text-sm transition-colors",
+						children: link.label
+					}) }, link.href))
+				})]
+			}, column.title))]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mx-auto w-full max-w-[1200px] px-5 sm:px-8",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "border-base-300/70 text-base-700 flex flex-col gap-2 border-t py-6 text-xs sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ jsx("span", { children: legal }), /* @__PURE__ */ jsx("span", { children: note })]
+			})
+		})]
+	});
+}
+function useScrolled() {
+	const [scrolled, setScrolled] = useState(false);
+	useEffect(() => {
+		const update = () => setScrolled(window.scrollY > 4);
+		update();
+		window.addEventListener("scroll", update, { passive: true });
+		return () => window.removeEventListener("scroll", update);
+	}, []);
+	return scrolled;
+}
+export { SiteFooter, SiteHeader, SiteShell };
+
+//# sourceMappingURL=Site.js.map

package/dist/layout/Site.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Site.js","names":[],"sources":["../../src/layout/Site.tsx"],"sourcesContent":["import { MenuIcon, XIcon } from 'lucide-react';\nimport { type ReactNode, useEffect, useState } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport interface SiteLink {\n    label: string;\n    href: string;\n    current?: boolean;\n    external?: boolean;\n}\n\ninterface SiteShellProps {\n    skipLabel: string;\n    header: ReactNode;\n    footer: ReactNode;\n    children: ReactNode;\n}\n\n/** The website frame: a glass header that stays on top while the document scrolls under it, then the footer. */\nexport function SiteShell({ skipLabel, header, footer, children }: SiteShellProps) {\n    const scrolled = useScrolled();\n\n    return (\n        <div className=\"flex min-h-dvh min-w-0 flex-col overflow-x-clip pr-[env(safe-area-inset-right)] pl-[env(safe-area-inset-left)]\">\n            <a\n                href=\"#content\"\n                className=\"bg-base-100 sr-only z-[60] rounded-md px-3 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3\"\n            >\n                {skipLabel}\n            </a>\n            <div\n                data-scrolled={scrolled || undefined}\n                className=\"glass-bar data-scrolled:border-base-300 sticky top-0 z-50 shrink-0 border-b border-transparent pt-[env(safe-area-inset-top)] transition-[border-color] duration-300\"\n            >\n                {header}\n            </div>\n            <main id=\"content\" className=\"flex-1\">\n                {children}\n            </main>\n            {footer}\n        </div>\n    );\n}\n\ninterface SiteHeaderProps {\n    brand: ReactNode;\n    links: readonly SiteLink[];\n    actions: ReactNode;\n    /** Secondary controls, such as the theme switch: in the bar on wide screens and in the menu on narrow ones. */\n    utilities?: ReactNode;\n    menuLabel: string;\n    closeMenuLabel: string;\n    navigationLabel: string;\n    onNavigate: (href: string) => void;\n}\n\nexport function SiteHeader({\n    brand,\n    links,\n    actions,\n    utilities,\n    menuLabel,\n    closeMenuLabel,\n    navigationLabel,\n    onNavigate,\n}: SiteHeaderProps) {\n    const [open, setOpen] = useState(false);\n\n    function follow(href: string) {\n        setOpen(false);\n        onNavigate(href);\n    }\n\n    return (\n        <header className=\"mx-auto flex h-14 w-full max-w-[1200px] items-center gap-6 px-5 sm:px-8\">\n            {brand}\n            <nav aria-label={navigationLabel} className=\"hidden items-center gap-1 md:flex\">\n                {links.map((link) => (\n                    <NavLink key={link.href} link={link} onNavigate={follow} />\n                ))}\n            </nav>\n            <div className=\"ml-auto flex items-center gap-2 max-sm:[&>a]:hidden\">\n                {utilities ? <div className=\"hidden md:contents\">{utilities}</div> : null}\n                {actions}\n            </div>\n            <button\n                {...tabbable}\n                type=\"button\"\n                aria-expanded={open}\n                aria-controls=\"site-menu\"\n                aria-label={open ? closeMenuLabel : menuLabel}\n                onClick={() => setOpen((value) => !value)}\n                className=\"text-base-800 hover:bg-base-200 -mr-2 inline-flex size-9 items-center justify-center rounded-md transition-colors md:hidden [&_svg]:size-5\"\n            >\n                {open ? <XIcon /> : <MenuIcon />}\n            </button>\n            {open ? (\n                <nav\n                    id=\"site-menu\"\n                    aria-label={navigationLabel}\n                    className=\"glass-menu absolute inset-x-3 top-[calc(100%+0.5rem)] flex flex-col gap-1 rounded-2xl p-2 md:hidden\"\n                >\n                    {links.map((link) => (\n                        <NavLink key={link.href} link={link} onNavigate={follow} large />\n                    ))}\n                    {utilities ? <div className=\"border-base-300 mt-1 border-t px-3 pt-3 pb-1\">{utilities}</div> : null}\n                </nav>\n            ) : null}\n        </header>\n    );\n}\n\nfunction NavLink({ link, onNavigate, large }: { link: SiteLink; onNavigate: (href: string) => void; large?: boolean }) {\n    return (\n        <a\n            {...tabbable}\n            href={link.href}\n            aria-current={link.current ? 'page' : undefined}\n            {...(link.external ? { target: '_blank', rel: 'noreferrer' } : {})}\n            onClick={(event) => {\n                if (link.external || event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n                event.preventDefault();\n                onNavigate(link.href);\n            }}\n            className={`text-base-700 hover:text-base-content aria-[current=page]:text-base-content focus-visible:outline-primary rounded-md font-medium transition-colors focus-visible:outline-2 ${large ? 'hover:bg-base-200 px-3 py-2.5 text-base' : 'px-2.5 py-1.5 text-sm'}`}\n        >\n            {link.label}\n        </a>\n    );\n}\n\ninterface SiteFooterProps {\n    brand: ReactNode;\n    tagline: string;\n    columns: readonly { title: string; links: readonly SiteLink[] }[];\n    legal: string;\n    note: ReactNode;\n    onNavigate: (href: string) => void;\n}\n\nexport function SiteFooter({ brand, tagline, columns, legal, note, onNavigate }: SiteFooterProps) {\n    return (\n        <footer className=\"border-base-300 bg-base-50 border-t\">\n            <div className=\"mx-auto grid w-full max-w-[1200px] grid-cols-2 gap-x-6 gap-y-10 px-5 pt-14 pb-10 sm:px-8 md:grid-cols-[1.4fr_repeat(4,1fr)]\">\n                <div className=\"col-span-2 flex flex-col gap-3 md:col-span-1\">\n                    {brand}\n                    <p className=\"text-base-700 max-w-64 text-sm leading-6\">{tagline}</p>\n                </div>\n                {columns.map((column) => (\n                    <div key={column.title} className=\"flex flex-col gap-3\">\n                        <h2 className=\"text-base-800 text-xs font-semibold tracking-[0.06em] uppercase\">\n                            {column.title}\n                        </h2>\n                        <ul className=\"flex flex-col gap-2\">\n                            {column.links.map((link) => (\n                                <li key={link.href}>\n                                    <a\n                                        {...tabbable}\n                                        href={link.href}\n                                        {...(link.external ? { target: '_blank', rel: 'noreferrer' } : {})}\n                                        onClick={(event) => {\n                                            if (link.external || !link.href.startsWith('/')) return;\n\n                                            if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0)\n                                                return;\n\n                                            event.preventDefault();\n                                            onNavigate(link.href);\n                                        }}\n                                        className=\"text-base-700 hover:text-base-content text-sm transition-colors\"\n                                    >\n                                        {link.label}\n                                    </a>\n                                </li>\n                            ))}\n                        </ul>\n                    </div>\n                ))}\n            </div>\n            <div className=\"mx-auto w-full max-w-[1200px] px-5 sm:px-8\">\n                <div className=\"border-base-300/70 text-base-700 flex flex-col gap-2 border-t py-6 text-xs sm:flex-row sm:items-center sm:justify-between\">\n                    <span>{legal}</span>\n                    <span>{note}</span>\n                </div>\n            </div>\n        </footer>\n    );\n}\n\nfunction useScrolled() {\n    const [scrolled, setScrolled] = useState(false);\n\n    useEffect(() => {\n        const update = () => setScrolled(window.scrollY > 4);\n\n        update();\n        window.addEventListener('scroll', update, { passive: true });\n\n        return () => window.removeEventListener('scroll', update);\n    }, []);\n\n    return scrolled;\n}\n"],"mappings":"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"}

package/dist/layout/TitleBar.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+interface TitleBarProps {
+  actions?: ReactNode;
+  /** The brand, a link home, before a divider and the title. */
+  brand: ReactNode;
+  search?: ReactNode;
+  title: ReactNode;
+}
+/** T3 Code's 52px title bar: the brand and where you are on the left, tools on the right. Its own width,
+ *  not the window's, decides when search folds to an icon; narrow screens close the gaps so the title keeps
+ *  the room left. */
+export declare function TitleBar({ actions, brand, search, title }: TitleBarProps): import("react").JSX.Element;
+export interface TitleBarTrailItem {
+  key: string;
+  icon?: ReactNode;
+  label: string;
+  /** Makes the step a button, such as one switching to its siblings; `selectLabel` says where it leads. */
+  onSelect?: () => void;
+  selectLabel?: string;
+}
+/** The title bar's location, T3's "project / thread": each step muted and chevron-separated, the current one
+ *  in the foreground. Steps that switch somewhere are buttons with a chevron. Narrow screens show only the
+ *  current step. */
+export declare function TitleBarTrail({ items }: {
+  items: readonly TitleBarTrailItem[];
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TitleBar.d.ts.map