panelui-web 0.3.0 → 0.5.0

package/dist/components/menu/index.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Menu — a list of actions that opens from a button.
+ *
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger render={<Button variant="outline" />}>Options</Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item onClick={rename}>
+ *       <PencilIcon /> Rename <Menu.Shortcut>⌘R</Menu.Shortcut>
+ *     </Menu.Item>
+ *     <Menu.Sub>
+ *       <Menu.SubTrigger><ShareIcon /> Share</Menu.SubTrigger>
+ *       <Menu.SubContent>
+ *         <Menu.Item>Copy link</Menu.Item>
+ *       </Menu.SubContent>
+ *     </Menu.Sub>
+ *     <Menu.Separator />
+ *     <Menu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>Pinned</Menu.CheckboxItem>
+ *     <Menu.Item variant="destructive">Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ *
+ * ## One row shape
+ *
+ * Every row is the same: an icon, the label, and whatever belongs at the end
+ * of it, a shortcut, a badge, a check or the chevron of a submenu. Icons are
+ * written as the row's first child and sized by the row, so rows with and
+ * without them still line up when every row in a group has one.
+ *
+ * ## Submenus
+ *
+ * A submenu opens to the side when its row is hovered or pressed, or with
+ * the right arrow key, and closes with the left one. The pointer can cross
+ * diagonally to it without closing it on the way.
+ *
+ * ## Items that stay open
+ *
+ * Pressing an item closes the menu. A check item or a radio item keeps it
+ * open, so several can be switched in a row; pass `closeOnClick` to change
+ * either.
+ */
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { tv } from 'tailwind-variants';
+const menuVariants = tv({
+    slots: {
+        positioner: 'z-50 outline-none',
+        popup: [
+            'min-w-48 origin-(--transform-origin) rounded-xl border bg-popover p-1 text-popover-foreground shadow-lg outline-none',
+            'max-h-(--available-height) overflow-y-auto [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]',
+            'transition-[opacity,scale] duration-150 ease-out',
+            'data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',
+            'motion-reduce:transition-none',
+        ],
+        item: [
+            // The label never wraps; a description beside it is cut short instead.
+            'flex min-h-8 cursor-default items-center gap-2.5 whitespace-nowrap rounded-lg px-2 py-1.5 text-sm outline-none select-none',
+            'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+            // A submenu's row stays lit while its submenu is open, so it is clear what it belongs to.
+            'data-popup-open:bg-accent',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+            '[&>svg:first-child]:text-muted-foreground data-highlighted:[&>svg:first-child]:text-current',
+        ],
+        end: 'ms-auto flex items-center ps-3',
+        check: 'ms-auto flex size-4 items-center justify-center ps-0 text-foreground',
+        description: 'min-w-0 truncate text-muted-foreground',
+        shortcut: 'ms-auto ps-3 text-xs tracking-wide text-muted-foreground',
+        badge: 'ms-auto inline-flex h-5 items-center gap-1 rounded-md bg-muted px-1.5 text-xs font-medium tabular-nums text-muted-foreground [&_svg:not([class*=size-])]:size-3',
+        chevron: 'ms-auto text-muted-foreground',
+        group: 'flex flex-col',
+        groupLabel: 'px-2 pb-1 pt-2 text-xs font-medium text-muted-foreground',
+        separator: 'mx-2 my-1 h-px bg-border',
+    },
+    variants: {
+        variant: {
+            default: {},
+            destructive: {
+                item: 'text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive [&>svg:first-child]:text-destructive',
+            },
+        },
+    },
+});
+/** Holds whether the menu is open. Takes `open`/`onOpenChange`, `defaultOpen` and `modal`. */
+function MenuRoot(props) {
+    return _jsx(BaseMenu.Root, { ...props });
+}
+MenuRoot.displayName = 'Menu';
+/** The button that opens the menu. `render` draws it as another element, such as a `Button`. */
+function MenuTrigger(props) {
+    return _jsx(BaseMenu.Trigger, { "data-slot": "menu-trigger", ...props });
+}
+MenuTrigger.displayName = 'Menu.Trigger';
+/** The list, opened in a layer over the page. It moves to the other side when there is no room. */
+function MenuContent({ side = 'bottom', align = 'start', sideOffset = 6, alignOffset, container, anchor, className, ...props }) {
+    const slots = menuVariants();
+    return (_jsx(BaseMenu.Portal, { container: container, children: _jsx(BaseMenu.Positioner, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, anchor: anchor, className: slots.positioner(), children: _jsx(BaseMenu.Popup, { "data-slot": "menu-content", className: slots.popup({ className }), ...props }) }) }));
+}
+MenuContent.displayName = 'Menu.Content';
+/** One action. Put an icon first, then the label, then a `Menu.Shortcut` or `Menu.Badge` if it has one. */
+function MenuItem({ variant, className, ...props }) {
+    return _jsx(BaseMenu.Item, { "data-slot": "menu-item", className: menuVariants({ variant }).item({ className }), ...props });
+}
+MenuItem.displayName = 'Menu.Item';
+const Check = () => (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+/** An item that is switched on and off, with a check at its end while on. The menu stays open. */
+function MenuCheckboxItem({ className, children, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.CheckboxItem, { "data-slot": "menu-checkbox-item", className: slots.item({ className }), ...props, children: [children, _jsx("span", { className: slots.check(), children: _jsx(BaseMenu.CheckboxItemIndicator, { className: "flex", children: _jsx(Check, {}) }) })] }));
+}
+MenuCheckboxItem.displayName = 'Menu.CheckboxItem';
+/** Radio items of which one is chosen. Takes `value` and `onValueChange`. */
+function MenuRadioGroup({ className, ...props }) {
+    return _jsx(BaseMenu.RadioGroup, { "data-slot": "menu-radio-group", className: menuVariants().group({ className }), ...props });
+}
+MenuRadioGroup.displayName = 'Menu.RadioGroup';
+/** One choice in a radio group, with a check at its end while chosen. */
+function MenuRadioItem({ className, children, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.RadioItem, { "data-slot": "menu-radio-item", className: slots.item({ className }), ...props, children: [children, _jsx("span", { className: slots.check(), children: _jsx(BaseMenu.RadioItemIndicator, { className: "flex", children: _jsx(Check, {}) }) })] }));
+}
+MenuRadioItem.displayName = 'Menu.RadioItem';
+/** A submenu: a `Menu.SubTrigger` row and the `Menu.SubContent` it opens. */
+function MenuSub(props) {
+    return _jsx(BaseMenu.SubmenuRoot, { ...props });
+}
+MenuSub.displayName = 'Menu.Sub';
+/** The row that opens a submenu, with a chevron at its end. It opens on hover as well as on press. */
+function MenuSubTrigger({ className, children, end, openOnHover = true, delay = 80, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.SubmenuTrigger, { "data-slot": "menu-sub-trigger", openOnHover: openOnHover, delay: delay, className: slots.item({ className }), ...props, children: [children, _jsxs("span", { className: slots.end(), children: [end, _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.chevron({ className: end ? 'ms-2' : undefined }), children: _jsx("path", { d: "m9 18 6-6-6-6" }) })] })] }));
+}
+MenuSubTrigger.displayName = 'Menu.SubTrigger';
+/** The submenu's list, opened beside its row with the first item level with it. */
+function MenuSubContent({ side = 'inline-end', align = 'start', sideOffset = 6, alignOffset = -5, ...props }) {
+    return _jsx(MenuContent, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, ...props });
+}
+MenuSubContent.displayName = 'Menu.SubContent';
+/** Items that belong together, under a `Menu.GroupLabel`. */
+function MenuGroup({ className, ...props }) {
+    return _jsx(BaseMenu.Group, { "data-slot": "menu-group", className: menuVariants().group({ className }), ...props });
+}
+MenuGroup.displayName = 'Menu.Group';
+/** The heading of a group. Screen readers announce the group by it. */
+function MenuGroupLabel({ className, ...props }) {
+    return _jsx(BaseMenu.GroupLabel, { "data-slot": "menu-group-label", className: menuVariants().groupLabel({ className }), ...props });
+}
+MenuGroupLabel.displayName = 'Menu.GroupLabel';
+/** A rule between groups of items. */
+function MenuSeparator({ className, ...props }) {
+    return _jsx("div", { role: "separator", "data-slot": "menu-separator", className: menuVariants().separator({ className }), ...props });
+}
+MenuSeparator.displayName = 'Menu.Separator';
+/** What an item does, in quieter words after its label. */
+function MenuDescription({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menu-description", className: menuVariants().description({ className }), ...props });
+}
+MenuDescription.displayName = 'Menu.Description';
+/** The keys for an item, at its end. It only shows them: wire the keys up where the action lives. */
+function MenuShortcut({ className, ...props }) {
+    return _jsx("kbd", { "data-slot": "menu-shortcut", className: menuVariants().shortcut({ className }), ...props });
+}
+MenuShortcut.displayName = 'Menu.Shortcut';
+/** A small count or flag at an item's end: how many need attention, or that something is new. */
+function MenuBadge({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menu-badge", className: menuVariants().badge({ className }), ...props });
+}
+MenuBadge.displayName = 'Menu.Badge';
+export const Menu = Object.assign(MenuRoot, {
+    Trigger: MenuTrigger,
+    Content: MenuContent,
+    Item: MenuItem,
+    CheckboxItem: MenuCheckboxItem,
+    RadioGroup: MenuRadioGroup,
+    RadioItem: MenuRadioItem,
+    Sub: MenuSub,
+    SubTrigger: MenuSubTrigger,
+    SubContent: MenuSubContent,
+    Group: MenuGroup,
+    GroupLabel: MenuGroupLabel,
+    Separator: MenuSeparator,
+    Description: MenuDescription,
+    Shortcut: MenuShortcut,
+    Badge: MenuBadge,
+});
+export { MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, };

package/dist/components/not-found/glyphs.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The shapes NotFound draws, as grids of cells.
+ *
+ * A digit is drawn at 5 by 7 and scaled up three times, so every stroke is
+ * three cells wide. Kept whole that is a solid pixel digit; reduced to the
+ * cells on its edge it is a digit drawn in outline, two rows of dots with a
+ * gap between, which is the look a stroked numeral has at this size.
+ *
+ * Digits are drawn without diagonal strokes. Two blocks that meet only at a
+ * corner come apart when reduced to their edges, so a slanted stroke would
+ * outline as a stair of separate rings.
+ *
+ * The icons Scramble turns a digit into are drawn straight onto the same 15 by
+ * 21 grid, from circles and lines, so they arrive at exactly the size of the
+ * digit they replace and need no scaling of their own.
+ */
+/** Cells across one glyph. */
+export declare const GLYPH_COLUMNS = 15;
+/** Cells down one glyph. */
+export declare const GLYPH_ROWS = 21;
+/** A glyph: which cells are on, row by row. */
+export type Glyph = boolean[][];
+/** A digit, solid or as its outline. */
+export declare function digitGlyph(character: string, fill: 'outline' | 'solid'): Glyph | null;
+/** The icons Scramble cycles through, in order. */
+export declare const ICONS: readonly Glyph[];

package/dist/components/not-found/glyphs.js

@@ -0,0 +1,141 @@
+/**
+ * The shapes NotFound draws, as grids of cells.
+ *
+ * A digit is drawn at 5 by 7 and scaled up three times, so every stroke is
+ * three cells wide. Kept whole that is a solid pixel digit; reduced to the
+ * cells on its edge it is a digit drawn in outline, two rows of dots with a
+ * gap between, which is the look a stroked numeral has at this size.
+ *
+ * Digits are drawn without diagonal strokes. Two blocks that meet only at a
+ * corner come apart when reduced to their edges, so a slanted stroke would
+ * outline as a stair of separate rings.
+ *
+ * The icons Scramble turns a digit into are drawn straight onto the same 15 by
+ * 21 grid, from circles and lines, so they arrive at exactly the size of the
+ * digit they replace and need no scaling of their own.
+ */
+/** Cells across one glyph. */
+export const GLYPH_COLUMNS = 15;
+/** Cells down one glyph. */
+export const GLYPH_ROWS = 21;
+const SCALE = 3;
+const DIGITS = {
+    '0': ['.###.', '#...#', '#...#', '#...#', '#...#', '#...#', '.###.'],
+    '1': ['.##..', '..#..', '..#..', '..#..', '..#..', '..#..', '.###.'],
+    '2': ['.###.', '#...#', '....#', '.###.', '#....', '#....', '#####'],
+    '3': ['####.', '....#', '....#', '.###.', '....#', '....#', '####.'],
+    '4': ['#..#.', '#..#.', '#..#.', '#####', '...#.', '...#.', '...#.'],
+    '5': ['#####', '#....', '####.', '....#', '....#', '....#', '####.'],
+    '6': ['.###.', '#....', '#....', '####.', '#...#', '#...#', '.###.'],
+    '7': ['#####', '....#', '....#', '...##', '...#.', '...#.', '...#.'],
+    '8': ['.###.', '#...#', '#...#', '.###.', '#...#', '#...#', '.###.'],
+    '9': ['.###.', '#...#', '#...#', '.####', '....#', '....#', '.###.'],
+};
+function empty() {
+    return Array.from({ length: GLYPH_ROWS }, () => Array(GLYPH_COLUMNS).fill(false));
+}
+/** A digit as a solid grid of cells, or `null` for a character there is no drawing of. */
+function solidDigit(character) {
+    const rows = DIGITS[character];
+    if (!rows)
+        return null;
+    const glyph = empty();
+    for (let y = 0; y < GLYPH_ROWS; y += 1) {
+        for (let x = 0; x < GLYPH_COLUMNS; x += 1) {
+            glyph[y][x] = rows[Math.floor(y / SCALE)][Math.floor(x / SCALE)] === '#';
+        }
+    }
+    return glyph;
+}
+/**
+ * Only the cells of a glyph that touch a cell outside it, corners included.
+ * Counting corners keeps a diagonal stroke as a continuous band; counting
+ * only sides leaves it as a scatter of single dots.
+ */
+function outlineOf(glyph) {
+    const on = (x, y) => glyph[y]?.[x] === true;
+    return glyph.map((row, y) => row.map((cell, x) => {
+        if (!cell)
+            return false;
+        for (let dy = -1; dy <= 1; dy += 1) {
+            for (let dx = -1; dx <= 1; dx += 1)
+                if (!on(x + dx, y + dy))
+                    return true;
+        }
+        return false;
+    }));
+}
+/** A digit, solid or as its outline. */
+export function digitGlyph(character, fill) {
+    const solid = STROKED[character] ?? solidDigit(character);
+    if (!solid)
+        return null;
+    return fill === 'solid' ? solid : outlineOf(solid);
+}
+/* -------------------------------------------------------------------------- */
+/* Icons                                                                       */
+/* -------------------------------------------------------------------------- */
+/** Distance from a point to the segment from a to b. */
+function toSegment(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1)));
+    return Math.hypot(px - (ax + dx * t), py - (ay + dy * t));
+}
+/** A glyph from a test of each cell's centre. */
+function drawn(test) {
+    const glyph = empty();
+    for (let y = 0; y < GLYPH_ROWS; y += 1) {
+        for (let x = 0; x < GLYPH_COLUMNS; x += 1)
+            glyph[y][x] = test(x + 0.5, y + 0.5);
+    }
+    return glyph;
+}
+/** A ring: cells whose centre is within half a stroke of the circle. */
+const ring = (x, y, cx, cy, r, stroke) => Math.abs(Math.hypot(x - cx, y - cy) - r) <= stroke / 2;
+/** A question mark: a hook, a short stem, a dot. */
+const question = drawn((x, y) => {
+    const angle = Math.atan2(y - 6.5, x - 7.5);
+    // The hook runs from the left of the circle, over the top, round to the
+    // lower right, and stops there so the stem can drop from it.
+    const onHook = ring(x, y, 7.5, 6.5, 4.6, 2) && (y < 6.5 || angle < Math.PI * 0.35);
+    const stem = toSegment(x, y, 9.4, 10.6, 7.5, 13.2) <= 1 || toSegment(x, y, 7.5, 13.2, 7.5, 14.5) <= 1;
+    const dot = Math.hypot(x - 7.5, y - 18) <= 1.3;
+    return onHook || stem || dot;
+});
+/** A magnifying glass, the lens high and the handle running to the lower right. */
+const magnifier = drawn((x, y) => ring(x, y, 6.5, 7.5, 4.8, 2) || toSegment(x, y, 10.2, 11.6, 13.4, 17.6) <= 1.2);
+/** A map pin: a ring with a dot in it, narrowing to a point. */
+const pin = drawn((x, y) => {
+    const head = ring(x, y, 7.5, 7.5, 5, 2) && y < 10.5;
+    // The two sides run from the widest part of the ring down to the point.
+    const sides = toSegment(x, y, 3, 9.6, 7.5, 18.6) <= 1 || toSegment(x, y, 12, 9.6, 7.5, 18.6) <= 1;
+    const dot = Math.hypot(x - 7.5, y - 7.5) <= 1.5;
+    return head || sides || dot;
+});
+/*
+ * Digits drawn from strokes rather than scaled up, for the ones whose shape
+ * needs a diagonal. Each stroke is three cells wide, the same as a scaled-up
+ * pixel, so they sit with the others.
+ */
+const stroke = (x, y, ax, ay, bx, by) => toSegment(x, y, ax, ay, bx, by) <= 1.5;
+/** Distance from a point to an ellipse's outline, near enough for drawing at this size. */
+const toEllipse = (x, y, cx, cy, rx, ry) => {
+    const nx = (x - cx) / rx;
+    const ny = (y - cy) / ry;
+    const r = Math.hypot(nx, ny);
+    // Scale the radial error back to cells by the radius in that direction.
+    const along = r === 0 ? Math.min(rx, ry) : Math.hypot(nx * rx, ny * ry) / r;
+    return Math.abs(r - 1) * along;
+};
+const STROKED = {
+    // An oval nought, not a box with its corners cut.
+    '0': drawn((x, y) => toEllipse(x, y, 7.5, 10.5, 6, 9) <= 1.5),
+    // A closed four: the diagonal runs from the top of the stem down to the
+    // crossbar, and the crossbar reaches a little past the stem.
+    '4': drawn((x, y) => stroke(x, y, 10.5, 1.5, 10.5, 19.5) ||
+        stroke(x, y, 10.5, 1.5, 1.5, 14.5) ||
+        stroke(x, y, 1.5, 14.5, 13.5, 14.5)),
+};
+/** The icons Scramble cycles through, in order. */
+export const ICONS = [question, magnifier, pin];

