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

package/dist/showcase/Status.d.ts

@@ -0,0 +1,30 @@
+import { AnchorHTMLAttributes, ReactNode } from "react";
+/** Where a product or feature stands: out now, being built, or planned. */
+export type Readiness = 'available' | 'development' | 'planned';
+/** A readiness label with its light. */
+export declare function StatusPill({ status, children }: {
+  status: Readiness;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function StatusLight({ status, pulse }: {
+  status: Readiness;
+  pulse?: boolean;
+}): import("react").JSX.Element;
+interface AnnouncementProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {
+  href: string;
+  tag: string;
+  status?: Readiness;
+  children: ReactNode;
+  external?: boolean;
+  onNavigate?: (href: string) => void;
+}
+/** The pill above a hero title that points at news. */
+export declare function Announcement({ href, tag, status, children, external, onNavigate, ...props }: AnnouncementProps): import("react").JSX.Element;
+/** A Lar app icon, cut to the platform's continuous corner. */
+export declare function AppIcon({ src, alt, size }: {
+  src: string;
+  alt: string;
+  size?: 'sm' | 'md' | 'lg';
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Status.d.ts.map

package/dist/showcase/Status.js

@@ -0,0 +1,84 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon } from "lucide-react";
+// src/showcase/Status.tsx
+const readinessClasses = {
+	available: {
+		pill: "bg-success/10 text-(--lar-success-text) ring-success/20 dark:bg-success/14",
+		dot: "bg-success shadow-[0_0_0_3px_color-mix(in_srgb,var(--color-success)_22%,transparent)]"
+	},
+	development: {
+		pill: "bg-primary/10 text-primary ring-primary/20 dark:bg-primary/22 dark:text-[color-mix(in_srgb,var(--color-primary)_42%,white)] dark:ring-primary/35",
+		dot: "bg-primary dark:bg-[color-mix(in_srgb,var(--color-primary)_60%,white)] shadow-[0_0_0_3px_color-mix(in_srgb,var(--color-primary)_24%,transparent)]"
+	},
+	planned: {
+		pill: "bg-base-200 text-base-800 ring-base-300 dark:bg-base-300/70",
+		dot: "bg-base-500 dark:bg-base-600"
+	}
+};
+/** A readiness label with its light. */
+function StatusPill({ status, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: `inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium whitespace-nowrap ring-1 ring-inset ${readinessClasses[status].pill}`,
+		children: [/* @__PURE__ */ jsx(StatusLight, { status }), children]
+	});
+}
+function StatusLight({ status, pulse }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: `inline-block size-1.5 shrink-0 rounded-full ${readinessClasses[status].dot} ${pulse ? "lar-led-pulse" : ""}`
+	});
+}
+/** The pill above a hero title that points at news. */
+function Announcement({ href, tag, status = "available", children, external, onNavigate, ...props }) {
+	return /* @__PURE__ */ jsxs("a", {
+		...tabbable,
+		...props,
+		href,
+		...external ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		onClick: (event) => {
+			if (!onNavigate || external || event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+			event.preventDefault();
+			onNavigate(href);
+		},
+		className: "group/announcement border-base-300 bg-base-100/80 text-base-800 hover:border-base-400 hover:text-base-content focus-visible:outline-primary dark:bg-base-200/60 inline-flex h-8 max-w-full items-center gap-2 rounded-full border py-1 pr-3 pl-1 text-[13px] shadow-xs/5 backdrop-blur transition-colors focus-visible:outline-2",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: `inline-flex h-6 items-center gap-1.5 rounded-full px-2 text-xs font-semibold ${readinessClasses[status].pill}`,
+				children: [/* @__PURE__ */ jsx(StatusLight, {
+					status,
+					pulse: true
+				}), tag]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base-600 inline-flex transition-transform duration-200 group-hover/announcement:translate-x-0.5 [&_svg]:size-3.5",
+				children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+			})
+		]
+	});
+}
+/** A Lar app icon, cut to the platform's continuous corner. */
+function AppIcon({ src, alt, size = "md" }) {
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		width: 128,
+		height: 128,
+		loading: "lazy",
+		className: `shrink-0 shadow-[0_6px_16px_-6px_rgb(0_0_0/45%),inset_0_0_0_0.5px_rgb(255_255_255/12%)] ${{
+			sm: "size-9 rounded-[0.55rem]",
+			md: "size-12 rounded-[0.75rem]",
+			lg: "size-16 rounded-[1rem]"
+		}[size]}`
+	});
+}
+export { Announcement, AppIcon, StatusLight, StatusPill };
+
+//# sourceMappingURL=Status.js.map

