@fairgarden/design 0.1.0-alpha.0

package/components/NumberField/NumberField.js

@@ -0,0 +1,105 @@
+'use client';
+import * as React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { cva } from 'class-variance-authority';
+import { dangerScale, FieldLabel, useFieldInvalid } from '../Field';
+import { Ground } from '../Ground';
+import { Icon, iconHost } from '../Icon';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './number-field.module.css';
+/*
+ * Number Field (§10.4): quantities, amounts and measurements where
+ * stepping helps. Codes that only look like numbers are Input.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: number-field.module.css; CVA function `numberField`.
+ * - Axes: `kind` → stepper (−/+ cells butted to the input [D174]), amount
+ *   (no steppers, type-itemhead value), readout (circular −/+ around a
+ *   large mono value) [D155]; `plate` → plate; `primary`, `secondary`.
+ * - Compound variants: none. Excluded in the types: `plate` with readout.
+ * - Defaults: kind stepper, plate false; color axes none.
+ * - Color fallback: inherits the scope; while the Field is invalid, its
+ *   danger scale (§10.2) [D129].
+ * - States: `:hover` (not disabled) → edge --role-rule → --primary12 [D140],
+ *   step and readout glyphs at the next tier's weight (§10.1 icon states),
+ *   the readout edge unchanged [D181];
+ *   `data-focused` → the ring on any focus [D90]; `data-invalid` → error
+ *   edge; `data-disabled` → dotted edges, --role-muted; `data-readonly` →
+ *   box removed, bottom rule kept; `data-scrubbing` → none; step cell
+ *   `data-disabled` (at min or max) → dotted cell edge, --role-muted glyph;
+ *   step cell `:active` → the inverse pair [D84].
+ * - Parts: base, group, decrement, input, increment, affix, scrub.
+ * - Scope: `plate` → the group is a nested `white` Ground (a light island on
+ *   fixed grounds); otherwise none.
+ * - Container: none; inherits its context.
+ */
+export const numberField = cva(styles.base, {
+    variants: {
+        kind: {
+            stepper: styles.stepper,
+            amount: styles.amount,
+            readout: styles.readout,
+        },
+        plate: {
+            true: styles.plate,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'stepper',
+        plate: false,
+    },
+});
+/**
+ * A Base UI NumberField inside a `Field`. At the minimum or maximum the
+ * matching cell is disabled; out-of-range errors read "Enter 1–12" with an
+ * en dash [D32]. Use steppers for up to about 20 steps and tabular figures
+ * throughout.
+ */
+export function NumberField(props) {
+    const { kind, plate, prefix, suffix, label, scrub, placeholder, decrementLabel, incrementLabel, primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const invalid = useFieldInvalid();
+    const resolvedSecondary = invalid ? dangerScale : secondary;
+    const resolvedKind = kind ?? 'stepper';
+    const readout = resolvedKind === 'readout';
+    const steppers = resolvedKind !== 'amount';
+    const valueClass = resolvedKind === 'amount'
+        ? styles.valueAmount
+        : readout
+            ? styles.valueReadout
+            : styles.valueText;
+    const unitClass = readout ? styles.unitCaption : styles.unitText;
+    const labelNode = label == null ? null : scrub ? (React.createElement(BaseNumberField.ScrubArea, { className: styles.scrub },
+        React.createElement(FieldLabel, { nativeLabel: false }, label))) : (React.createElement(FieldLabel, null, label));
+    const cellEdge = (React.createElement("svg", { className: styles.cellEdge, "aria-hidden": "true", focusable: "false" }, readout ? (React.createElement("rect", { className: styles.cellEdgeLine, width: "100%", height: "100%", rx: "50%" })) : (React.createElement("line", { className: styles.cellEdgeLine, x1: "50%", y1: "0", x2: "50%", y2: "100%" }))));
+    const groupChildren = (React.createElement(React.Fragment, null,
+        steppers ? (React.createElement(BaseNumberField.Decrement, { className: `${styles.decrement} ${iconHost}`, ...(decrementLabel ? { 'aria-label': decrementLabel } : null) },
+            React.createElement(Icon, { name: "remove", weight: "interactive" }),
+            cellEdge)) : null,
+        prefix != null && !readout ? (React.createElement("span", { className: [styles.affix, unitClass].join(' ') },
+            prefix,
+            '\u00a0')) : null,
+        React.createElement(BaseNumberField.Input, { className: [styles.input, valueClass].join(' '), placeholder: placeholder }),
+        suffix != null ? (React.createElement("span", { className: [styles.affix, unitClass].join(' ') },
+            readout ? null : '\u00a0',
+            suffix)) : null,
+        steppers ? (React.createElement(BaseNumberField.Increment, { className: `${styles.increment} ${iconHost}`, ...(incrementLabel ? { 'aria-label': incrementLabel } : null) },
+            React.createElement(Icon, { name: "add", weight: "interactive" }),
+            cellEdge)) : null,
+        readout ? null : (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+            React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })))));
+    return (React.createElement(BaseNumberField.Root, { ...rest, ...scope, className: numberField({
+            kind,
+            plate,
+            primary: plate ? undefined : primary,
+            secondary: plate ? undefined : resolvedSecondary,
+            className,
+        }) },
+        labelNode,
+        plate && !readout ? (React.createElement(BaseNumberField.Group, { className: styles.group, render: React.createElement(Ground, { preset: "white", kind: "face", primary: primary ?? undefined, secondary: resolvedSecondary ?? undefined, render: React.createElement("div", null) }) }, groupChildren)) : (React.createElement(BaseNumberField.Group, { className: styles.group }, groupChildren))));
+}
+//# sourceMappingURL=NumberField.js.map

