@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+const MotionContext = createContext(null);
+function Tabs({ value, defaultValue, onValueChange, swipe = true, orientation = "horizontal", activationMode = "automatic", className, ...rest }) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value ?? internal;
+  const change = (next) => {
+    if (value === void 0) setInternal(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(MotionContext.Provider, { value: { value: current, change, swipe: swipe && orientation === "horizontal", automatic: activationMode === "automatic" }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ...rest, activationMode, orientation, value: current, onValueChange: change, className: cn("folio-tabs", className) }) });
+}
+function TabsList({ className, ref: forwardedRef, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture, ...rest }) {
+  const motion = useContext(MotionContext);
+  const list = useRef(null);
+  const gesture = useRef(null);
+  const suppressClick = useRef(false);
+  const previousX = useRef(void 0);
+  useLayoutEffect(() => {
+    const element = list.current;
+    if (!element) return;
+    const measure = () => {
+      const active = element.querySelector("[role=tab][data-state=active]");
+      if (!active) return;
+      if (previousX.current !== void 0 && previousX.current !== active.offsetLeft) element.closest(".folio-tabs")?.style.setProperty("--tab-enter-x", active.offsetLeft > previousX.current ? "16px" : "-16px");
+      previousX.current = active.offsetLeft;
+      element.style.setProperty("--tab-x", `${active.offsetLeft}px`);
+      element.style.setProperty("--tab-y", `${active.offsetTop}px`);
+      element.style.setProperty("--tab-width", `${active.offsetWidth}px`);
+      element.style.setProperty("--tab-height", `${active.offsetHeight}px`);
+      element.dataset.measured = "true";
+      if (element.clientWidth > 0) {
+        const viewport = element.getBoundingClientRect();
+        const item = active.getBoundingClientRect();
+        const delta = item.left < viewport.left ? item.left - viewport.left : item.right > viewport.right ? item.right - viewport.right : 0;
+        if (delta) element.scrollBy({ left: delta, behavior: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth" });
+      }
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    observer?.observe(element);
+    element.querySelectorAll("[role=tab]").forEach((tab) => observer?.observe(tab));
+    return () => observer?.disconnect();
+  }, [motion?.value]);
+  const reset = () => {
+    gesture.current = null;
+    list.current?.style.setProperty("--tab-drag-x", "0px");
+    list.current?.removeAttribute("data-dragging");
+  };
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref: (element) => {
+        list.current = element;
+        if (typeof forwardedRef === "function") forwardedRef(element);
+        else if (forwardedRef) forwardedRef.current = element;
+      },
+      "data-swipe": motion?.swipe || void 0,
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        if (event.defaultPrevented || !motion?.swipe || event.button !== 0 || !event.isPrimary) return;
+        suppressClick.current = false;
+        gesture.current = { x: event.clientX, y: event.clientY, id: event.pointerId, dragged: false };
+      },
+      onPointerMove: (event) => {
+        onPointerMove?.(event);
+        const start = gesture.current;
+        if (!start || event.pointerId !== start.id) return;
+        const dx = event.clientX - start.x;
+        if (Math.abs(event.clientY - start.y) > Math.abs(dx) && !start.dragged) {
+          reset();
+          return;
+        }
+        if (Math.abs(dx) > 8) {
+          start.dragged = true;
+          event.currentTarget.setPointerCapture(event.pointerId);
+          event.currentTarget.dataset.dragging = "true";
+          event.currentTarget.style.setProperty("--tab-drag-x", `${Math.max(-64, Math.min(64, dx * 0.4))}px`);
+        }
+      },
+      onPointerUp: (event) => {
+        onPointerUp?.(event);
+        const start = gesture.current;
+        if (!start) return;
+        const dx = event.clientX - start.x;
+        suppressClick.current = start.dragged;
+        if (start.dragged && Math.abs(dx) >= 36) {
+          const tabs = Array.from(event.currentTarget.querySelectorAll("[role=tab]:not([disabled])"));
+          const index = tabs.findIndex((tab) => tab.dataset.state === "active");
+          const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+          const next = tabs[index + (dx > 0 !== rtl ? 1 : -1)];
+          if (next?.dataset.tabValue) {
+            const alreadyFocused = document.activeElement === next;
+            next.focus({ preventScroll: true });
+            if (!motion?.automatic || alreadyFocused) motion?.change(next.dataset.tabValue);
+          }
+        }
+        reset();
+      },
+      onPointerCancel: (event) => {
+        onPointerCancel?.(event);
+        reset();
+      },
+      onClickCapture: (event) => {
+        if (suppressClick.current) {
+          event.preventDefault();
+          event.stopPropagation();
+          suppressClick.current = false;
+        } else onClickCapture?.(event);
+      },
+      className: cn(
+        // `overflow-y-hidden` is not decoration. A strip only ever scrolls
+        // sideways, but `overflow-x: auto` on its own computes `overflow-y` to
+        // `auto` as well — and the active trigger's `-mb-px` rule leaves the
+        // content exactly one pixel taller than the box, which is enough for a
+        // vertical scrollbar to appear beside a row of tabs that has nothing
+        // to scroll.
+        "folio-tabs-list flex items-center overflow-x-auto overflow-y-hidden gap-1 border-b border-(--rule-2) scroll-slim",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function TabsTrigger({ className, onMouseDown, onClick, ...rest }) {
+  const motion = useContext(MotionContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-tab-value": rest.value,
+      onMouseDown: (event) => {
+        onMouseDown?.(event);
+        if (motion?.swipe && !event.defaultPrevented && event.button === 0) event.preventDefault();
+      },
+      onClick: (event) => {
+        onClick?.(event);
+        if (motion?.swipe && !event.defaultPrevented) {
+          const alreadyFocused = document.activeElement === event.currentTarget;
+          event.currentTarget.focus();
+          if (!motion.automatic || alreadyFocused) motion.change(rest.value);
+        }
+      },
+      className: cn(
+        "-mb-px min-h-(--control-h-md) shrink-0 whitespace-nowrap border-b-2 border-transparent px-3.5 py-2 text-sm text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:text-(--ink) data-[state=active]:border-(--accent) data-[state=active]:text-(--accent-on-muted)",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function TabsContent({ className, onTouchStart, onTouchEnd, onTouchCancel, ...rest }) {
+  const motion = useContext(MotionContext);
+  const start = useRef(null);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-folio-animated": true,
+      onTouchStart: (event) => {
+        onTouchStart?.(event);
+        start.current = null;
+        if (!motion?.swipe || event.defaultPrevented || event.touches.length !== 1 || event.target.closest(".folio-tabs") !== event.currentTarget.closest(".folio-tabs") || event.target.closest("a,button,input,textarea,select,pre,code,[contenteditable=true],[data-no-swipe]")) return;
+        const touch = event.touches[0];
+        if (touch) start.current = { x: touch.clientX, y: touch.clientY };
+      },
+      onTouchEnd: (event) => {
+        onTouchEnd?.(event);
+        const origin = start.current;
+        start.current = null;
+        if (!origin || event.defaultPrevented || !event.changedTouches[0] || window.getSelection()?.toString()) return;
+        const dx = event.changedTouches[0].clientX - origin.x;
+        const dy = event.changedTouches[0].clientY - origin.y;
+        if (Math.abs(dx) < 48 || Math.abs(dx) < Math.abs(dy) * 1.5) return;
+        const list = event.currentTarget.closest(".folio-tabs")?.querySelector("[role=tablist]");
+        if (!list) return;
+        const tabs = Array.from(list.querySelectorAll("[role=tab]:not([disabled])"));
+        const index = tabs.findIndex((tab) => tab.dataset.state === "active");
+        const rtl = getComputedStyle(list).direction === "rtl";
+        const next = tabs[index + (dx < 0 !== rtl ? 1 : -1)];
+        if (next?.dataset.tabValue) {
+          const alreadyFocused = document.activeElement === next;
+          next.focus({ preventScroll: true });
+          if (!motion?.automatic || alreadyFocused) motion?.change(next.dataset.tabValue);
+        }
+      },
+      onTouchCancel: (event) => {
+        start.current = null;
+        onTouchCancel?.(event);
+      },
+      className: cn("folio-tabs-panel pt-5", className),
+      ...rest
+    }
+  );
+}
+var Tabs_default = Tabs;
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tabs_default as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { createContext, useContext, useLayoutEffect, useRef, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nconst MotionContext = createContext<{ value?: string; change: (value: string) => void; swipe: boolean; automatic: boolean } | null>(null)\n\n/** Accessible tabs with a moving marker and optional horizontal drag gestures. */\nexport function Tabs({ value, defaultValue, onValueChange, swipe = true, orientation = 'horizontal', activationMode = 'automatic', className, ...rest }: ComponentProps<typeof TabsPrimitive.Root> & { swipe?: boolean }) {\n  const [internal, setInternal] = useState(defaultValue)\n  const current = value ?? internal\n  const change = (next: string) => { if (value === undefined) setInternal(next); onValueChange?.(next) }\n  return <MotionContext.Provider value={{ value: current, change, swipe: swipe && orientation === 'horizontal', automatic: activationMode === 'automatic' }}><TabsPrimitive.Root {...rest} activationMode={activationMode} orientation={orientation} value={current} onValueChange={change} className={cn('folio-tabs', className)} /></MotionContext.Provider>\n}\n\n/**\n * The tab strip.\n *\n * Scrolls horizontally rather than wrapping. A wrapped second row of tabs moves\n * every tab below it when the strip grows, and the reader loses the one they\n * were about to click.\n *\n * @example\n * <Tabs defaultValue=\"preview\">\n *   <TabsList>\n *     <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n *     <TabsTrigger value=\"code\">Code</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"preview\">…</TabsContent>\n * </Tabs>\n */\nexport function TabsList({ className, ref: forwardedRef, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture, ...rest }: ComponentProps<typeof TabsPrimitive.List>) {\n  const motion = useContext(MotionContext)\n  const list = useRef<HTMLDivElement>(null)\n  const gesture = useRef<{ x: number; y: number; id: number; dragged: boolean } | null>(null)\n  const suppressClick = useRef(false)\n  const previousX = useRef<number | undefined>(undefined)\n  useLayoutEffect(() => {\n    const element = list.current\n    if (!element) return\n    const measure = () => {\n      const active = element.querySelector<HTMLElement>('[role=tab][data-state=active]')\n      if (!active) return\n      if (previousX.current !== undefined && previousX.current !== active.offsetLeft) element.closest<HTMLElement>('.folio-tabs')?.style.setProperty('--tab-enter-x', active.offsetLeft > previousX.current ? '16px' : '-16px')\n      previousX.current = active.offsetLeft\n      element.style.setProperty('--tab-x', `${active.offsetLeft}px`)\n      element.style.setProperty('--tab-y', `${active.offsetTop}px`)\n      element.style.setProperty('--tab-width', `${active.offsetWidth}px`)\n      element.style.setProperty('--tab-height', `${active.offsetHeight}px`)\n      element.dataset.measured = 'true'\n      if (element.clientWidth > 0) {\n        const viewport = element.getBoundingClientRect()\n        const item = active.getBoundingClientRect()\n        const delta = item.left < viewport.left ? item.left - viewport.left : item.right > viewport.right ? item.right - viewport.right : 0\n        if (delta) element.scrollBy({ left: delta, behavior: window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth' })\n      }\n    }\n    measure()\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure)\n    observer?.observe(element)\n    element.querySelectorAll('[role=tab]').forEach(tab => observer?.observe(tab))\n    return () => observer?.disconnect()\n  }, [motion?.value])\n  const reset = () => { gesture.current = null; list.current?.style.setProperty('--tab-drag-x', '0px'); list.current?.removeAttribute('data-dragging') }\n  return (\n    <TabsPrimitive.List\n      ref={element => { list.current = element; if (typeof forwardedRef === 'function') forwardedRef(element); else if (forwardedRef) forwardedRef.current = element }}\n      data-swipe={motion?.swipe || undefined}\n      onPointerDown={event => {\n        onPointerDown?.(event)\n        if (event.defaultPrevented || !motion?.swipe || event.button !== 0 || !event.isPrimary) return\n        suppressClick.current = false\n        gesture.current = { x: event.clientX, y: event.clientY, id: event.pointerId, dragged: false }\n      }}\n      onPointerMove={event => {\n        onPointerMove?.(event)\n        const start = gesture.current\n        if (!start || event.pointerId !== start.id) return\n        const dx = event.clientX - start.x\n        if (Math.abs(event.clientY - start.y) > Math.abs(dx) && !start.dragged) { reset(); return }\n        if (Math.abs(dx) > 8) {\n          start.dragged = true\n          event.currentTarget.setPointerCapture(event.pointerId)\n          event.currentTarget.dataset.dragging = 'true'\n          event.currentTarget.style.setProperty('--tab-drag-x', `${Math.max(-64, Math.min(64, dx * .4))}px`)\n        }\n      }}\n      onPointerUp={event => {\n        onPointerUp?.(event)\n        const start = gesture.current\n        if (!start) return\n        const dx = event.clientX - start.x\n        suppressClick.current = start.dragged\n        if (start.dragged && Math.abs(dx) >= 36) {\n          const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('[role=tab]:not([disabled])'))\n          const index = tabs.findIndex(tab => tab.dataset.state === 'active')\n          const rtl = getComputedStyle(event.currentTarget).direction === 'rtl'\n          const next = tabs[index + ((dx > 0) !== rtl ? 1 : -1)]\n          if (next?.dataset.tabValue) {\n            const alreadyFocused = document.activeElement === next\n            next.focus({ preventScroll: true })\n            if (!motion?.automatic || alreadyFocused) motion?.change(next.dataset.tabValue)\n          }\n        }\n        reset()\n      }}\n      onPointerCancel={event => { onPointerCancel?.(event); reset() }}\n      onClickCapture={event => { if (suppressClick.current) { event.preventDefault(); event.stopPropagation(); suppressClick.current = false } else onClickCapture?.(event) }}\n      className={cn(\n        // `overflow-y-hidden` is not decoration. A strip only ever scrolls\n        // sideways, but `overflow-x: auto` on its own computes `overflow-y` to\n        // `auto` as well — and the active trigger's `-mb-px` rule leaves the\n        // content exactly one pixel taller than the box, which is enough for a\n        // vertical scrollbar to appear beside a row of tabs that has nothing\n        // to scroll.\n        'folio-tabs-list flex items-center overflow-x-auto overflow-y-hidden gap-1 border-b border-(--rule-2) scroll-slim',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One tab.\n *\n * The active marker is a 2px ink rule pulled onto the strip's own border with\n * `-mb-px`, so the two occupy the same line instead of stacking into a 3px\n * edge. 44px tall, because a tab is a pointer target like any other.\n */\nexport function TabsTrigger({ className, onMouseDown, onClick, ...rest }: ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const motion = useContext(MotionContext)\n  return (\n    <TabsPrimitive.Trigger\n      data-tab-value={rest.value}\n      onMouseDown={event => { onMouseDown?.(event); if (motion?.swipe && !event.defaultPrevented && event.button === 0) event.preventDefault() }}\n      onClick={event => { onClick?.(event); if (motion?.swipe && !event.defaultPrevented) { const alreadyFocused = document.activeElement === event.currentTarget; event.currentTarget.focus(); if (!motion.automatic || alreadyFocused) motion.change(rest.value) } }}\n      className={cn(\n        '-mb-px min-h-(--control-h-md) shrink-0 whitespace-nowrap border-b-2 border-transparent px-3.5 py-2 text-sm text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:text-(--ink) data-[state=active]:border-(--accent) data-[state=active]:text-(--accent-on-muted)',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The panel paired to a {@link TabsTrigger} by matching `value`. */\nexport function TabsContent({ className, onTouchStart, onTouchEnd, onTouchCancel, ...rest }: ComponentProps<typeof TabsPrimitive.Content>) {\n  const motion = useContext(MotionContext)\n  const start = useRef<{ x: number; y: number } | null>(null)\n  return (\n    <TabsPrimitive.Content\n      data-folio-animated\n      onTouchStart={event => {\n        onTouchStart?.(event)\n        start.current = null\n        if (!motion?.swipe || event.defaultPrevented || event.touches.length !== 1 || (event.target as HTMLElement).closest('.folio-tabs') !== event.currentTarget.closest('.folio-tabs') || (event.target as HTMLElement).closest('a,button,input,textarea,select,pre,code,[contenteditable=true],[data-no-swipe]')) return\n        const touch = event.touches[0]\n        if (touch) start.current = { x: touch.clientX, y: touch.clientY }\n      }}\n      onTouchEnd={event => {\n        onTouchEnd?.(event)\n        const origin = start.current\n        start.current = null\n        if (!origin || event.defaultPrevented || !event.changedTouches[0] || window.getSelection()?.toString()) return\n        const dx = event.changedTouches[0].clientX - origin.x\n        const dy = event.changedTouches[0].clientY - origin.y\n        if (Math.abs(dx) < 48 || Math.abs(dx) < Math.abs(dy) * 1.5) return\n        const list = event.currentTarget.closest('.folio-tabs')?.querySelector('[role=tablist]')\n        if (!list) return\n        const tabs = Array.from(list.querySelectorAll<HTMLElement>('[role=tab]:not([disabled])'))\n        const index = tabs.findIndex(tab => tab.dataset.state === 'active')\n        const rtl = getComputedStyle(list).direction === 'rtl'\n        const next = tabs[index + ((dx < 0) !== rtl ? 1 : -1)]\n        if (next?.dataset.tabValue) {\n          const alreadyFocused = document.activeElement === next\n          next.focus({ preventScroll: true })\n          if (!motion?.automatic || alreadyFocused) motion?.change(next.dataset.tabValue)\n        }\n      }}\n      onTouchCancel={event => { start.current = null; onTouchCancel?.(event) }}\n      className={cn('folio-tabs-panel pt-5', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Tabs\n"],"mappings":"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","names":[]}

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,87 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+    children: ReactNode;
+    /**
+     * Renders the pressed/selected look, and declares the chip a toggle.
+     *
+     * An interactive chip reads `aria-pressed` off this same value, so the accent
+     * fill and the state a screen reader hears cannot drift apart. Leave it off
+     * for a chip whose `onClick` navigates or opens something: a control that is
+     * neither pressed nor unpressed is better announced as neither than as
+     * "not pressed".
+     */
+    active?: boolean;
+    /**
+     * Makes the chip ITSELF the filter control.
+     *
+     * This prop exists because the alternative did not survive contact with
+     * `onRemove`. The advice used to be to wrap the tag in a button at the call
+     * site, which is fine on its own and invalid the moment the chip is also
+     * removable: the remove control is a real `<button>`, so the wrapper puts a
+     * button inside a button — markup the parser splits into siblings, leaving a
+     * DOM neither the author nor the accessibility tree expects.
+     *
+     * With this the wrapper is never written. The chip carries the click, the
+     * focus ring and the pressed state on the element that draws them, and a
+     * removable filter chip renders its two controls side by side instead of one
+     * inside the other.
+     */
+    onClick?: () => void;
+}
+/**
+ * The removable form: a chip for one thing the reader has already chosen.
+ *
+ * `removeLabel` is required alongside `onRemove` and not optional with a
+ * default, because "Remove" repeated down a row of filters is eight controls a
+ * screen reader cannot tell apart. Write the subject into it — "Remove
+ * TypeScript filter".
+ */
+interface TagRemovable {
+    /** Called when the reader dismisses the chip. */
+    onRemove: () => void;
+    /** The remove button's accessible name. Name the subject, not the action. */
+    removeLabel: string;
+}
+interface TagStatic {
+    onRemove?: never;
+    removeLabel?: never;
+}
+type TagProps = TagBase & (TagRemovable | TagStatic);
+/**
+ * A subject label — a topic, a technology, a filter facet — that can filter
+ * with `onClick` and be dismissed with `onRemove`.
+ *
+ * Distinct from `Badge`, which carries a state or a count. A tag names what
+ * something is ABOUT, so several sit together in a row and the reader scans
+ * them; a badge is one fact about one record.
+ *
+ * This is where a `Token` component would have gone. It was not built: a token
+ * is a tag with a remove button, and the difference between the two is one
+ * prop, not one component. The system already ships three things that look
+ * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction
+ * is an X on the end would be the one a call site picks by coin toss.
+ *
+ * Presentational until it is given a handler, and the component owns both
+ * interactive cases rather than leaving one to a wrapper at the call site.
+ * That is not a convenience: a wrapping `<button>` around a chip that already
+ * holds the remove `<button>` is a button inside a button, which no parser
+ * keeps and no accessibility tree reports the way it was written. Given both,
+ * the chip renders the label and the X as SIBLING buttons — the label takes
+ * the leading padding with it, so it is the whole of the chip up to the X
+ * rather than the words with dead padding around them.
+ *
+ * @example
+ * <Tag>TypeScript</Tag>
+ * @example
+ * <Tag active={on} onClick={toggle}>Rust</Tag>
+ * @example
+ * <Tag onRemove={() => drop('rust')} removeLabel="Remove Rust filter">Rust</Tag>
+ * @example
+ * // Both: a filter the reader can toggle and also take out of the row.
+ * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel="Remove Rust filter">Rust</Tag>
+ */
+declare function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps): react.JSX.Element;
+
+export { Tag, type TagProps, Tag as default };

package/dist/components/Tag/Tag.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiCloseLine } from "@remixicon/react";
+import { cn } from "../../lib/cn.js";
+function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }) {
+  const split = Boolean(onClick && onRemove);
+  const chip = cn(
+    "inline-flex items-center rounded-(--radius-sm) font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)",
+    active ? "bg-(--accent) text-(--accent-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
+    onRemove ? "gap-1 pe-1.5" : "pe-2.5",
+    // Handed to the label button in the split form, so the padding is part of
+    // the target rather than a ring of dead space around it.
+    !split && "py-1 ps-2.5",
+    className
+  );
+  const remove = onRemove ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onRemove,
+      "aria-label": removeLabel,
+      className: cn(
+        // The drawn box is 16px, which is under the 24px minimum a pointer
+        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes
+        // the hit area out to 24 without changing what is drawn or pushing
+        // the chips apart — the 44px floor is for a standalone control, and
+        // a chip is 24 tall to begin with.
+        "relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)",
+        "before:absolute before:inset-[-4px] before:content-['']",
+        "opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100"
+      ),
+      children: /* @__PURE__ */ jsx(RiCloseLine, { size: 12, "aria-hidden": true })
+    }
+  ) : null;
+  if (split) {
+    return /* @__PURE__ */ jsxs("span", { className: chip, ...rest, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick,
+          "aria-pressed": active,
+          className: "rounded-(--radius-sm) py-1 ps-2.5 font-mono text-xs tracking-wide",
+          children
+        }
+      ),
+      remove
+    ] });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, "aria-pressed": active, className: chip, ...rest, children });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: chip, ...rest, children: [
+    children,
+    remove
+  ] });
+}
+var Tag_default = Tag;
+export {
+  Tag,
+  Tag_default as default
+};
+//# sourceMappingURL=Tag.js.map

package/dist/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { RiCloseLine } from '@remixicon/react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\ninterface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {\n  children: ReactNode\n  /**\n   * Renders the pressed/selected look, and declares the chip a toggle.\n   *\n   * An interactive chip reads `aria-pressed` off this same value, so the accent\n   * fill and the state a screen reader hears cannot drift apart. Leave it off\n   * for a chip whose `onClick` navigates or opens something: a control that is\n   * neither pressed nor unpressed is better announced as neither than as\n   * \"not pressed\".\n   */\n  active?: boolean\n  /**\n   * Makes the chip ITSELF the filter control.\n   *\n   * This prop exists because the alternative did not survive contact with\n   * `onRemove`. The advice used to be to wrap the tag in a button at the call\n   * site, which is fine on its own and invalid the moment the chip is also\n   * removable: the remove control is a real `<button>`, so the wrapper puts a\n   * button inside a button — markup the parser splits into siblings, leaving a\n   * DOM neither the author nor the accessibility tree expects.\n   *\n   * With this the wrapper is never written. The chip carries the click, the\n   * focus ring and the pressed state on the element that draws them, and a\n   * removable filter chip renders its two controls side by side instead of one\n   * inside the other.\n   */\n  onClick?: () => void\n}\n\n/**\n * The removable form: a chip for one thing the reader has already chosen.\n *\n * `removeLabel` is required alongside `onRemove` and not optional with a\n * default, because \"Remove\" repeated down a row of filters is eight controls a\n * screen reader cannot tell apart. Write the subject into it — \"Remove\n * TypeScript filter\".\n */\ninterface TagRemovable {\n  /** Called when the reader dismisses the chip. */\n  onRemove: () => void\n  /** The remove button's accessible name. Name the subject, not the action. */\n  removeLabel: string\n}\n\ninterface TagStatic {\n  onRemove?: never\n  removeLabel?: never\n}\n\nexport type TagProps = TagBase & (TagRemovable | TagStatic)\n\n/**\n * A subject label — a topic, a technology, a filter facet — that can filter\n * with `onClick` and be dismissed with `onRemove`.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * This is where a `Token` component would have gone. It was not built: a token\n * is a tag with a remove button, and the difference between the two is one\n * prop, not one component. The system already ships three things that look\n * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction\n * is an X on the end would be the one a call site picks by coin toss.\n *\n * Presentational until it is given a handler, and the component owns both\n * interactive cases rather than leaving one to a wrapper at the call site.\n * That is not a convenience: a wrapping `<button>` around a chip that already\n * holds the remove `<button>` is a button inside a button, which no parser\n * keeps and no accessibility tree reports the way it was written. Given both,\n * the chip renders the label and the X as SIBLING buttons — the label takes\n * the leading padding with it, so it is the whole of the chip up to the X\n * rather than the words with dead padding around them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <Tag active={on} onClick={toggle}>Rust</Tag>\n * @example\n * <Tag onRemove={() => drop('rust')} removeLabel=\"Remove Rust filter\">Rust</Tag>\n * @example\n * // Both: a filter the reader can toggle and also take out of the row.\n * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel=\"Remove Rust filter\">Rust</Tag>\n */\nexport function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps) {\n  // Two controls cannot nest, so a chip that is both a filter and a selection\n  // splits its label out into a button of its own beside the remove button.\n  const split = Boolean(onClick && onRemove)\n\n  const chip = cn(\n    'inline-flex items-center rounded-(--radius-sm) font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)',\n    active ? 'bg-(--accent) text-(--accent-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n    onRemove ? 'gap-1 pe-1.5' : 'pe-2.5',\n    // Handed to the label button in the split form, so the padding is part of\n    // the target rather than a ring of dead space around it.\n    !split && 'py-1 ps-2.5',\n    className,\n  )\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      onClick={onRemove}\n      aria-label={removeLabel}\n      className={cn(\n        // The drawn box is 16px, which is under the 24px minimum a pointer\n        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes\n        // the hit area out to 24 without changing what is drawn or pushing\n        // the chips apart — the 44px floor is for a standalone control, and\n        // a chip is 24 tall to begin with.\n        'relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)',\n        \"before:absolute before:inset-[-4px] before:content-['']\",\n        'opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100',\n      )}\n    >\n      <RiCloseLine size={12} aria-hidden />\n    </button>\n  ) : null\n\n  if (split) {\n    return (\n      <span className={chip} {...rest}>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-pressed={active}\n          className=\"rounded-(--radius-sm) py-1 ps-2.5 font-mono text-xs tracking-wide\"\n        >\n          {children}\n        </button>\n        {remove}\n      </span>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} aria-pressed={active} className={chip} {...rest}>\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <span className={chip} {...rest}>\n      {children}\n      {remove}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AAwHM,cAMA,YANA;AAxHN,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AAuFZ,SAAS,IAAI,EAAE,UAAU,QAAQ,SAAS,UAAU,aAAa,WAAW,GAAG,KAAK,GAAa;AAGtG,QAAM,QAAQ,QAAQ,WAAW,QAAQ;AAEzC,QAAM,OAAO;AAAA,IACX;AAAA,IACA,SAAS,6CAA6C;AAAA,IACtD,WAAW,iBAAiB;AAAA;AAAA;AAAA,IAG5B,CAAC,SAAS;AAAA,IACV;AAAA,EACF;AAEA,QAAM,SAAS,WACb;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,eAAY,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,EACrC,IACE;AAEJ,MAAI,OAAO;AACT,WACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACzB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,gBAAc;AAAA,UACd,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,oBAAC,YAAO,MAAK,UAAS,SAAkB,gBAAc,QAAQ,WAAW,MAAO,GAAG,MAChF,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACxB;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * A rung of the type scale, named for what it is FOR rather than for a pixel
+ * value. `base` is body copy; `lead` is the standfirst that carries a piece and
+ * is the only step here that touches the heading ladder (`--fs-item`, its
+ * bottom rung). Nothing above that: a paragraph larger than a record title is a
+ * heading that forgot to be one.
+ */
+type TextSize = 'xs' | 'sm' | 'base' | 'lead';
+/**
+ * A rung of the ink ladder. Three, because the ladder has three.
+ *
+ * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper
+ * and are not the same token: `--ink-3` is a translucent tint that inherits
+ * whatever is under it, so it clears AA on the page ground and quietly fails on
+ * a card, a plate, or a code block.
+ */
+type TextTone = 'body' | 'strong' | 'muted';
+type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption';
+interface TextProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Which rung of the type scale. See {@link TextSize}. */
+    size?: TextSize;
+    /** Which rung of the ink ladder. See {@link TextTone}. */
+    tone?: TextTone;
+    /**
+     * The element, and ONLY the element.
+     *
+     * Changing it changes what the markup means — a `span` inside a sentence, an
+     * `li` inside a list someone else opened — and changes nothing about the
+     * look. That separation is the whole point: the alternative is a `<p>` nested
+     * inside a `<p>`, which the HTML parser silently splits into two, or a
+     * paragraph faked out of a `<div>` because the real element brought a size
+     * with it.
+     */
+    as?: TextElement;
+}
+/**
+ * A paragraph, or a run of text that wants the system's voice.
+ *
+ * The step between `Article` and raw JSX. `Article` styles a whole reading
+ * column from element selectors and is the right answer for a post; this is for
+ * the single paragraph that is NOT in a column — a card's description, a
+ * dialog's explanation, the line under an empty state.
+ *
+ * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs
+ * are all full-strength ink has spent the top of the ladder on its body copy
+ * and has nothing left for the headings, which is the single most common way a
+ * monochrome page loses its hierarchy.
+ *
+ * @example
+ * <Text>Twelve releases this quarter, none rolled back.</Text>
+ * @example
+ * <Text size="lead" tone="strong">A monochrome system for software and writing.</Text>
+ * @example
+ * <Text as="span" size="sm" tone="muted">Updated just now</Text>
+ */
+declare function Text({ children, size, tone, as, className, ...rest }: TextProps): react.JSX.Element;
+
+export { Text, type TextElement, type TextProps, type TextSize, type TextTone, Text as default };

package/dist/components/Text/Text.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const SIZE = {
+  xs: "text-xs leading-[1.6]",
+  sm: "text-sm leading-[1.65]",
+  base: "text-base font-light leading-[1.75]",
+  lead: "text-[length:var(--fs-item)] font-light leading-[1.6]"
+};
+const TONE = {
+  body: "text-(--ink-2)",
+  strong: "text-(--ink)",
+  muted: "text-(--ink-3-aa)"
+};
+function Text({
+  children,
+  size = "base",
+  tone = "body",
+  as = "p",
+  className,
+  ...rest
+}) {
+  const Comp = as;
+  return /* @__PURE__ */ jsx(Comp, { className: cn("m-0", SIZE[size], TONE[tone], className), ...rest, children });
+}
+var Text_default = Text;
+export {
+  Text,
+  Text_default as default
+};
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * A rung of the type scale, named for what it is FOR rather than for a pixel\n * value. `base` is body copy; `lead` is the standfirst that carries a piece and\n * is the only step here that touches the heading ladder (`--fs-item`, its\n * bottom rung). Nothing above that: a paragraph larger than a record title is a\n * heading that forgot to be one.\n */\nexport type TextSize = 'xs' | 'sm' | 'base' | 'lead'\n\n/**\n * A rung of the ink ladder. Three, because the ladder has three.\n *\n * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper\n * and are not the same token: `--ink-3` is a translucent tint that inherits\n * whatever is under it, so it clears AA on the page ground and quietly fails on\n * a card, a plate, or a code block.\n */\nexport type TextTone = 'body' | 'strong' | 'muted'\n\nexport type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption'\n\n/**\n * Weight travels with the size, deliberately.\n *\n * The system sets long-form copy at 300 — it is what gives a page of prose its\n * air. At 12 and 14px that same weight is a hairline: the strokes thin out\n * below the point where a light face is a choice and turn into a legibility\n * bug. So the two small steps step back up to 400, and a caller never has to\n * know that the trade exists.\n */\nconst SIZE: Record<TextSize, string> = {\n  xs: 'text-xs leading-[1.6]',\n  sm: 'text-sm leading-[1.65]',\n  base: 'text-base font-light leading-[1.75]',\n  lead: 'text-[length:var(--fs-item)] font-light leading-[1.6]',\n}\n\nconst TONE: Record<TextTone, string> = {\n  body: 'text-(--ink-2)',\n  strong: 'text-(--ink)',\n  muted: 'text-(--ink-3-aa)',\n}\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode\n  /** Which rung of the type scale. See {@link TextSize}. */\n  size?: TextSize\n  /** Which rung of the ink ladder. See {@link TextTone}. */\n  tone?: TextTone\n  /**\n   * The element, and ONLY the element.\n   *\n   * Changing it changes what the markup means — a `span` inside a sentence, an\n   * `li` inside a list someone else opened — and changes nothing about the\n   * look. That separation is the whole point: the alternative is a `<p>` nested\n   * inside a `<p>`, which the HTML parser silently splits into two, or a\n   * paragraph faked out of a `<div>` because the real element brought a size\n   * with it.\n   */\n  as?: TextElement\n}\n\n/**\n * A paragraph, or a run of text that wants the system's voice.\n *\n * The step between `Article` and raw JSX. `Article` styles a whole reading\n * column from element selectors and is the right answer for a post; this is for\n * the single paragraph that is NOT in a column — a card's description, a\n * dialog's explanation, the line under an empty state.\n *\n * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs\n * are all full-strength ink has spent the top of the ladder on its body copy\n * and has nothing left for the headings, which is the single most common way a\n * monochrome page loses its hierarchy.\n *\n * @example\n * <Text>Twelve releases this quarter, none rolled back.</Text>\n * @example\n * <Text size=\"lead\" tone=\"strong\">A monochrome system for software and writing.</Text>\n * @example\n * <Text as=\"span\" size=\"sm\" tone=\"muted\">Updated just now</Text>\n */\nexport function Text({\n  children,\n  size = 'base',\n  tone = 'body',\n  as = 'p',\n  className,\n  ...rest\n}: TextProps) {\n  const Comp = as as ElementType\n\n  return (\n    <Comp className={cn('m-0', SIZE[size], TONE[tone], className)} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Text\n"],"mappings":"AAgGI;AA/FJ,SAAS,UAAU;AAgCnB,MAAM,OAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,OAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAyCO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,OAAO;AAEb,SACE,oBAAC,QAAK,WAAW,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,GAAI,GAAG,MAChE,UACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes, Ref } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
+    invalid?: boolean;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+/**
+ * Multi-line text entry.
+ *
+ * Resizes vertically only: horizontal resize lets a reader drag the control
+ * past the measure and past the page's own gutter.
+ *
+ * @example
+ * <Field label="Notes" htmlFor="notes"><Textarea id="notes" rows={4} /></Field>
+ */
+declare function Textarea({ invalid, className, ref, 'aria-invalid': ariaInvalid, ...rest }: TextareaProps): react.JSX.Element;
+
+export { Textarea, type TextareaProps, Textarea as default };

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+function Textarea({
+  invalid,
+  className,
+  ref,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const bad = isInvalid(invalid, ariaInvalid);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      "aria-invalid": ariaInvalid ?? (invalid ? true : void 0),
+      className: cn(
+        CONTROL_BASE,
+        "min-h-24 resize-y",
+        bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+        className
+      ),
+      ...rest
+    }
+  );
+}
+var Textarea_default = Textarea;
+export {
+  Textarea,
+  Textarea_default as default
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import type { Ref, TextareaHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLTextAreaElement>\n}\n\n/**\n * Multi-line text entry.\n *\n * Resizes vertically only: horizontal resize lets a reader drag the control\n * past the measure and past the page's own gutter.\n *\n * @example\n * <Field label=\"Notes\" htmlFor=\"notes\"><Textarea id=\"notes\" rows={4} /></Field>\n */\nexport function Textarea({\n  invalid,\n  className,\n  ref,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: TextareaProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  return (\n    <textarea\n      ref={ref}\n      aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n      className={cn(\n        CONTROL_BASE,\n        'min-h-24 resize-y',\n        bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport default Textarea\n"],"mappings":"AA4BI;AA3BJ,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AAiBjD,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAkB;AAChB,QAAM,MAAM,UAAU,SAAS,WAAW;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,gBAAc,gBAAgB,UAAU,OAAO;AAAA,MAC/C,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,MAAM,eAAe,UAAU,eAAe;AAAA,QAC9C;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Timestamp/Timestamp.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { TimeHTMLAttributes } from 'react';
+
+/**
+ * How the instant reads.
+ *
+ * `auto` is relative while the gap is small enough to be useful and absolute
+ * once it is not — "3 hours ago" answers the question a reader is actually
+ * asking about a recent record, and "2 years ago" does not.
+ */
+type TimestampFormat = 'auto' | 'relative' | 'absolute';
+interface TimestampProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'children'> {
+    /** The instant. A `Date`, an ISO string, or epoch milliseconds. */
+    value: Date | string | number;
+    /** How the instant reads. See {@link TimestampFormat}. */
+    format?: TimestampFormat;
+    /**
+     * How far from now `auto` still prints a relative time, in milliseconds.
+     * Seven days by default — past a week the calendar date is the more useful
+     * fact, and it is also the one that stops changing.
+     */
+    relativeWithin?: number;
+    /** Adds the clock time to the absolute form. */
+    showTime?: boolean;
+}
+/**
+ * A date or a time, rendered the one way the system renders them.
+ *
+ * Every list of records needs this, and `new Date().toLocaleString()` at the
+ * call site is precisely how a product ends up with four date formats on one
+ * screen.
+ *
+ * **On hydration.** Both halves of a formatted date are environment-dependent:
+ * a relative time depends on when it is read, and even an absolute one depends
+ * on the reader's locale and time zone, none of which a static build knows. So
+ * the first paint — the one the server produces and the one the client must
+ * reproduce exactly — is the ISO calendar date in UTC, sliced straight out of
+ * the ISO string with no `Intl` anywhere near it. Both sides compute it from
+ * the same characters, so they cannot disagree. The locale-aware and relative
+ * forms are applied after mount, in an effect, where there is a reader to be
+ * local to. This package statically exports every page, so the alternative is a
+ * hydration mismatch on any page with a date on it.
+ *
+ * The `datetime` attribute is the full ISO instant from the first render
+ * onwards and never changes, so a screen reader, a crawler, or anything else
+ * parsing the markup gets the exact moment whether or not the effect has run.
+ *
+ * It formats once per mount. A hundred rows each holding a ticking interval to
+ * keep "3 minutes ago" honest is a cost nobody asked for; a list that must tick
+ * should re-key or re-render from above.
+ *
+ * @example
+ * <Timestamp value={deploy.finishedAt} />
+ * @example
+ * <Timestamp value="2026-01-14T09:30:00Z" format="absolute" showTime />
+ */
+declare function Timestamp({ value, format, relativeWithin, showTime, className, ...rest }: TimestampProps): react.JSX.Element;
+
+export { Timestamp, type TimestampFormat, type TimestampProps, Timestamp as default };