package/dist/showcase/Status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.js","names":[],"sources":["../../src/showcase/Status.tsx"],"sourcesContent":["import { ArrowRightIcon } from 'lucide-react';\nimport type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\n/** Where a product or feature stands: out now, being built, or planned. */\nexport type Readiness = 'available' | 'development' | 'planned';\n\nconst readinessClasses: Record<Readiness, { pill: string; dot: string }> = {\n    available: {\n        pill: 'bg-success/10 text-(--lar-success-text) ring-success/20 dark:bg-success/14',\n        dot: 'bg-success shadow-[0_0_0_3px_color-mix(in_srgb,var(--color-success)_22%,transparent)]',\n    },\n    development: {\n        pill: 'bg-primary/10 text-primary ring-primary/20 dark:bg-primary/22 dark:text-[color-mix(in_srgb,var(--color-primary)_42%,white)] dark:ring-primary/35',\n        dot: 'bg-primary dark:bg-[color-mix(in_srgb,var(--color-primary)_60%,white)] shadow-[0_0_0_3px_color-mix(in_srgb,var(--color-primary)_24%,transparent)]',\n    },\n    planned: {\n        pill: 'bg-base-200 text-base-800 ring-base-300 dark:bg-base-300/70',\n        dot: 'bg-base-500 dark:bg-base-600',\n    },\n};\n\n/** A readiness label with its light. */\nexport function StatusPill({ status, children }: { status: Readiness; children: ReactNode }) {\n    return (\n        <span\n            className={`inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium whitespace-nowrap ring-1 ring-inset ${readinessClasses[status].pill}`}\n        >\n            <StatusLight status={status} />\n            {children}\n        </span>\n    );\n}\n\nexport function StatusLight({ status, pulse }: { status: Readiness; pulse?: boolean }) {\n    return (\n        <span\n            aria-hidden=\"true\"\n            className={`inline-block size-1.5 shrink-0 rounded-full ${readinessClasses[status].dot} ${pulse ? 'lar-led-pulse' : ''}`}\n        />\n    );\n}\n\ninterface AnnouncementProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {\n    href: string;\n    tag: string;\n    status?: Readiness;\n    children: ReactNode;\n    external?: boolean;\n    onNavigate?: (href: string) => void;\n}\n\n/** The pill above a hero title that points at news. */\nexport function Announcement({\n    href,\n    tag,\n    status = 'available',\n    children,\n    external,\n    onNavigate,\n    ...props\n}: AnnouncementProps) {\n    return (\n        <a\n            {...tabbable}\n            {...props}\n            href={href}\n            {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}\n            onClick={(event) => {\n                if (!onNavigate || external || event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0)\n                    return;\n\n                event.preventDefault();\n                onNavigate(href);\n            }}\n            className=\"group/announcement border-base-300 bg-base-100/80 text-base-800 hover:border-base-400 hover:text-base-content focus-visible:outline-primary dark:bg-base-200/60 inline-flex h-8 max-w-full items-center gap-2 rounded-full border py-1 pr-3 pl-1 text-[13px] shadow-xs/5 backdrop-blur transition-colors focus-visible:outline-2\"\n        >\n            <span\n                className={`inline-flex h-6 items-center gap-1.5 rounded-full px-2 text-xs font-semibold ${readinessClasses[status].pill}`}\n            >\n                <StatusLight status={status} pulse />\n                {tag}\n            </span>\n            <span className=\"truncate\">{children}</span>\n            <span className=\"text-base-600 inline-flex transition-transform duration-200 group-hover/announcement:translate-x-0.5 [&_svg]:size-3.5\">\n                <ArrowRightIcon />\n            </span>\n        </a>\n    );\n}\n\n/** A Lar app icon, cut to the platform's continuous corner. */\nexport function AppIcon({ src, alt, size = 'md' }: { src: string; alt: string; size?: 'sm' | 'md' | 'lg' }) {\n    const sizes = { sm: 'size-9 rounded-[0.55rem]', md: 'size-12 rounded-[0.75rem]', lg: 'size-16 rounded-[1rem]' };\n\n    return (\n        <img\n            src={src}\n            alt={alt}\n            width={128}\n            height={128}\n            loading=\"lazy\"\n            className={`shrink-0 shadow-[0_6px_16px_-6px_rgb(0_0_0/45%),inset_0_0_0_0.5px_rgb(255_255_255/12%)] ${sizes[size]}`}\n        />\n    );\n}\n"],"mappings":";;;;AAQA,MAAM,mBAAqE;CACvE,WAAW;EACP,MAAM;EACN,KAAK;CACT;CACA,aAAa;EACT,MAAM;EACN,KAAK;CACT;CACA,SAAS;EACL,MAAM;EACN,KAAK;CACT;AACJ;;AAGA,SAAgB,WAAW,EAAE,QAAQ,YAAwD;CACzF,OACI,qBAAC,QAAD;EACI,WAAW,6HAA6H,iBAAiB,OAAO,CAAC;EADrK,UAAA,CAGI,oBAAC,aAAD,EAAqB,OAAS,CAAA,GAC7B,QACC;;AAEd;AAEA,SAAgB,YAAY,EAAE,QAAQ,SAAiD;CACnF,OACI,oBAAC,QAAD;EACI,eAAY;EACZ,WAAW,+CAA+C,iBAAiB,OAAO,CAAC,IAAI,GAAG,QAAQ,kBAAkB;CACvH,CAAA;AAET;;AAYA,SAAgB,aAAa,EACzB,MACA,KACA,SAAS,aACT,UACA,UACA,YACA,GAAG,SACe;CAClB,OACI,qBAAC,KAAD;EACI,GAAI;EACJ,GAAI;EACE;EACN,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAa,IAAI,CAAC;EAC3D,UAAU,UAAU;GAChB,IAAI,CAAC,cAAc,YAAY,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,GAChG;GAEJ,MAAM,eAAe;GACrB,WAAW,IAAI;EACnB;EACA,WAAU;EAZd,UAAA;GAcI,qBAAC,QAAD;IACI,WAAW,gFAAgF,iBAAiB,OAAO,CAAC;IADxH,UAAA,CAGI,oBAAC,aAAD;KAAqB;KAAQ,OAAA;IAAO,CAAA,GACnC,GACC;;GACN,oBAAC,QAAD;IAAM,WAAU;IAAY;GAAe,CAAA;GAC3C,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,gBAAD,CAAiB,CAAA;GACf,CAAA;EACP;;AAEX;;AAGA,SAAgB,QAAQ,EAAE,KAAK,KAAK,OAAO,QAAiE;CAGxG,OACI,oBAAC,OAAD;EACS;EACA;EACL,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,WAAW,2FAA2F;GAT9F,IAAI;GAA4B,IAAI;GAA6B,IAAI;EAS6B,EAAE;CAC/G,CAAA;AAET"}