package/dist/components/not-found/index.d.ts

@@ -0,0 +1,118 @@
+/**
+ * NotFound — an error code drawn in pixels that come apart when the pointer
+ * reaches them, with a title, a line of help and a way out underneath.
+ *
+ * ```tsx
+ * <NotFound>
+ *   <NotFound.Code code="404" effect="scatter" />
+ *   <NotFound.Title>Nothing lives here</NotFound.Title>
+ *   <NotFound.Description>The address may be mistyped, or the page has moved.</NotFound.Description>
+ *   <NotFound.Actions>…</NotFound.Actions>
+ * </NotFound>
+ * ```
+ *
+ * ## A grid of cells, not a font
+ *
+ * Each digit is a small bitmap laid on a grid of cells, and every cell is
+ * drawn as a dot or a rounded square of its own size and strength. The sizes
+ * and strengths are fixed per cell from a seed, so the code has the uneven,
+ * hand-placed texture of pixel art and still looks the same on every render.
+ * Nothing depends on a typeface loading.
+ *
+ * ## One digit reacts at a time
+ *
+ * The digit nearest the pointer is the one that reacts, and it is put back
+ * when the pointer moves away. `effect` chooses how: its cells fly apart
+ * (`scatter`), drop out one by one (`dissolve`), or travel into a small icon
+ * and back (`scramble`). On a touch screen a tap does the same, and the digit
+ * is put back a moment after the finger lifts.
+ *
+ * ## Two colours, mixed by light
+ *
+ * Every cell is either the text colour, faint, or the accent. Which one it is
+ * depends on how much light falls on it: the highlighted digit is always
+ * partly lit, a band of light goes slowly round the whole code, and the
+ * pointer lights the cells near it and leaves them fading as it moves on. Each
+ * cell turns accent at its own level of light, so a shape in half light is
+ * dithered between the two colours, the way pixel art is shaded.
+ *
+ * ## What it costs
+ *
+ * The cells are drawn on a canvas, a few hundred of them in about sixteen
+ * fills. The band asks for 30 frames a second while the code is on screen and
+ * none once it is scrolled away; with `ambient={false}` a frame is only drawn
+ * while something is moving. The canvas reads its colours from the theme each
+ * time it draws, so a change of theme needs nothing from the page.
+ */
+import { type ComponentProps } from 'react';
+/** How the digit near the pointer reacts. */
+export type NotFoundEffect = 'scatter' | 'dissolve' | 'scramble';
+/** Which of the theme's roles the highlighted digit is drawn in. */
+export type NotFoundColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+export interface NotFoundProps extends ComponentProps<'div'> {
+    /** Draws a faint grid behind everything, fading out towards the edges. On by default. */
+    backdrop?: boolean;
+}
+/** The column the code, the title, the description and the actions stand in, centred. */
+declare function NotFoundRoot({ backdrop, className, children, ...props }: NotFoundProps): import("react").JSX.Element;
+declare namespace NotFoundRoot {
+    var displayName: string;
+}
+export interface NotFoundCodeProps extends Omit<ComponentProps<'div'>, 'children' | 'color'> {
+    /** The code to draw. Digits only; any other character leaves a blank the width of a digit. */
+    code?: string;
+    /** How the digit nearest the pointer reacts. */
+    effect?: NotFoundEffect;
+    /** Digits drawn with solid strokes three cells wide, or as their outline. */
+    fill?: 'outline' | 'solid';
+    /**
+     * A band of light that goes slowly round the code on its own. While it is
+     * on, the canvas draws about 30 frames a second when the code is on screen;
+     * turn it off and nothing is drawn until the pointer comes near.
+     */
+    ambient?: boolean;
+    /** The theme role of the accent: the highlighted digit, the band of light and the pointer's light. */
+    color?: NotFoundColor;
+    /**
+     * Which digit is lit in `color` even with nothing else lighting it, counting
+     * from 0. Defaults to the middle one. `null` lights none of them.
+     */
+    highlight?: number | null;
+    /** What a screen reader says for the code. Defaults to "Error" and the code. */
+    label?: string;
+}
+/** The code, drawn in cells on a canvas. Its box keeps the code's shape before anything is drawn. */
+declare function NotFoundCode({ code, effect, fill, color, ambient, highlight, label, className, style, ...props }: NotFoundCodeProps): import("react").JSX.Element;
+declare namespace NotFoundCode {
+    var displayName: string;
+}
+export interface NotFoundTitleProps extends ComponentProps<'h1'> {
+    /** The heading level. A page that is only this one message wants `h1`. */
+    as?: 'h1' | 'h2' | 'h3';
+}
+/** What happened, in a few words. */
+declare function NotFoundTitle({ as: Tag, className, ...props }: NotFoundTitleProps): import("react").JSX.Element;
+declare namespace NotFoundTitle {
+    var displayName: string;
+}
+export interface NotFoundDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line on what to do next. */
+declare function NotFoundDescription({ className, ...props }: NotFoundDescriptionProps): import("react").JSX.Element;
+declare namespace NotFoundDescription {
+    var displayName: string;
+}
+export interface NotFoundActionsProps extends ComponentProps<'div'> {
+}
+/** The ways out: links or buttons in a row that wraps on a narrow screen. */
+declare function NotFoundActions({ className, ...props }: NotFoundActionsProps): import("react").JSX.Element;
+declare namespace NotFoundActions {
+    var displayName: string;
+}
+export declare const NotFound: typeof NotFoundRoot & {
+    Code: typeof NotFoundCode;
+    Title: typeof NotFoundTitle;
+    Description: typeof NotFoundDescription;
+    Actions: typeof NotFoundActions;
+};
+export { NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundActions };