@abuzareal/contour-ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## 0.1.0
+
+- Extract reusable React components, theme tokens, styling, and optional 3D/scroll entries from the standalone design-system app.
+- Synchronize theme controls, tolerate blocked preference storage, and honor system reduced motion for theme changes.
+- Reject executable link schemes, preserve tooltip descriptions, make hidden flip-card faces inert, and handle empty tabs and zero-range sliders.
+- Ship typed ESM exports, optional font/reset styles, regression tests, and archive-content validation.
+
+This is the first release. The 3D interface is experimental; React 19 compatibility has not been verified.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 abuzareal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,111 @@
+# Contour UI
+
+An independent React component library for editorial interfaces: paper and ink surfaces, an acid accent, readable typography, restrained motion, and optional Three.js objects.
+
+The npm package is public under MIT; the development repository is private. Public consumers can inspect the distributed JavaScript, declarations, and CSS, but the repository and its issue tracker are accessible only to invited collaborators.
+
+**Status:** initial `0.1.0` release. React 18.3 is supported; React 19 and React Server Component execution are not advertised as tested. Interactive components belong in a client boundary in frameworks such as Next.js. The root module can be imported on the server, and basic components can render there.
+
+## Install
+
+```sh
+npm install @abuzareal/contour-ui react@18 react-dom@18
+```
+
+```tsx
+import "@abuzareal/contour-ui/reset.css"; // optional, global reset; omit with an existing reset
+import "@abuzareal/contour-ui/fonts.css"; // optional, self-hosted font assets bundled by your app
+import "@abuzareal/contour-ui/styles.css";
+import {
+  Button,
+  TextField,
+  ToastProvider,
+  ThemeToggle,
+} from "@abuzareal/contour-ui";
+
+export function App() {
+  return (
+    <ToastProvider>
+      <main data-motion="off">
+        <ThemeToggle animate={false} />
+        <TextField label="City" placeholder="Pune" />
+        <Button variant="accent">Show forecast</Button>
+      </main>
+    </ToastProvider>
+  );
+}
+```
+
+For an app with its own reset, include equivalent native button/input defaults, border-box sizing, focus outlines, and the `[hidden]` rule. Styles use globally named component classes and `:root` theme tokens; they are not Shadow DOM isolated. Avoid redefining generic classes such as `.card` or `.button` elsewhere.
+
+## Theme and motion setup
+
+All theme toggles read the same document state. Set `data-theme="light"` or `"dark"` on `<html>`. `useTheme(animate)` returns `{ theme, toggle }`; call `toggle(buttonElement)` for a user action. The existing `aa-theme` local-storage key is preserved for compatibility with the original portfolio. Preference storage is origin-local, not shared across different website domains.
+
+To avoid a first-paint theme flash, inject the exported static `themeBootstrapScript` from `@abuzareal/contour-ui/theme-bootstrap` into the HTML head at build time. It has no user-supplied interpolation. A strict Content Security Policy needs the appropriate script hash or nonce; do not enable unsafe inline scripts generally.
+
+Set `data-motion="off"` on your application wrapper when animation is disabled. `useMotionPreference()` tracks the system setting; combine it with your app's pause state. Pass the resulting `motionEnabled` to Three.js scenes and `animate` to theme controls. Reduced motion overrides theme reveal animations even if `animate` is true. No animation is required to operate the UI.
+
+`useToast()` must run below `ToastProvider`. The library does not send messages, collect analytics, fetch application data, or require a service account. Links reject executable URL schemes; application authentication, validation, authorization, and data handling remain the application's responsibility.
+
+## Optional entries
+
+```sh
+npm install three@^0.186.1      # only for the /three entry
+npm install lenis@^1.3.26      # only for the /scroll entry
+```
+
+```tsx
+import { lazy, Suspense } from "react";
+const Sculpture = lazy(() =>
+  import("@abuzareal/contour-ui/three").then((module) => ({
+    default: module.Sculpture,
+  })),
+);
+
+// Provide a sized container and an application-owned static fallback.
+<Suspense fallback={<p>Loading preview…</p>}>
+  <Sculpture motionEnabled={false} />
+</Suspense>;
+```
+
+`/three` also exports `ObjectStudy`, `useThreeStage`, geometry/material helpers, and their types. Treat the 3D API as experimental in this initial release. Scene setup functions are captured on mount; remount the scene when its setup configuration changes. Scenes require WebGL and should always have a visible fallback. No Three.js or Lenis imports occur in the core runtime graph.
+
+## Components and typed APIs
+
+The package exports named components and props types. TypeScript declarations are shipped with every entry; editors provide the complete props API.
+
+- Actions: `Button`, `IconButton`, `ExternalLink`, `SegmentedControl`, `ThemeToggle`.
+- Forms: `Field`, `TextField`, `TextArea`, `SelectField`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`.
+- Navigation: `Tabs`, `Breadcrumbs`, `Pagination`, `Stepper`, `DropdownMenu`.
+- Data and layout: `Avatar`, `Badge`, `Card`, `DataTable`, `Disclosure`, `Divider`, `EmptyState`, `Kbd`, `SectionLabel`, `Stat`, `Tag`, `Timeline`.
+- Feedback: `Alert`, `ProgressBar`, `Skeleton`, `Spinner`, `ToastProvider`, `useToast`.
+- Motion and signature: `BrandMark`, `CountUp`, `DepthButton`, `FlipCard`, `Magnetic`, `Marquee`, `Reveal`, `RevealHeading`, `ScrollProgress`, `TiltCard`, `GitHubIcon`, `LinkedInIcon`.
+- Overlays: `Dialog`, `Popover`, `Tooltip`, `SceneBoundary`.
+
+Use visible labels for fields, concise action labels for buttons, accessible labels for icon-only controls, and text alongside status colors. Sortable tables expect scalar string/number row values. Pagination expects a positive integer page count and a page in that range. Flip cards switch through their button; the hidden side is inert.
+
+Global colors, fonts, radii, duration, and spacing variables are in `tokens.css`. Override semantic tokens rather than copying components into your app. `styles.css` includes tokens and component styles; `fonts.css` and `reset.css` are separately opt-in. Do not import catalogue or portfolio CSS into other apps.
+
+## Independent repositories and updates
+
+This repository contains only the library. The catalogue and portfolio remain separate repositories and consume the same published npm version. During first-release validation, a packed archive can be installed locally; replace the archive dependency with the registry version before committing consumer manifests.
+
+```sh
+npm install @abuzareal/contour-ui@0.1.0 --save-exact
+```
+
+Commit both `package.json` and `package-lock.json`. Dependabot proposes version updates in each consumer repository. Updates reach production after that project's checks, merge, rebuild, and deployment. A registry release does not change deployed applications automatically.
+
+## Development and release
+
+```sh
+npm ci --ignore-scripts
+npm run validate
+npm audit
+npm pack --dry-run
+```
+
+See `RELEASING.md` for the release checklist, authentication, and trusted-publishing setup. The package ships only built code/styles and release documents, with no consumer installation scripts. The complete-source Git repository contains tests and tooling; those are excluded from the npm archive.
+
+MIT licensed. Font dependencies retain their own font licenses; Lucide, React, Three.js, and Lenis retain their respective licenses.

package/RELEASING.md

@@ -0,0 +1,37 @@
+# Releasing Contour UI
+
+## Initial release
+
+1. Verify `npm whoami` is `abuzareal`; the package is `@abuzareal/contour-ui` and public under MIT.
+2. Run `npm ci --ignore-scripts`, `npm run validate`, and `npm audit`. Review every advisory; do not release with unexplained audit findings.
+3. Test the actual packed archive in a clean React consumer without optional Three.js or Lenis, and in the catalogue and portfolio with their full browser suites.
+4. Check `npm pack --dry-run --json` and licenses. No private data, credentials, unrelated assets, maps, or app content may enter the archive.
+5. Push the reviewed source and release commit to the independent GitHub repository. The owner currently keeps this repository private; the npm distribution remains public under MIT.
+6. Set `private` to `false` only for an approved, validated release. Publish from the verified owner account: `npm publish --access public`. Complete npm's required authentication/2FA personally.
+7. Verify registry metadata, install the exact registry version in both consumers, rerun checks, and commit the manifest/lockfile changes. Do not commit temporary filesystem/archive dependencies.
+8. Tag the matching package version and record the release. Every future release requires a new version; npm versions cannot be overwritten.
+
+## Future trusted releases
+
+After the first package exists, configure npm's GitHub trusted publisher for owner `abuzareal`, repository `contour-ui`, workflow `release.yml`. Authenticate interactively to set this relationship; do not paste credentials into code or chat. Enable two-factor authentication on the owner account and prefer disabling ordinary token publishing after trusted publishing has been successfully verified.
+
+With account 2FA enabled, configure and verify the relationship using npm 11.15 or later:
+
+```sh
+npm trust github @abuzareal/contour-ui --file release.yml --repo abuzareal/contour-ui --allow-publish
+npm trust list @abuzareal/contour-ui
+```
+
+The release workflow accepts a manually dispatched version already present in package.json and requires the matching `vVERSION` tag to identify its source. It reruns validation, dependency audit, and clean-consumer tests before publishing with provenance. Push the reviewed release commit to main before tagging. Never publish from a pull-request event or add a persistent npm token to the workflow.
+
+The repository is currently private, so the configured workflow deliberately skips publishing. Release locally after running the checklist. Trusted publishing can be configured for a private repository, but npm does not support provenance attestations from private source repositories. If hosted releases are enabled later, review private-runner spending settings and remove the explicit provenance requirement for private source. The current workflow is ready for a future public repository and must not be presented as active automation while the repository stays private.
+
+Increment PATCH for compatible fixes, MINOR for compatible additions, and MAJOR for incompatible APIs or substantial incompatible default behavior. While the package is at 0.x, document every change carefully and keep consumers pinned to exact versions. Review visual changes in consuming apps even when the API is compatible.
+
+## Dependency updates and cost
+
+Dependabot is selected because it is integrated with GitHub and requires no extra hosted service or bot account. It proposes weekly npm and action updates; the library is not auto-merged. npm distribution is public. Standard-hosted Actions run only if the repository is public; checks run locally while it stays private. Do not enable paid runners, private npm distribution, or paid security subscriptions as part of this setup.
+
+The validation workflows deliberately skip private repositories. If a consumer stays private, run its checks locally before merging dependency updates. Enabling private-repository Actions later requires reviewing that account's included usage and spending settings first.
+
+Consumers install with `npm install @abuzareal/contour-ui@VERSION --save-exact`, commit their lockfile, run their checks, and redeploy. Keep the three Git repositories independent.

package/SECURITY.md

@@ -0,0 +1,11 @@
+# Security
+
+Report suspected vulnerabilities privately using GitHub's private vulnerability reporting for this repository once enabled. If that option is unavailable, contact the maintainer privately through their GitHub profile; do not post exploit details or credentials in a public issue.
+
+The latest published release is the supported version. Dependency audits identify known reported vulnerabilities, not all possible defects. No claim of complete security or formal accessibility certification is made.
+
+The core has no telemetry, remote asset requests, data-fetching services, raw HTML injection API, or consumer installation scripts. React escapes text content. Link wrappers reject protocols outside HTTP, HTTPS, mailto, and tel. Consumers remain responsible for trusted children, callbacks, CSP, application data validation, and authorization.
+
+Publication is limited to built library files and release documentation. The package-content gate rejects source maps, credentials/config files, archive files, and unexpected top-level paths. Optional rendering modules must be imported explicitly.
+
+Release controls: lockfile review, full dependency audit, typechecking, linting, regression tests, package archive inspection, independent consumer builds and browser tests, and a documented release. GitHub workflows run with minimal permissions and pinned action revisions. Trusted publishing is preferred over long-lived npm tokens. Never commit `.npmrc`, `.env`, recovery codes, or tokens.

package/dist/components/hero/SceneBoundary.d.ts

@@ -0,0 +1,14 @@
+/** Error boundary that hides the 3D scene if its lazy module or renderer throws. */
+import { Component, type ReactNode } from "react";
+export type SceneBoundaryProps = {
+    children: ReactNode;
+};
+type SceneBoundaryState = {
+    failed: boolean;
+};
+export default class SceneBoundary extends Component<SceneBoundaryProps, SceneBoundaryState> {
+    state: SceneBoundaryState;
+    static getDerivedStateFromError(): SceneBoundaryState;
+    render(): ReactNode;
+}
+export {};

package/dist/components/hero/SceneBoundary.js

@@ -0,0 +1,11 @@
+/** Error boundary that hides the 3D scene if its lazy module or renderer throws. */
+import { Component } from "react";
+export default class SceneBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}

package/dist/components/hero/Sculpture.d.ts

@@ -0,0 +1,4 @@
+export type SculptureProps = {
+    motionEnabled: boolean;
+};
+export default function Sculpture({ motionEnabled }: SculptureProps): import("react").JSX.Element;

package/dist/components/hero/Sculpture.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Hero sculpture: three chrome/lime links that follow the pointer and drift while motion is on. */
+import { useRef } from "react";
+import * as THREE from "three";
+import useThreeStage from "../../hooks/useThreeStage.js";
+import { createChrome, createLime, createLinkGeometry, } from "../../lib/threeMaterials.js";
+const restRotation = new THREE.Euler(-0.15, -0.1, -0.1);
+function setupSculpture({ scene }) {
+    const chrome = createChrome();
+    const lime = createLime();
+    const geometry = createLinkGeometry();
+    // Three interlocking links arranged as one assembly.
+    const assembly = new THREE.Group();
+    const firstLink = new THREE.Mesh(geometry, chrome);
+    firstLink.position.set(-0.76, 0.42, 0);
+    firstLink.rotation.set(0.4, -0.3, -0.4);
+    const secondLink = new THREE.Mesh(geometry, lime);
+    secondLink.position.set(0.62, -0.15, 0.1);
+    secondLink.rotation.set(0.25, 1.2, -0.35);
+    const thirdLink = new THREE.Mesh(geometry, chrome);
+    thirdLink.position.set(0.25, -0.83, -0.13);
+    thirdLink.scale.setScalar(0.8);
+    thirdLink.rotation.set(1.3, 0.1, 0.5);
+    assembly.add(firstLink, secondLink, thirdLink);
+    assembly.rotation.copy(restRotation);
+    scene.add(assembly);
+    return {
+        update: ({ delta, elapsed, pointer }) => {
+            const damping = 1 - Math.exp(-delta * 4);
+            assembly.rotation.y = THREE.MathUtils.lerp(assembly.rotation.y, pointer.x * 0.65 + Math.sin(elapsed * 0.22) * 0.12, damping);
+            assembly.rotation.x = THREE.MathUtils.lerp(assembly.rotation.x, pointer.y * 0.4 + restRotation.x, damping);
+            assembly.position.y = Math.sin(elapsed * 0.65) * 0.07;
+        },
+        rest: () => {
+            assembly.rotation.copy(restRotation);
+            assembly.position.y = 0;
+        },
+        dispose: () => {
+            geometry.dispose();
+            chrome.dispose();
+            lime.dispose();
+        },
+    };
+}
+const cameraDistance = (aspect) => Math.max(8.6, 5.5 / aspect);
+export default function Sculpture({ motionEnabled }) {
+    const hostRef = useRef(null);
+    useThreeStage(hostRef, {
+        motionEnabled,
+        setup: setupSculpture,
+        cameraDistance,
+    });
+    return (_jsx("div", { ref: hostRef, className: "sculpture-canvas", "data-state": "loading" }));
+}

package/dist/components/three/ObjectStudy.d.ts

@@ -0,0 +1,7 @@
+import { type ObjectStudyKind } from "../../lib/threeStudies.js";
+export type ObjectStudyProps = {
+    label: string;
+    motionEnabled: boolean;
+    study: ObjectStudyKind;
+};
+export default function ObjectStudy({ label, motionEnabled, study, }: ObjectStudyProps): import("react").JSX.Element;

package/dist/components/three/ObjectStudy.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Lays out a set of 3D objects in a responsive grid; each turns slowly and the set leans toward the pointer. */
+import { useRef } from "react";
+import * as THREE from "three";
+import useThreeStage from "../../hooks/useThreeStage.js";
+import { objectStudies } from "../../lib/threeStudies.js";
+const spacing = 3.2;
+const restTilt = new THREE.Euler(-0.25, 0.5, 0);
+/** Four across on wide stages, two by two on narrow ones. */
+const columnsFor = (aspect) => (aspect < 1.4 ? 2 : 4);
+const cameraDistance = (aspect) => {
+    const columns = columnsFor(aspect);
+    const rows = 4 / columns;
+    const width = columns * spacing;
+    const height = rows * spacing;
+    // tan(17.5deg) * 2 converts a 35deg field of view into visible height per unit distance.
+    const perUnit = 2 * Math.tan(THREE.MathUtils.degToRad(17.5));
+    return Math.max(width / (perUnit * aspect), height / perUnit) + 1.2;
+};
+export default function ObjectStudy({ label, motionEnabled, study, }) {
+    const hostRef = useRef(null);
+    useThreeStage(hostRef, {
+        motionEnabled,
+        cameraDistance,
+        setup: ({ scene, camera }) => {
+            const set = objectStudies[study]();
+            const group = new THREE.Group();
+            set.objects.forEach((object) => {
+                object.rotation.copy(restTilt);
+                group.add(object);
+            });
+            scene.add(group);
+            const arrange = () => {
+                const columns = columnsFor(camera.aspect);
+                const rows = Math.ceil(set.objects.length / columns);
+                set.objects.forEach((object, index) => {
+                    const column = index % columns;
+                    const row = Math.floor(index / columns);
+                    object.position.set((column - (columns - 1) / 2) * spacing, ((rows - 1) / 2 - row) * spacing, 0);
+                });
+            };
+            arrange();
+            return {
+                update: ({ delta, elapsed, pointer }) => {
+                    arrange();
+                    set.objects.forEach((object, index) => {
+                        object.rotation.y += delta * 0.45;
+                        object.rotation.x =
+                            restTilt.x + Math.sin(elapsed * 0.6 + index) * 0.15;
+                    });
+                    const damping = 1 - Math.exp(-delta * 3);
+                    group.rotation.y = THREE.MathUtils.lerp(group.rotation.y, pointer.x * 0.4, damping);
+                    group.rotation.x = THREE.MathUtils.lerp(group.rotation.x, pointer.y * 0.3, damping);
+                },
+                rest: () => {
+                    arrange();
+                    group.rotation.set(0, 0, 0);
+                    set.objects.forEach((object) => object.rotation.copy(restTilt));
+                },
+                dispose: set.dispose,
+            };
+        },
+    });
+    return (_jsx("div", { ref: hostRef, className: "stage-canvas", "data-state": "loading", role: "img", "aria-label": label }));
+}

package/dist/components/ui/Alert.d.ts

@@ -0,0 +1,13 @@
+/** Inline or full-width message with a tone icon, 3px accent rule, optional action, and dismiss. */
+import type { ReactNode } from "react";
+export type AlertTone = "neutral" | "accent" | "success" | "info" | "warning" | "danger";
+export type AlertProps = {
+    tone?: AlertTone;
+    title: string;
+    children?: ReactNode;
+    action?: ReactNode;
+    onDismiss?: () => void;
+    /** "banner" spans its container edge to edge on one line. */
+    layout?: "inline" | "banner";
+};
+export default function Alert({ tone, title, children, action, onDismiss, layout, }: AlertProps): import("react").JSX.Element;

package/dist/components/ui/Alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Asterisk, CircleCheck, CircleX, Info, TriangleAlert, X, } from "lucide-react";
+import { cx } from "../../lib/classNames.js";
+const toneIcons = {
+    neutral: _jsx(Asterisk, { size: 18 }),
+    accent: _jsx(Asterisk, { size: 18 }),
+    success: _jsx(CircleCheck, { size: 18 }),
+    info: _jsx(Info, { size: 18 }),
+    warning: _jsx(TriangleAlert, { size: 18 }),
+    danger: _jsx(CircleX, { size: 18 }),
+};
+export default function Alert({ tone = "neutral", title, children, action, onDismiss, layout = "inline", }) {
+    const urgent = tone === "warning" || tone === "danger";
+    return (_jsxs("div", { role: urgent ? "alert" : "status", className: cx("alert", `alert-${tone}`, `alert-${layout}`), children: [_jsx("span", { className: "alert-icon", "aria-hidden": "true", children: toneIcons[tone] }), _jsxs("div", { className: "alert-content", children: [_jsx("strong", { className: "alert-title", children: title }), children && _jsx("div", { className: "alert-body", children: children })] }), action && _jsx("div", { className: "alert-action", children: action }), onDismiss && (_jsx("button", { type: "button", className: "alert-dismiss", "aria-label": "Dismiss", onClick: onDismiss, children: _jsx(X, { size: 16 }) }))] }));
+}

package/dist/components/ui/Avatar.d.ts

@@ -0,0 +1,7 @@
+export type AvatarProps = {
+    name: string;
+    src?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    status?: "online" | "away";
+};
+export default function Avatar({ name, src, size, status, }: AvatarProps): import("react").JSX.Element;

package/dist/components/ui/Avatar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Round avatar showing a photo or Space Grotesk initials, with an optional presence dot. */
+import { cx } from "../../lib/classNames.js";
+const initialsOf = (name) => name
+    .split(" ")
+    .map((part) => part[0])
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+export default function Avatar({ name, src, size = "md", status, }) {
+    return (_jsxs("span", { className: cx("avatar", `avatar-${size}`), children: [src ? (_jsx("img", { src: src, alt: name, loading: "lazy", decoding: "async" })) : (_jsx("span", { role: "img", "aria-label": name, className: "avatar-initials", children: initialsOf(name) })), status && (_jsx("span", { className: cx("avatar-status", `avatar-status-${status}`), role: "img", "aria-label": status === "online" ? "Online" : "Away" }))] }));
+}

package/dist/components/ui/Badge.d.ts

@@ -0,0 +1,11 @@
+/** Compact mono label for status and metadata; tones follow the status palette. */
+import type { ReactNode } from "react";
+export type BadgeTone = "accent" | "neutral" | "invert" | "success" | "info" | "warning" | "danger";
+export type BadgeProps = {
+    children: ReactNode;
+    tone?: BadgeTone;
+    /** Leading status dot. */
+    dot?: boolean;
+    icon?: ReactNode;
+};
+export default function Badge({ children, tone, dot, icon, }: BadgeProps): import("react").JSX.Element;

package/dist/components/ui/Badge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../lib/classNames.js";
+export default function Badge({ children, tone = "accent", dot = false, icon, }) {
+    return (_jsxs("span", { className: cx("badge mono", `badge-${tone}`), children: [dot && _jsx("span", { className: "badge-dot", "aria-hidden": "true" }), icon, children] }));
+}

package/dist/components/ui/BrandMark.d.ts

@@ -0,0 +1,7 @@
+/** The "aa." monogram; links to the top of the page unless given another href. */
+export type BrandMarkProps = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+export default function BrandMark({ label, href, onClick, }: BrandMarkProps): import("react").JSX.Element;

package/dist/components/ui/BrandMark.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { safeHref } from "../../lib/safeHref.js";
+export default function BrandMark({ label, href = "#hero", onClick, }) {
+    return (_jsxs("a", { href: safeHref(href), className: "brand", "aria-label": label, onClick: onClick, children: ["aa", _jsx("span", { children: "." })] }));
+}

package/dist/components/ui/Breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+/** Mono breadcrumb trail separated by slashes, marking the current page. */
+type Crumb = {
+    label: string;
+    href?: string;
+};
+export type BreadcrumbsProps = {
+    items: Crumb[];
+};
+export default function Breadcrumbs({ items }: BreadcrumbsProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/Breadcrumbs.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { safeHref } from "../../lib/safeHref.js";
+export default function Breadcrumbs({ items }) {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "breadcrumbs mono", children: _jsx("ol", { children: items.map((item, index) => {
+                const current = index === items.length - 1;
+                return (_jsx("li", { children: current || !item.href ? (_jsx("span", { "aria-current": current ? "page" : undefined, children: item.label })) : (_jsx("a", { href: safeHref(item.href), children: item.label })) }, item.label));
+            }) }) }));
+}

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,12 @@
+/** Pill button in four emphasis levels and three sizes, with loading and icon slots. */
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { type ButtonSize, type ButtonVariant } from "../../lib/classNames.js";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Icon placed after the label; it nudges forward on hover. */
+    icon?: ReactNode;
+    leadingIcon?: ReactNode;
+    loading?: boolean;
+};
+export default function Button({ variant, size, icon, leadingIcon, loading, disabled, className, children, type, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/components/ui/Button.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonClassName, } from "../../lib/classNames.js";
+import Spinner from "./Spinner.js";
+export default function Button({ variant, size, icon, leadingIcon, loading = false, disabled, className, children, type = "button", ...rest }) {
+    return (_jsxs("button", { ...rest, type: type, className: buttonClassName(variant, size, className), disabled: disabled || loading, "aria-busy": loading || undefined, children: [loading ? _jsx(Spinner, { size: "sm", label: "Loading" }) : leadingIcon, _jsx("span", { children: children }), icon && _jsx("span", { className: "button-icon", children: icon })] }));
+}

package/dist/components/ui/Card.d.ts

@@ -0,0 +1,13 @@
+/** Content card in surface, ink, or acid tones with eyebrow, title, body, and footer slots. */
+import type { ReactNode } from "react";
+export type CardProps = {
+    title: string;
+    children?: ReactNode;
+    eyebrow?: string;
+    footer?: ReactNode;
+    icon?: ReactNode;
+    tone?: "surface" | "ink" | "acid";
+    /** Lifts on hover; use when the whole card is a link target. */
+    interactive?: boolean;
+};
+export default function Card({ title, children, eyebrow, footer, icon, tone, interactive, }: CardProps): import("react").JSX.Element;

package/dist/components/ui/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../lib/classNames.js";
+export default function Card({ title, children, eyebrow, footer, icon, tone = "surface", interactive = false, }) {
+    return (_jsxs("article", { className: cx("card", `card-${tone}`, interactive && "card-interactive"), children: [(eyebrow || icon) && (_jsxs("div", { className: "card-top mono", children: [eyebrow && _jsx("span", { children: eyebrow }), icon && _jsx("span", { className: "card-icon", children: icon })] })), _jsx("h3", { className: "card-title", children: title }), children && _jsx("div", { className: "card-body", children: children }), footer && _jsx("div", { className: "card-footer", children: footer })] }));
+}

package/dist/components/ui/Checkbox.d.ts

@@ -0,0 +1,9 @@
+/** Square checkbox with an acid check, optional description, error, and indeterminate state. */
+import { type InputHTMLAttributes } from "react";
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "id"> & {
+    label: string;
+    description?: string;
+    error?: string;
+    indeterminate?: boolean;
+};
+export default function Checkbox({ label, description, error, indeterminate, className, ...rest }: CheckboxProps): import("react").JSX.Element;

package/dist/components/ui/Checkbox.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Square checkbox with an acid check, optional description, error, and indeterminate state. */
+import { useEffect, useId, useRef } from "react";
+import { Check, Minus } from "lucide-react";
+import { cx } from "../../lib/classNames.js";
+export default function Checkbox({ label, description, error, indeterminate = false, className, ...rest }) {
+    const id = useId();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (_jsxs("div", { className: cx("choice", error && "choice-invalid", className), children: [_jsxs("span", { className: "choice-control", children: [_jsx("input", { ...rest, ref: ref, id: id, type: "checkbox", className: "choice-input", "aria-invalid": error ? true : undefined, "aria-describedby": error ? `${id}-error` : undefined }), _jsx("span", { className: "choice-box", "aria-hidden": "true", children: indeterminate ? (_jsx(Minus, { size: 13, strokeWidth: 3 })) : (_jsx(Check, { size: 13, strokeWidth: 3 })) })] }), _jsxs("label", { htmlFor: id, className: "choice-text", children: [_jsx("span", { className: "choice-label", children: label }), description && (_jsx("span", { className: "choice-description", children: description })), error && (_jsx("span", { id: `${id}-error`, className: "choice-error mono", children: error }))] })] }));
+}

package/dist/components/ui/CountUp.d.ts

@@ -0,0 +1,9 @@
+export type CountUpProps = {
+    to: number;
+    /** Milliseconds for the count. */
+    duration?: number;
+    /** Pads to this many digits, e.g. 2 renders 05. */
+    digits?: number;
+    suffix?: string;
+};
+export default function CountUp({ to, duration, digits, suffix, }: CountUpProps): import("react").JSX.Element;

package/dist/components/ui/CountUp.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Number that counts up the first time it scrolls into view; screen readers get the final value. */
+import { useEffect, useRef, useState } from "react";
+import { motionDisabledFor } from "../../lib/motion.js";
+const easeOutCubic = (progress) => 1 - (1 - progress) ** 3;
+export default function CountUp({ to, duration = 1400, digits = 0, suffix = "", }) {
+    const ref = useRef(null);
+    const [current, setCurrent] = useState(0);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        if (motionDisabledFor(element) || duration <= 0) {
+            setCurrent(to);
+            return;
+        }
+        let frame = 0;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (!entry.isIntersecting)
+                return;
+            if (motionDisabledFor(element)) {
+                setCurrent(to);
+                observer.disconnect();
+                return;
+            }
+            observer.disconnect();
+            const start = performance.now();
+            const tick = (time) => {
+                if (motionDisabledFor(element)) {
+                    setCurrent(to);
+                    return;
+                }
+                const progress = Math.min((time - start) / duration, 1);
+                setCurrent(Math.round(easeOutCubic(progress) * to));
+                if (progress < 1)
+                    frame = requestAnimationFrame(tick);
+            };
+            frame = requestAnimationFrame(tick);
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+            cancelAnimationFrame(frame);
+        };
+    }, [to, duration]);
+    const format = (value) => `${String(value).padStart(digits, "0")}${suffix}`;
+    return (_jsxs("span", { ref: ref, className: "count-up", children: [_jsx("span", { "aria-hidden": "true", children: format(current) }), _jsx("span", { className: "visually-hidden", children: format(to) })] }));
+}

package/dist/components/ui/DataTable.d.ts

@@ -0,0 +1,16 @@
+/** Editorial data table with mono headers, optional column sorting, and horizontal scroll on small screens. */
+import { type ReactNode } from "react";
+export type TableColumn<Row> = {
+    key: keyof Row & string;
+    header: string;
+    align?: "start" | "end";
+    sortable?: boolean;
+    render?: (row: Row) => ReactNode;
+};
+export type DataTableProps<Row> = {
+    caption: string;
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    rowKey: keyof Row & string;
+};
+export default function DataTable<Row extends Record<string, string | number>>({ caption, columns, rows, rowKey, }: DataTableProps<Row>): import("react").JSX.Element;