package/dist/showcase/StepFlow.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export interface Step {
+  label: string;
+  title: string;
+  body: string;
+  icon: ReactNode;
+}
+/** A workflow: compact numbered rows on phones, and on wide screens five stops joined by a line. */
+export declare function StepFlow({ steps, label }: {
+  steps: readonly Step[];
+  label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=StepFlow.d.ts.map

package/dist/showcase/StepFlow.js

@@ -0,0 +1,47 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/StepFlow.tsx
+/** A workflow: compact numbered rows on phones, and on wide screens five stops joined by a line. */
+function StepFlow({ steps, label }) {
+	return /* @__PURE__ */ jsxs("ol", {
+		"aria-label": label,
+		className: "relative grid gap-5 sm:grid-cols-2 sm:gap-4 lg:grid-cols-5 lg:gap-0",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute top-[26px] right-[10%] left-[10%] hidden h-px bg-[linear-gradient(90deg,transparent,var(--color-base-400)_12%,var(--color-base-400)_88%,transparent)] lg:block"
+		}), steps.map((step, index) => /* @__PURE__ */ jsxs("li", {
+			className: "relative grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-1 sm:rounded-2xl sm:p-5 lg:flex lg:flex-col lg:items-center lg:gap-3 lg:text-center",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "border-base-300 bg-base-100 text-base-800 relative z-10 row-span-2 inline-flex size-10 items-center justify-center rounded-[0.75rem] border shadow-[0_8px_24px_-12px_rgb(0_0_0/35%)] sm:size-[52px] sm:rounded-[0.9rem] [&>svg]:size-[18px] sm:[&>svg]:size-[22px]",
+					children: [step.icon, /* @__PURE__ */ jsx("span", {
+						className: "bg-primary text-primary-content absolute -top-1.5 -right-1.5 inline-flex size-5 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums",
+						children: index + 1
+					})]
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "overline",
+					tone: "muted",
+					className: "hidden lg:mt-2 lg:block",
+					children: step.label
+				}),
+				/* @__PURE__ */ jsx(Heading, {
+					as: "h3",
+					variant: "subsection",
+					className: "self-center lg:self-auto",
+					children: step.title
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					variant: "body",
+					tone: "muted",
+					className: "col-start-2 leading-6 lg:max-w-[220px] dark:text-[#a3a3aa]",
+					children: step.body
+				})
+			]
+		}, step.label))]
+	});
+}
+export { StepFlow };
+
+//# sourceMappingURL=StepFlow.js.map

package/dist/showcase/StepFlow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepFlow.js","names":[],"sources":["../../src/showcase/StepFlow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Heading, Text } from '../typography/Typography';\n\nexport interface Step {\n    label: string;\n    title: string;\n    body: string;\n    icon: ReactNode;\n}\n\n/** A workflow: compact numbered rows on phones, and on wide screens five stops joined by a line. */\nexport function StepFlow({ steps, label }: { steps: readonly Step[]; label: string }) {\n    return (\n        <ol aria-label={label} className=\"relative grid gap-5 sm:grid-cols-2 sm:gap-4 lg:grid-cols-5 lg:gap-0\">\n            <span\n                aria-hidden=\"true\"\n                className=\"absolute top-[26px] right-[10%] left-[10%] hidden h-px bg-[linear-gradient(90deg,transparent,var(--color-base-400)_12%,var(--color-base-400)_88%,transparent)] lg:block\"\n            />\n            {steps.map((step, index) => (\n                <li\n                    key={step.label}\n                    className=\"relative grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-1 sm:rounded-2xl sm:p-5 lg:flex lg:flex-col lg:items-center lg:gap-3 lg:text-center\"\n                >\n                    <span className=\"border-base-300 bg-base-100 text-base-800 relative z-10 row-span-2 inline-flex size-10 items-center justify-center rounded-[0.75rem] border shadow-[0_8px_24px_-12px_rgb(0_0_0/35%)] sm:size-[52px] sm:rounded-[0.9rem] [&>svg]:size-[18px] sm:[&>svg]:size-[22px]\">\n                        {step.icon}\n                        <span className=\"bg-primary text-primary-content absolute -top-1.5 -right-1.5 inline-flex size-5 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums\">\n                            {index + 1}\n                        </span>\n                    </span>\n                    <Text as=\"span\" variant=\"overline\" tone=\"muted\" className=\"hidden lg:mt-2 lg:block\">\n                        {step.label}\n                    </Text>\n                    <Heading as=\"h3\" variant=\"subsection\" className=\"self-center lg:self-auto\">\n                        {step.title}\n                    </Heading>\n                    <Text\n                        variant=\"body\"\n                        tone=\"muted\"\n                        className=\"col-start-2 leading-6 lg:max-w-[220px] dark:text-[#a3a3aa]\"\n                    >\n                        {step.body}\n                    </Text>\n                </li>\n            ))}\n        </ol>\n    );\n}\n"],"mappings":";;;;AAYA,SAAgB,SAAS,EAAE,OAAO,SAAoD;CAClF,OACI,qBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAAjC,UAAA,CACI,oBAAC,QAAD;GACI,eAAY;GACZ,WAAU;EACb,CAAA,GACA,MAAM,KAAK,MAAM,UACd,qBAAC,MAAD;GAEI,WAAU;GAFd,UAAA;IAII,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACK,KAAK,MACN,oBAAC,QAAD;MAAM,WAAU;MACX,UAAA,QAAQ;KACP,CAAA,CACJ;;IACN,oBAAC,MAAD;KAAM,IAAG;KAAO,SAAQ;KAAW,MAAK;KAAQ,WAAU;KACrD,UAAA,KAAK;IACJ,CAAA;IACN,oBAAC,SAAD;KAAS,IAAG;KAAK,SAAQ;KAAa,WAAU;KAC3C,UAAA,KAAK;IACD,CAAA;IACT,oBAAC,MAAD;KACI,SAAQ;KACR,MAAK;KACL,WAAU;KAET,UAAA,KAAK;IACJ,CAAA;GACN;EAtBK,GAAA,KAAK,KAsBV,CACP,CACD;;AAEZ"}

package/dist/showcase/index.d.ts

@@ -0,0 +1,15 @@
+import { CallToAction } from "./CallToAction.js";
+import { FeatureGrid, FeatureTile, ProductCard, ProductGrid } from "./Cards.js";
+import { AppWindow, BrowserFrame, Callout, CalloutPair, CalloutStack, GuidedMedia, LaptopFrame, PhoneFrame, Screenshot, ScreenshotProps, TabletFrame, TvFrame } from "./Devices.js";
+import { FeatureRow, FeatureRows, PointList } from "./FeatureRow.js";
+import { Hero } from "./Hero.js";
+import { ConceptPhoto, PhotoSearchConcept } from "./PhotoSearchConcept.js";
+import { Platform, PlatformGrid } from "./Platforms.js";
+import { ProductBand, ProductBands, ProductEntry, ProductIndex } from "./ProductBand.js";
+import { Roadmap, RoadmapItem } from "./Roadmap.js";
+import { RouteDiagram, RouteNode } from "./RouteDiagram.js";
+import { MediaApp, ReadinessItem, ReadinessLegend, ReadinessPanel, ServerBay, ServerUnit } from "./ServerUnit.js";
+import { AngledDevice, Backdrop, DeviceStage, ResponsiveMedia, Reveal } from "./Stage.js";
+import { Announcement, AppIcon, Readiness, StatusLight, StatusPill } from "./Status.js";
+import { Step, StepFlow } from "./StepFlow.js";
+export { AngledDevice, Announcement, AppIcon, AppWindow, Backdrop, BrowserFrame, CallToAction, Callout, CalloutPair, CalloutStack, type ConceptPhoto, DeviceStage, FeatureGrid, FeatureRow, FeatureRows, FeatureTile, GuidedMedia, Hero, LaptopFrame, type MediaApp, PhoneFrame, PhotoSearchConcept, type Platform, PlatformGrid, PointList, ProductBand, ProductBands, ProductCard, type ProductEntry, ProductGrid, ProductIndex, type Readiness, type ReadinessItem, ReadinessLegend, ReadinessPanel, ResponsiveMedia, Reveal, Roadmap, type RoadmapItem, RouteDiagram, type RouteNode, Screenshot, type ScreenshotProps, type ServerBay, ServerUnit, StatusLight, StatusPill, type Step, StepFlow, TabletFrame, TvFrame };

package/dist/testing.d.ts

@@ -0,0 +1,5 @@
+/** Clears state the design system keeps at module level, such as the toast store, which outlives a test. */
+export declare function resetDesignSystem(): void;
+/** Adds the browser APIs the design system's components use and jsdom does not implement. */
+export declare function installDomStubs(): void;
+//# sourceMappingURL=testing.d.ts.map

package/dist/testing.js

@@ -0,0 +1,43 @@
+import { dismissAllNotifications } from "./feedback/ErrorNotification.js";
+// src/testing.ts
+/** Clears state the design system keeps at module level, such as the toast store, which outlives a test. */
+function resetDesignSystem() {
+	dismissAllNotifications();
+}
+/** Adds the browser APIs the design system's components use and jsdom does not implement. */
+function installDomStubs() {
+	class ResizeObserverStub {
+		disconnect() {}
+		observe() {}
+		unobserve() {}
+	}
+	globalThis.ResizeObserver = ResizeObserverStub;
+	let objectUrlSequence = 0;
+	Object.defineProperty(URL, "createObjectURL", {
+		configurable: true,
+		value: () => `blob:mock-object-url-${objectUrlSequence += 1}`
+	});
+	Object.defineProperty(URL, "revokeObjectURL", {
+		configurable: true,
+		value: () => void 0
+	});
+	Object.defineProperty(HTMLElement.prototype, "hasPointerCapture", {
+		configurable: true,
+		value: () => false
+	});
+	Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+		configurable: true,
+		value: () => void 0
+	});
+	Object.defineProperty(HTMLElement.prototype, "scrollTo", {
+		configurable: true,
+		value: () => Promise.resolve()
+	});
+	Object.defineProperty(window, "scrollTo", {
+		configurable: true,
+		value: () => void 0
+	});
+}
+export { installDomStubs, resetDesignSystem };
+
+//# sourceMappingURL=testing.js.map

package/dist/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","names":[],"sources":["../src/testing.ts"],"sourcesContent":["// Helpers for apps' component tests (jsdom). Import them from `@lar-works/design-system/testing` in a test setup file.\nimport { dismissAllNotifications } from './feedback/ErrorNotification';\n\n/** Clears state the design system keeps at module level, such as the toast store, which outlives a test. */\nexport function resetDesignSystem() {\n    dismissAllNotifications();\n}\n\n/** Adds the browser APIs the design system's components use and jsdom does not implement. */\nexport function installDomStubs() {\n    class ResizeObserverStub implements ResizeObserver {\n        disconnect(): void {}\n        observe(): void {}\n        unobserve(): void {}\n    }\n\n    globalThis.ResizeObserver = ResizeObserverStub;\n\n    let objectUrlSequence = 0;\n\n    // jsdom has no object URL registry; components that show fetched bytes need a working (if fake) `blob:` URL.\n    Object.defineProperty(URL, 'createObjectURL', {\n        configurable: true,\n        value: () => `blob:mock-object-url-${(objectUrlSequence += 1)}`,\n    });\n\n    Object.defineProperty(URL, 'revokeObjectURL', { configurable: true, value: () => undefined });\n    Object.defineProperty(HTMLElement.prototype, 'hasPointerCapture', { configurable: true, value: () => false });\n    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', { configurable: true, value: () => undefined });\n\n    // Browsers' element scrollTo returns a promise, which an effect must not return as its cleanup.\n    Object.defineProperty(HTMLElement.prototype, 'scrollTo', { configurable: true, value: () => Promise.resolve() });\n    Object.defineProperty(window, 'scrollTo', { configurable: true, value: () => undefined });\n}\n"],"mappings":";;;AAIA,SAAgB,oBAAoB;CAChC,wBAAwB;AAC5B;;AAGA,SAAgB,kBAAkB;CAC9B,MAAM,mBAA6C;EAC/C,aAAmB,CAAC;EACpB,UAAgB,CAAC;EACjB,YAAkB,CAAC;CACvB;CAEA,WAAW,iBAAiB;CAE5B,IAAI,oBAAoB;CAGxB,OAAO,eAAe,KAAK,mBAAmB;EAC1C,cAAc;EACd,aAAa,wBAAyB,qBAAqB;CAC/D,CAAC;CAED,OAAO,eAAe,KAAK,mBAAmB;EAAE,cAAc;EAAM,aAAa,KAAA;CAAU,CAAC;CAC5F,OAAO,eAAe,YAAY,WAAW,qBAAqB;EAAE,cAAc;EAAM,aAAa;CAAM,CAAC;CAC5G,OAAO,eAAe,YAAY,WAAW,kBAAkB;EAAE,cAAc;EAAM,aAAa,KAAA;CAAU,CAAC;CAG7G,OAAO,eAAe,YAAY,WAAW,YAAY;EAAE,cAAc;EAAM,aAAa,QAAQ,QAAQ;CAAE,CAAC;CAC/G,OAAO,eAAe,QAAQ,YAAY;EAAE,cAAc;EAAM,aAAa,KAAA;CAAU,CAAC;AAC5F"}

package/dist/typography/Link.d.ts

@@ -0,0 +1,21 @@
+import { LinkBoxProps, LinkOverlayProps, LinkProps } from "@ninna-ui/primitives";
+import { ReactNode } from "react";
+type LinkProps$1 = Omit<LinkProps, 'size' | 'color'> & {
+  variant?: 'body' | 'caption';
+  onNavigate?: (href: string) => void;
+};
+type LinkOverlayProps$1 = LinkOverlayProps & Pick<LinkProps$1, 'onNavigate'>;
+/** Keep secondary links and buttons above the stretched primary link or action. */
+declare function LinkBox$1({ className, ...props }: LinkBoxProps): import("react").JSX.Element;
+declare const LinkOverlay$1: import("react").ForwardRefExoticComponent<LinkOverlayProps & Pick<LinkProps$1, "onNavigate"> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const Link$1: import("react").ForwardRefExoticComponent<Omit<LinkProps, "color" | "size"> & {
+  variant?: 'body' | 'caption';
+  onNavigate?: (href: string) => void;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+/** A link inside running text or a note: the surrounding size and colour, underlined. */
+export declare function InlineLink({ href, children }: {
+  href: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+export { Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay, LinkOverlayProps$1 as LinkOverlayProps, LinkProps$1 as LinkProps };
+//# sourceMappingURL=Link.d.ts.map

package/dist/typography/Link.js

@@ -0,0 +1,60 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Link, LinkBox, LinkOverlay } from "@ninna-ui/primitives";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/typography/Link.tsx
+/** Keep secondary links and buttons above the stretched primary link or action. */
+function LinkBox$1({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(LinkBox, {
+		...props,
+		className: `isolate [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:relative [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:z-10 ${className}`
+	});
+}
+const LinkOverlay$1 = forwardRef(({ onNavigate, onClick, className = "", ...props }, ref) => /* @__PURE__ */ jsx(LinkOverlay, {
+	...tabbable,
+	...props,
+	ref,
+	className: `focus-visible:before:outline-primary before:z-1 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:-outline-offset-2 ${className}`,
+	onClick: navigationClick({
+		...props,
+		onClick,
+		onNavigate
+	})
+}));
+LinkOverlay$1.displayName = "LinkOverlay";
+const Link$1 = forwardRef(({ variant = "body", onNavigate, onClick, ...props }, ref) => /* @__PURE__ */ jsx(Link, {
+	...tabbable,
+	...props,
+	ref,
+	size: variant === "caption" ? "xs" : "sm",
+	underline: "hover",
+	onClick: navigationClick({
+		...props,
+		onClick,
+		onNavigate
+	})
+}));
+Link$1.displayName = "Link";
+function navigationClick({ href, onNavigate, onClick, external, target, download }) {
+	return (event) => {
+		if (onNavigate) event.stopPropagation();
+		onClick?.(event);
+		if (!onNavigate || !href || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || external || target && target !== "_self" || download !== void 0 && download !== false) return;
+		event.preventDefault();
+		onNavigate(href);
+	};
+}
+/** A link inside running text or a note: the surrounding size and colour, underlined. */
+function InlineLink({ href, children }) {
+	return /* @__PURE__ */ jsx("a", {
+		...tabbable,
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: "focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2",
+		children
+	});
+}
+export { InlineLink, Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay };
+
+//# sourceMappingURL=Link.js.map

package/dist/typography/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":["LinkBox","NinnaLinkBox","LinkOverlay","NinnaLinkOverlay","Link","NinnaLink"],"sources":["../../src/typography/Link.tsx"],"sourcesContent":["import {\n    Link as NinnaLink,\n    LinkBox as NinnaLinkBox,\n    type LinkBoxProps,\n    LinkOverlay as NinnaLinkOverlay,\n    type LinkOverlayProps as NinnaLinkOverlayProps,\n    type LinkProps as NinnaLinkProps,\n} from '@ninna-ui/primitives';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport type LinkProps = Omit<NinnaLinkProps, 'size' | 'color'> & {\n    variant?: 'body' | 'caption';\n    onNavigate?: (href: string) => void;\n};\n\nexport type LinkOverlayProps = NinnaLinkOverlayProps & Pick<LinkProps, 'onNavigate'>;\n\n/** Keep secondary links and buttons above the stretched primary link or action. */\nexport function LinkBox({ className = '', ...props }: LinkBoxProps) {\n    return (\n        <NinnaLinkBox\n            {...props}\n            className={`isolate [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:relative [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:z-10 ${className}`}\n        />\n    );\n}\n\nexport const LinkOverlay = forwardRef<HTMLAnchorElement, LinkOverlayProps>(\n    ({ onNavigate, onClick, className = '', ...props }, ref) => (\n        <NinnaLinkOverlay\n            {...tabbable}\n            {...props}\n            ref={ref}\n            className={`focus-visible:before:outline-primary before:z-1 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:-outline-offset-2 ${className}`}\n            onClick={navigationClick({ ...props, onClick, onNavigate })}\n        />\n    ),\n);\n\nLinkOverlay.displayName = 'LinkOverlay';\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n    ({ variant = 'body', onNavigate, onClick, ...props }, ref) => (\n        <NinnaLink\n            {...tabbable}\n            {...props}\n            ref={ref}\n            size={variant === 'caption' ? 'xs' : 'sm'}\n            underline=\"hover\"\n            onClick={navigationClick({ ...props, onClick, onNavigate })}\n        />\n    ),\n);\n\nLink.displayName = 'Link';\n\nfunction navigationClick({\n    href,\n    onNavigate,\n    onClick,\n    external,\n    target,\n    download,\n}: LinkOverlayProps): LinkProps['onClick'] {\n    return (event) => {\n        if (onNavigate) event.stopPropagation();\n\n        onClick?.(event);\n\n        if (\n            !onNavigate ||\n            !href ||\n            event.defaultPrevented ||\n            event.button !== 0 ||\n            event.metaKey ||\n            event.ctrlKey ||\n            event.shiftKey ||\n            event.altKey ||\n            external ||\n            (target && target !== '_self') ||\n            (download !== undefined && download !== false)\n        )\n            return;\n\n        event.preventDefault();\n        onNavigate(href);\n    };\n}\n\n/** A link inside running text or a note: the surrounding size and colour, underlined. */\nexport function InlineLink({ href, children }: { href: string; children?: ReactNode }) {\n    return (\n        <a\n            {...tabbable}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2\"\n        >\n            {children}\n        </a>\n    );\n}\n"],"mappings":";;;;;;AAoBA,SAAgBA,UAAQ,EAAE,YAAY,IAAI,GAAG,SAAuB;CAChE,OACI,oBAACC,SAAD;EACI,GAAI;EACJ,WAAW,yLAAyL;CACvM,CAAA;AAET;AAEA,MAAaC,gBAAc,YACtB,EAAE,YAAY,SAAS,YAAY,IAAI,GAAG,SAAS,QAChD,oBAACC,aAAD;CACI,GAAI;CACJ,GAAI;CACC;CACL,WAAW,6KAA6K;CACxL,SAAS,gBAAgB;EAAE,GAAG;EAAO;EAAS;CAAW,CAAC;AAC7D,CAAA,CAET;AAEA,cAAY,cAAc;AAE1B,MAAaC,SAAO,YACf,EAAE,UAAU,QAAQ,YAAY,SAAS,GAAG,SAAS,QAClD,oBAACC,MAAD;CACI,GAAI;CACJ,GAAI;CACC;CACL,MAAM,YAAY,YAAY,OAAO;CACrC,WAAU;CACV,SAAS,gBAAgB;EAAE,GAAG;EAAO;EAAS;CAAW,CAAC;AAC7D,CAAA,CAET;AAEA,OAAK,cAAc;AAEnB,SAAS,gBAAgB,EACrB,MACA,YACA,SACA,UACA,QACA,YACuC;CACvC,QAAQ,UAAU;EACd,IAAI,YAAY,MAAM,gBAAgB;EAEtC,UAAU,KAAK;EAEf,IACI,CAAC,cACD,CAAC,QACD,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,UACN,YACC,UAAU,WAAW,WACrB,aAAa,KAAA,KAAa,aAAa,OAExC;EAEJ,MAAM,eAAe;EACrB,WAAW,IAAI;CACnB;AACJ;;AAGA,SAAgB,WAAW,EAAE,MAAM,YAAoD;CACnF,OACI,oBAAC,KAAD;EACI,GAAI;EACE;EACN,QAAO;EACP,KAAI;EACJ,WAAU;EAET;CACF,CAAA;AAEX"}

package/dist/typography/Typography.d.ts

@@ -0,0 +1,53 @@
+import { HTMLAttributes } from "react";
+declare const textStyles: {
+  readonly body: 'text-sm leading-5';
+  readonly description: 'text-[15px] leading-6';
+  readonly caption: 'text-xs leading-4';
+  readonly label: 'text-sm font-medium leading-5';
+  readonly overline: 'text-[11px] font-semibold uppercase leading-4 tracking-[0.08em]';
+  readonly metric: 'text-2xl font-semibold leading-8 tracking-[-0.02em] tabular-nums';
+  /** The paragraph under a hero or section title. */
+  readonly lead: 'text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty';
+  /** Running copy on marketing pages. */
+  readonly prose: 'text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty';
+};
+/** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */
+declare const headingStyles: {
+  readonly page: 'text-[1.375rem] font-semibold leading-7 tracking-[-0.02em]';
+  readonly section: 'text-base font-semibold leading-6 tracking-[-0.01em]';
+  readonly subsection: 'text-[15px] font-semibold leading-6 tracking-[-0.005em]';
+  readonly title: 'text-sm font-semibold leading-5';
+  readonly label: 'text-sm font-semibold leading-5';
+  readonly hero: 'text-3xl font-semibold leading-[1.05] tracking-[-0.035em] [text-box:trim-both_cap_alphabetic] sm:text-4xl lg:text-[2.875rem]';
+  /** A page's one big statement. */
+  readonly display: 'text-[2.625rem] font-semibold leading-[1.04] tracking-[-0.036em] text-balance sm:text-6xl lg:text-[4.5rem] xl:text-[5rem]';
+  /** A marketing section's title. */
+  readonly headline: 'text-[1.875rem] font-semibold leading-[1.08] tracking-[-0.035em] text-balance sm:text-[2.5rem] lg:text-[3rem]';
+  /** A feature's title inside a section. */
+  readonly feature: 'text-xl font-semibold leading-7 tracking-[-0.02em] text-balance sm:text-2xl sm:leading-8';
+};
+declare const tones: {
+  readonly default: 'text-base-content';
+  readonly muted: 'text-base-700';
+  readonly soft: 'text-base-800';
+  readonly danger: 'text-danger';
+  readonly warning: 'text-warning';
+  readonly success: 'text-success';
+};
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+  loading?: boolean;
+  tone?: keyof typeof tones;
+  truncate?: boolean;
+}
+export interface TextProps extends TypographyProps {
+  as?: 'p' | 'span' | 'div';
+  variant?: keyof typeof textStyles;
+}
+export declare function Text({ as: Tag, variant, tone, truncate, loading, className, children, ...props }: TextProps): import("react").JSX.Element;
+export interface HeadingProps extends TypographyProps {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  variant?: keyof typeof headingStyles;
+}
+export declare function Heading({ as: Tag, variant, tone, truncate, loading, className, children, ...props }: HeadingProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Typography.d.ts.map

package/dist/typography/Typography.js

@@ -0,0 +1,67 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/typography/Typography.tsx
+const textStyles = {
+	body: "text-sm leading-5",
+	description: "text-[15px] leading-6",
+	caption: "text-xs leading-4",
+	label: "text-sm font-medium leading-5",
+	overline: "text-[11px] font-semibold uppercase leading-4 tracking-[0.08em]",
+	metric: "text-2xl font-semibold leading-8 tracking-[-0.02em] tabular-nums",
+	/** The paragraph under a hero or section title. */
+	lead: "text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty",
+	/** Running copy on marketing pages. */
+	prose: "text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty"
+};
+/** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */
+const headingStyles = {
+	page: "text-[1.375rem] font-semibold leading-7 tracking-[-0.02em]",
+	section: "text-base font-semibold leading-6 tracking-[-0.01em]",
+	subsection: "text-[15px] font-semibold leading-6 tracking-[-0.005em]",
+	title: "text-sm font-semibold leading-5",
+	label: "text-sm font-semibold leading-5",
+	hero: "text-3xl font-semibold leading-[1.05] tracking-[-0.035em] [text-box:trim-both_cap_alphabetic] sm:text-4xl lg:text-[2.875rem]",
+	/** A page's one big statement. */
+	display: "text-[2.625rem] font-semibold leading-[1.04] tracking-[-0.036em] text-balance sm:text-6xl lg:text-[4.5rem] xl:text-[5rem]",
+	/** A marketing section's title. */
+	headline: "text-[1.875rem] font-semibold leading-[1.08] tracking-[-0.035em] text-balance sm:text-[2.5rem] lg:text-[3rem]",
+	/** A feature's title inside a section. */
+	feature: "text-xl font-semibold leading-7 tracking-[-0.02em] text-balance sm:text-2xl sm:leading-8"
+};
+const tones = {
+	default: "text-base-content",
+	muted: "text-base-700",
+	soft: "text-base-800",
+	danger: "text-danger",
+	warning: "text-warning",
+	success: "text-success"
+};
+function Text({ as: Tag = "p", variant = "body", tone = "default", truncate, loading, className = "", children, ...props }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		...props,
+		className: `${textStyles[variant]} ${tones[tone]} ${tone === "muted" && (variant === "lead" || variant === "prose") ? "dark:text-[#a3a3aa]" : ""} ${truncate ? "truncate" : ""} ${loading ? `relative ${Tag === "span" ? "inline-block w-full" : ""}` : ""} ${className}`,
+		children: loading ? /* @__PURE__ */ jsx(LoadingText, {}) : children
+	});
+}
+function Heading({ as: Tag = "h2", variant = "section", tone = "default", truncate, loading, className = "", children, ...props }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		...props,
+		className: `${headingStyles[variant]} ${tones[tone]} ${truncate ? "truncate" : ""} ${loading ? "relative" : ""} ${className}`,
+		children: loading ? /* @__PURE__ */ jsx(LoadingText, { heading: variant === "hero" }) : children
+	});
+}
+/** An invisible glyph retains the font's line box, including cap-height trimming. */
+function LoadingText({ heading = false }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "invisible",
+		children: "\xA0"
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "absolute inset-0 flex items-center",
+		children: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: heading ? "heading" : "line" })
+	})] });
+}
+export { Heading, Text };
+
+//# sourceMappingURL=Typography.js.map

package/dist/typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","names":[],"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\n\nconst textStyles = {\n    body: 'text-sm leading-5',\n    description: 'text-[15px] leading-6',\n    caption: 'text-xs leading-4',\n    label: 'text-sm font-medium leading-5',\n    overline: 'text-[11px] font-semibold uppercase leading-4 tracking-[0.08em]',\n    metric: 'text-2xl font-semibold leading-8 tracking-[-0.02em] tabular-nums',\n    /** The paragraph under a hero or section title. */\n    lead: 'text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty',\n    /** Running copy on marketing pages. */\n    prose: 'text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty',\n} as const;\n\n/** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */\nconst headingStyles = {\n    page: 'text-[1.375rem] font-semibold leading-7 tracking-[-0.02em]',\n    section: 'text-base font-semibold leading-6 tracking-[-0.01em]',\n    subsection: 'text-[15px] font-semibold leading-6 tracking-[-0.005em]',\n    title: 'text-sm font-semibold leading-5',\n    label: 'text-sm font-semibold leading-5',\n    hero: 'text-3xl font-semibold leading-[1.05] tracking-[-0.035em] [text-box:trim-both_cap_alphabetic] sm:text-4xl lg:text-[2.875rem]',\n    /** A page's one big statement. */\n    display:\n        'text-[2.625rem] font-semibold leading-[1.04] tracking-[-0.036em] text-balance sm:text-6xl lg:text-[4.5rem] xl:text-[5rem]',\n    /** A marketing section's title. */\n    headline:\n        'text-[1.875rem] font-semibold leading-[1.08] tracking-[-0.035em] text-balance sm:text-[2.5rem] lg:text-[3rem]',\n    /** A feature's title inside a section. */\n    feature: 'text-xl font-semibold leading-7 tracking-[-0.02em] text-balance sm:text-2xl sm:leading-8',\n} as const;\n\nconst tones = {\n    default: 'text-base-content',\n    muted: 'text-base-700',\n    soft: 'text-base-800',\n    danger: 'text-danger',\n    warning: 'text-warning',\n    success: 'text-success',\n} as const;\n\ninterface TypographyProps extends HTMLAttributes<HTMLElement> {\n    loading?: boolean;\n    tone?: keyof typeof tones;\n    truncate?: boolean;\n}\n\nexport interface TextProps extends TypographyProps {\n    as?: 'p' | 'span' | 'div';\n    variant?: keyof typeof textStyles;\n}\n\nexport function Text({\n    as: Tag = 'p',\n    variant = 'body',\n    tone = 'default',\n    truncate,\n    loading,\n    className = '',\n    children,\n    ...props\n}: TextProps) {\n    return (\n        <Tag\n            {...props}\n            className={`${textStyles[variant]} ${tones[tone]} ${tone === 'muted' && (variant === 'lead' || variant === 'prose') ? 'dark:text-[#a3a3aa]' : ''} ${truncate ? 'truncate' : ''} ${loading ? `relative ${Tag === 'span' ? 'inline-block w-full' : ''}` : ''} ${className}`}\n        >\n            {loading ? <LoadingText /> : children}\n        </Tag>\n    );\n}\n\nexport interface HeadingProps extends TypographyProps {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    variant?: keyof typeof headingStyles;\n}\n\nexport function Heading({\n    as: Tag = 'h2',\n    variant = 'section',\n    tone = 'default',\n    truncate,\n    loading,\n    className = '',\n    children,\n    ...props\n}: HeadingProps) {\n    return (\n        <Tag\n            {...props}\n            className={`${headingStyles[variant]} ${tones[tone]} ${truncate ? 'truncate' : ''} ${loading ? 'relative' : ''} ${className}`}\n        >\n            {loading ? <LoadingText heading={variant === 'hero'} /> : children}\n        </Tag>\n    );\n}\n\n/** An invisible glyph retains the font's line box, including cap-height trimming. */\nfunction LoadingText({ heading = false }: { heading?: boolean }) {\n    return (\n        <>\n            <span aria-hidden=\"true\" className=\"invisible\">\n                &nbsp;\n            </span>\n            <span aria-hidden=\"true\" className=\"absolute inset-0 flex items-center\">\n                <SkeletonLoader.Shape presentation={heading ? 'heading' : 'line'} />\n            </span>\n        </>\n    );\n}\n"],"mappings":";;;AAIA,MAAM,aAAa;CACf,MAAM;CACN,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,QAAQ;;CAER,MAAM;;CAEN,OAAO;AACX;;AAGA,MAAM,gBAAgB;CAClB,MAAM;CACN,SAAS;CACT,YAAY;CACZ,OAAO;CACP,OAAO;CACP,MAAM;;CAEN,SACI;;CAEJ,UACI;;CAEJ,SAAS;AACb;AAEA,MAAM,QAAQ;CACV,SAAS;CACT,OAAO;CACP,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;AACb;AAaA,SAAgB,KAAK,EACjB,IAAI,MAAM,KACV,UAAU,QACV,OAAO,WACP,UACA,SACA,YAAY,IACZ,UACA,GAAG,SACO;CACV,OACI,oBAAC,KAAD;EACI,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS,GAAG,MAAM,MAAM,GAAG,SAAS,YAAY,YAAY,UAAU,YAAY,WAAW,wBAAwB,GAAG,GAAG,WAAW,aAAa,GAAG,GAAG,UAAU,YAAY,QAAQ,SAAS,wBAAwB,OAAO,GAAG,GAAG;EAE7P,UAAA,UAAU,oBAAC,aAAD,CAAc,CAAA,IAAI;CAC5B,CAAA;AAEb;AAOA,SAAgB,QAAQ,EACpB,IAAI,MAAM,MACV,UAAU,WACV,OAAO,WACP,UACA,SACA,YAAY,IACZ,UACA,GAAG,SACU;CACb,OACI,oBAAC,KAAD;EACI,GAAI;EACJ,WAAW,GAAG,cAAc,SAAS,GAAG,MAAM,MAAM,GAAG,WAAW,aAAa,GAAG,GAAG,UAAU,aAAa,GAAG,GAAG;EAEjH,UAAA,UAAU,oBAAC,aAAD,EAAa,SAAS,YAAY,OAAS,CAAA,IAAI;CACzD,CAAA;AAEb;;AAGA,SAAS,YAAY,EAAE,UAAU,SAAgC;CAC7D,OACI,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAY,UAAA;CAEzC,CAAA,GACN,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAC/B,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAc,UAAU,YAAY,OAAS,CAAA;CACjE,CAAA,CACR,EAAA,CAAA;AAEV"}

package/dist/typography/index.d.ts

@@ -0,0 +1,4 @@
+import { InlineLink, Link as Link$1, LinkBox as LinkBox$1, LinkOverlay as LinkOverlay$1, LinkOverlayProps as LinkOverlayProps$1, LinkProps as LinkProps$1 } from "./Link.js";
+import { Heading, HeadingProps, Text, TextProps } from "./Typography.js";
+import { Code as Code$1 } from "@ninna-ui/primitives";
+export { Code$1 as Code, Heading, type HeadingProps, InlineLink, Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay, type LinkOverlayProps$1 as LinkOverlayProps, type LinkProps$1 as LinkProps, Text, type TextProps };

package/dist/typography/index.js

@@ -0,0 +1,4 @@
+import { Heading, Text } from "./Typography.js";
+import { InlineLink, Link as Link$1, LinkBox as LinkBox$1, LinkOverlay as LinkOverlay$1 } from "./Link.js";
+import { Code as Code$1 } from "@ninna-ui/primitives";
+export { Code$1 as Code, Heading, InlineLink, Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay, Text };

package/package.json

@@ -1,6 +1,83 @@
 {
   "name": "@lar-works/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Lar's design system: tokens, base styles and every visual component the Lar web apps use.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maddec01/lar-web.git",
+    "directory": "packages/design-system"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.tsx"
+  ],
+  "dependencies": {
+    "@ninna-ui/core": "^0.6.0",
+    "@ninna-ui/feedback": "^0.6.0",
+    "@ninna-ui/forms": "^0.6.0",
+    "@ninna-ui/layout": "^0.6.0",
+    "@ninna-ui/overlays": "^0.6.0",
+    "@ninna-ui/primitives": "^0.6.0",
+    "@ninna-ui/react-internal": "^0.6.0",
+    "@tanstack/react-virtual": "^3.14.26",
+    "lucide-react": "^1.70.0",
+    "qrcode-generator": "^2.0.4"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "@lar-works/config": "0.1.0",
+    "@storybook/addon-a11y": "10.6.6",
+    "@storybook/addon-docs": "10.6.6",
+    "@storybook/addon-themes": "10.6.6",
+    "@storybook/react-vite": "10.6.6",
+    "@tailwindcss/vite": "^4.3.5",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.2.1",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "10.6.6",
+    "tailwindcss": "^4.3.5",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.5.0",
+    "vite-plus": "1.5.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test run",
+    "storybook": "storybook dev --port 6006",
+    "build-storybook": "storybook build --output-dir storybook-static"
+  }
 }