package/components/NumberField/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":"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"}

package/components/NumberField/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NumberField';
+//# sourceMappingURL=index.d.ts.map

package/components/NumberField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/NumberField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/components/NumberField/index.js

@@ -0,0 +1,2 @@
+export * from './NumberField';
+//# sourceMappingURL=index.js.map

package/components/NumberField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/NumberField/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/components/NumberField/number-field.module.css

@@ -0,0 +1,429 @@
+/*
+ * Number Field (§10.4). CVA function `numberField`. Parts: `base` (the
+ * root), `group` (the field box), `decrement`, `input`, `increment`,
+ * `affix` (prefix or suffix unit), `scrub` (the scrub area on the label);
+ * `valueText` / `valueAmount` / `valueReadout` and `unitText` / `unitCaption`
+ * carry the type role per kind (a composed type role cannot be switched from
+ * a descendant selector); `edge` / `edgeLine` and `cellEdge` / `cellEdgeLine`
+ * draw the dotted disabled edges as true dots [D36, D68]. Colors are role
+ * variables only; local custom properties carry dimensions only.
+ *
+ * The stepper is confirmed [D174]: square −/+ cells butted to the input,
+ * divided by --border-size-1 rules, one --radius-1 outer radius [D41].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.valueText {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.valueAmount {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.valueReadout {
+  composes: typeReadout from '../../utils/type.module.css';
+}
+
+.unitText {
+  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
+}
+
+.unitCaption {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.edgeLine,
+.cellEdgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The scrub area wraps the label; scrubbing is for fine pointers (§10.4). */
+  .scrub {
+    display: inline-flex;
+    align-self: start;
+  }
+
+  /*
+   * The group is the §10.1 field box: --size-px-8 tall, --radius-1 outside
+   * and 0 at the seams, --border-size-1 --role-rule; at least --size-px-12
+   * wide at every width.
+   */
+  .group {
+    /* Local dimensions. */
+    --number-field-edge: var(--border-size-1);
+    --number-field-radius: var(--radius-1);
+
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: var(--size-px-12);
+    block-size: var(--size-px-8);
+    border: var(--number-field-edge) solid var(--role-rule);
+    border-radius: var(--number-field-radius);
+    overflow: clip;
+    background: none;
+    color: var(--primary12);
+  }
+
+  /* The value: type-body-ui with data numerals, centered, so it never jitters while stepping. */
+  .input {
+    flex: 1 1 auto;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding-block: 0;
+    padding-inline: var(--ds-space-12);
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-variant-numeric: var(--ds-numerals-data);
+    text-align: center;
+    appearance: none;
+  }
+
+  .input::placeholder {
+    color: var(--role-muted);
+  }
+
+  /* Units in --role-muted, joined to the value by a no-break space [D32]. */
+  .affix {
+    flex: none;
+    align-self: center;
+    white-space: nowrap;
+  }
+
+  /* With a unit, the value ends at the unit, so "12 kg" reads as one run. */
+  .group:has(.affix) .input {
+    padding-inline: 0;
+    text-align: end;
+  }
+
+  .input + .affix {
+    padding-inline-end: var(--ds-space-12);
+  }
+
+  .affix:has(+ .input) {
+    padding-inline-start: var(--ds-space-12);
+  }
+
+  /* Step cells: --size-px-8 squares joined to the input; glyphs remove / add, inline tier [D166]. */
+  .decrement,
+  .increment {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: var(--size-px-8);
+    margin: 0;
+    padding: 0;
+    border: 0 solid var(--role-rule);
+    border-radius: 0;
+    background: none;
+    color: var(--primary12);
+    appearance: none;
+  }
+
+  /* Disabled edge hosts, shown only while disabled. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--number-field-radius) - var(--ds-dot-fine) / 2);
+  }
+
+  /* A step cell's dotted divider (or, on the readout, its dotted circle). */
+  .cellEdge {
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--ds-dot-fine);
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  /* The divider sits where the cell's solid rule was: its last pixel column. */
+  .decrement .cellEdge {
+    inset-inline-end: 0;
+  }
+
+  .increment .cellEdge {
+    inset-inline-start: 0;
+  }
+
+  .cellEdgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine,
+    .cellEdgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .group,
+    .decrement,
+    .increment {
+      transition-property: border-color, background-color, color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  /* From --lg-n-above the group hugs its content and never stretches (§10.4). */
+  @media (min-width: 1024px) {
+    .group {
+      inline-size: fit-content;
+    }
+
+    .input {
+      inline-size: auto;
+      min-inline-size: 6ch;
+      field-sizing: content;
+    }
+  }
+}
+
+@layer variants {
+  /* Stepper (default): the cells are divided from the input by --border-size-1 rules. */
+  .stepper .decrement {
+    border-inline-end-width: var(--border-size-1);
+  }
+
+  .stepper .increment {
+    border-inline-start-width: var(--border-size-1);
+  }
+
+  /* Amount: no steppers; the value in type-itemhead with lining tabular figures, from the start. */
+  .amount .input {
+    text-align: start;
+  }
+
+  /*
+   * Readout: in-flow circular −/+ buttons around a large mono value with a
+   * unit caption, for dashboards. No field box.
+   */
+  .readout .group {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      'decrement value increment'
+      'decrement unit increment';
+    align-items: center;
+    column-gap: var(--size-px-3);
+    block-size: auto;
+    min-inline-size: 0;
+    border: 0;
+    border-radius: 0;
+    overflow: visible;
+  }
+
+  .readout .input {
+    grid-area: value;
+    inline-size: 100%;
+    padding: 0;
+    text-align: center;
+    field-sizing: fixed;
+  }
+
+  .readout .affix {
+    grid-area: unit;
+    justify-self: center;
+    padding: 0;
+  }
+
+  .readout .decrement,
+  .readout .increment {
+    --number-field-cell-edge: var(--border-size-2);
+
+    inline-size: var(--ds-size-control-md);
+    block-size: var(--ds-size-control-md);
+    border: var(--number-field-cell-edge) solid var(--primary12);
+    border-radius: var(--radius-round);
+  }
+
+  .readout .decrement {
+    grid-area: decrement;
+  }
+
+  .readout .increment {
+    grid-area: increment;
+  }
+
+  /* Every readout target reaches --ds-size-hit [D43]. */
+  .readout .decrement::after,
+  .readout .increment::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--ds-size-hit);
+    translate: -50% -50%;
+  }
+
+  .readout .cellEdge {
+    inset: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+  }
+
+  /* Stack guard: below --xs-n-below the readout buttons stack under the value [D73]. */
+  @media (max-width: 359.98px) {
+    .readout .group {
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas:
+        'value value'
+        'unit unit'
+        'decrement increment';
+      row-gap: var(--size-px-2);
+      justify-items: center;
+    }
+  }
+
+  /*
+   * Plate: the group's face is the nested white scope's --primary1 (§10.1).
+   * The group is also a Ground face, whose own classes share the base
+   * layer, so its display and edge are restated here.
+   */
+  .plate .group {
+    display: flex;
+    border: var(--number-field-edge) solid var(--role-rule);
+    background-color: var(--primary1);
+  }
+}
+
+@layer states {
+  /* Hover (not disabled): the 1 px edge steps to --primary12 at the same weight [D140]. */
+  .group:hover:not([data-disabled], [data-readonly], [data-invalid]) {
+    border-color: var(--primary12);
+  }
+
+  /*
+   * Step cells and readout buttons: the glyph swaps to the next tier's
+   * weight on hover and press (Icon weight="interactive", hosted by the
+   * cell; §10.1 icon states). The readout edge never changes [D181].
+   */
+
+  /* Focus: the ring on any focus of the input, drawn outside the group [D90]. */
+  .group[data-focused] {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .input:focus-visible {
+    outline: none;
+  }
+
+  /* The readout has no box: the ring surrounds the value. */
+  .readout .group[data-focused] {
+    outline: none;
+  }
+
+  .readout .input:focus {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Held step cell: the inverse pair [D84]. */
+  .decrement:active:not([data-disabled]),
+  .increment:active:not([data-disabled]) {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /* Error: the --border-size-2 edge in --role-status (the danger scale) [D141, D155]. */
+  .group[data-invalid] {
+    --number-field-edge: var(--border-size-2);
+
+    border-color: var(--role-status);
+  }
+
+  /* Disabled: dotted edges, --role-muted inks, no face; never dimmed [D16, D85]. */
+  .group[data-disabled] {
+    --number-field-edge: 0px;
+
+    padding: var(--border-size-1);
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .group[data-disabled] .edge {
+    display: block;
+  }
+
+  /* A step cell at its minimum or maximum (or in a disabled field): dotted edge, --role-muted glyph. */
+  .decrement[data-disabled],
+  .increment[data-disabled] {
+    border-style: none;
+    color: var(--role-muted);
+  }
+
+  .decrement[data-disabled] {
+    padding-inline-end: var(--border-size-1);
+  }
+
+  .increment[data-disabled] {
+    padding-inline-start: var(--border-size-1);
+  }
+
+  .decrement[data-disabled] .cellEdge,
+  .increment[data-disabled] .cellEdge {
+    display: block;
+  }
+
+  /* Read-only: the box is removed, a --border-size-1 bottom rule remains; steppers leave. */
+  .group[data-readonly] {
+    border-width: 0 0 var(--border-size-1);
+    border-radius: var(--ds-radius-none);
+    background: none;
+  }
+
+  .group[data-readonly] .decrement,
+  .group[data-readonly] .increment {
+    display: none;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The value and its unit print in the frame; step cells are interaction only. */
+    .decrement,
+    .increment {
+      display: none;
+    }
+
+    .input::placeholder {
+      font-size: 0;
+    }
+  }
+}

package/components/Pagination/Pagination.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const pagination: (props?: ({
+    kind?: "compact" | "step" | "dots" | "numbered" | "more" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PaginationVariants = VariantProps<typeof pagination>;
+export type PaginationKind = NonNullable<PaginationVariants['kind']>;
+/** The items on the current page, for the printed state line (§7.12.1). */
+export interface PaginationItems {
+    /** The first item's position on this page, e.g. 41. */
+    first: number;
+    /** The last item's position on this page, e.g. 50. */
+    last: number;
+    /** The item count across every page, e.g. 118. */
+    total: number;
+}
+/** The props every form shares: `nav` props, the page, the count, the labels and the color axes. */
+interface PaginationCommonProps extends Omit<React.ComponentPropsWithRef<'nav'>, 'children'> {
+    /** The current page (or item), 1-based. */
+    page: number;
+    /** The page (or item) count. */
+    count: number;
+    /**
+     * Builds each anchor, e.g. `(href) => <NextLink href={href} />`. Default: a
+     * plain `<a href>`.
+     */
+    renderLink?: (href: string) => React.ReactElement;
+    /**
+     * Primary Radix scale: numerals, labels, the current bar and the focus
+     * ring. Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: PaginationVariants['primary'];
+    /** Secondary Radix scale: the Previous and Next arrows on light grounds. Never defaulted. */
+    secondary?: PaginationVariants['secondary'];
+    /**
+     * The Previous label, authored in sentence case; the CSS sets the caps
+     * [D165]. On the step pager it is the ‹ button's accessible name. Default
+     * "Previous".
+     */
+    previousLabel?: string;
+    /**
+     * The Next label, authored in sentence case; the CSS sets the caps
+     * [D165]. On the step pager it is the › button's accessible name. Default
+     * "Next".
+     */
+    nextLabel?: string;
+    /** The items on this page. Given, the pager prints "Items 41–50 of 118." in its place. */
+    items?: PaginationItems;
+    /** The full list's URL, printed after the state line per §7.6 ("Full list (example.org/birds)"). */
+    fullListHref?: string;
+}
+/** Which form, and how it moves between pages. */
+type PaginationFormProps = {
+    /**
+     * `numbered` (default): ‹ Previous · 1 … 4 5 6 … 12 · Next ›, shown
+     * from 768 px of its own width and compact below. `compact`:
+     * ‹ Previous · Page 5 of 12 · Next › at every width, for lists over 50
+     * pages.
+     */
+    kind?: 'numbered' | 'compact';
+    /** Every page's URL: each page is a link, never a click handler alone (P8). */
+    getHref: (page: number) => string;
+    onPageChange?: never;
+    moreLabel?: never;
+} | {
+    /**
+     * `step`: icon-only ‹ › circles around a mono "3 of 12", for carousels
+     * and figures. `dots`: the step pager plus up to 8 dots, the count
+     * still shown; with more than 8 it is the plain step pager. Neither
+     * prints.
+     */
+    kind: 'step' | 'dots';
+    /** Given, the step buttons are links to these URLs. */
+    getHref?: (page: number) => string;
+    /** Called with the target page when a step button is pressed. Pass it, `getHref`, or both. */
+    onPageChange?: (page: number) => void;
+    moreLabel?: never;
+} | {
+    /**
+     * `more`: the count ("Showing 20 of 54") over an outline "Show More"
+     * Button, for feeds. Each step is a link to the next page's URL (P8);
+     * the Button is omitted once everything shows.
+     */
+    kind: 'more';
+    /** Every page's URL; the Button links to the next one. */
+    getHref: (page: number) => string;
+    /** The items showing, for "Showing 20 of 54" and the printed state line. */
+    items: PaginationItems;
+    /** The Button's label, authored in title case [D160]. Default "Show More". */
+    moreLabel?: string;
+    onPageChange?: never;
+};
+/** Props for Pagination: `nav` props, the page, the count, the form and how it moves, and the color axes. */
+export type PaginationProps = PaginationCommonProps & PaginationFormProps;
+/**
+ * A `nav` named "Pagination". `numbered` and `compact`: Previous at the
+ * start, the page numbers (or the "Page 5 of 12" status) centered, Next at
+ * the end; Previous and Next are `type-label` caps with Material Symbols
+ * `chevron_left` / `chevron_right` at the inline tier; page numerals are
+ * mono at `type-label` size with tabular figures, so a changing count never
+ * shifts the row [D165, D174, D175]. The current page is unlinked, bold and
+ * barred. `step` and `dots`: icon-only ‹ › circles around a mono "3 of 12"
+ * (plus up to 8 dots). `more`: "Showing 20 of 54" over a "Show More"
+ * Button. At the ends a control is omitted and its space kept, never
+ * disabled. The pager is hidden in print; with `items` the linked forms
+ * print one state line instead.
+ */
+export declare function Pagination(props: PaginationProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

package/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA6CjE,eAAO,MAAM,UAAU;;;;8EAgBrB,CAAA;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAChE,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAA;AAEpE,2EAA2E;AAC3E,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,oGAAoG;AACpG,UAAU,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1F,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAA;IACvC,6FAA6F;IAC7F,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,oGAAoG;IACpG,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,kDAAkD;AAClD,KAAK,mBAAmB,GACpB;IACE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IAC7B,+EAA+E;IAC/E,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,GACD;IACE;;;;;OAKG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,8FAA8F;IAC9F,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,GACD;IACE;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,4EAA4E;IAC5E,KAAK,EAAE,eAAe,CAAA;IACtB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CAAA;AAEL,6GAA6G;AAC7G,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,mBAAmB,CAAA;AAuFzE;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,4BA4MhD"}