@lutra-ui-system/react 0.1.0

package/dist/components/field-group/index.d.ts

@@ -0,0 +1,3 @@
+export { FieldGroup } from './field-group.js';
+export type { FieldGroupProps } from './field-group.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/field-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/field-group/index.js

@@ -0,0 +1,2 @@
+export { FieldGroup } from './field-group.js';
+//# sourceMappingURL=index.js.map

package/dist/components/field-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/field-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/input/index.d.ts

@@ -0,0 +1,3 @@
+export { Input } from './input.js';
+export type { InputProps, InputSize, InputType } from './input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+export { Input } from './input.js';
+//# sourceMappingURL=index.js.map

package/dist/components/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/input/input.d.ts

@@ -0,0 +1,96 @@
+import type { InputHTMLAttributes } from 'react';
+/** Drawn size. Maps to the `size` axis of the Figma component set. */
+export type InputSize = 'sm' | 'md' | 'lg';
+/**
+ * The input types this component's design actually covers.
+ *
+ * Every one of these renders as a single-line text box, which is what the Figma
+ * component draws. The types left out have their own native interface that this
+ * styling would fight rather than improve: `checkbox` and `radio` get dedicated
+ * Lutra components, `file` renders a button, `range` a slider, `color` a swatch,
+ * and `submit`, `button`, `reset` and `image` are buttons — use `Button`.
+ * `hidden` renders nothing at all.
+ *
+ * The date and time types are included because they are text boxes, but browsers
+ * add their own picker affordance inside the field — a calendar icon, spin
+ * buttons — whose appearance is not ours to control and will not match the Figma
+ * drawing exactly. See `input.md`.
+ */
+export type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | 'datetime-local' | 'month' | 'time' | 'week';
+/**
+ * Native `<input>` attributes, minus the four this component redefines or refuses.
+ *
+ * Keeping the rest means `name`, `value`, `defaultValue`, `placeholder`,
+ * `required`, `readOnly`, `autoComplete`, `inputMode`, `pattern`, `minLength`,
+ * every `on*` handler, every other `aria-*`, and every `data-*` continue to work
+ * exactly as they do on a plain `<input>`.
+ *
+ * - `size` is redefined. The native attribute is a *character count* that sets the
+ *   field's width; Lutra's is the design system's size scale. They cannot share a
+ *   name, and the design system's meaning is the one a consumer of this library
+ *   expects. Width is controlled with CSS or `fullWidth`.
+ * - `type` is narrowed to the types this design covers.
+ * - `aria-invalid` is removed on purpose — see `invalid`.
+ * - `children` is removed because `<input>` is a void element.
+ */
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'aria-invalid' | 'children'>;
+export interface InputProps extends NativeInputProps {
+    /**
+     * Drawn size.
+     *
+     * `'sm'` sets 14px text. Mobile Safari zooms the page when a focused field's
+     * text is below 16px, so prefer `'md'` for anything a person fills in on a
+     * phone and keep `'sm'` for dense, secondary UI.
+     *
+     * @default 'md'
+     */
+    size?: InputSize;
+    /**
+     * Marks the value as failing validation.
+     *
+     * This is the only way to put the field in its error state, and it sets both
+     * the visual treatment and `aria-invalid="true"` from the one value. That is
+     * deliberate: a field that looks wrong while reporting itself valid is worse
+     * than either problem alone, so `aria-invalid` is not accepted as a separate
+     * prop and the CSS keys off the ARIA attribute rather than a parallel data
+     * attribute. The two cannot disagree.
+     *
+     * Input owns the invalid *state*. The error *message* belongs to the field
+     * wrapper that composes this control, and is connected with `aria-describedby`.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Stretches the field to the width of its container. Layout only — it is not a
+     * variant and changes nothing else about the input.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** @default 'text' */
+    type?: InputType;
+}
+/**
+ * A single-line text entry control.
+ *
+ * Renders a native `<input>`, so text selection, editing shortcuts, autofill,
+ * form participation, validation, IME composition, and disabled semantics come
+ * from the platform rather than from this component.
+ *
+ * Hover and focus are browser states expressed in CSS, not props. The only states
+ * Input models are the ones a consumer owns: `disabled`, `readOnly` and `invalid`.
+ *
+ * **Every rendered Input must have an accessible name.** This primitive does not
+ * manufacture one, because the name normally comes from a visible `<label>` that
+ * the surrounding field composition owns. Until that component exists, associate
+ * a real `<label htmlFor>` yourself, or pass `aria-label` / `aria-labelledby`. A
+ * `placeholder` is not a name — it disappears on the first keystroke. See
+ * `input.md`.
+ *
+ * `forwardRef` rather than a plain `ref` prop: this package supports React 18.3
+ * as well as 19, and ref-as-a-prop only works in 19.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,sEAAsE;AACtE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,MAAM,CAAC;AAEX;;;;;;;;;;;;;;;GAeG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAC9C,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAClD;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,yGAkBhB,CAAC"}

package/dist/components/input/input.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * A single-line text entry control.
+ *
+ * Renders a native `<input>`, so text selection, editing shortcuts, autofill,
+ * form participation, validation, IME composition, and disabled semantics come
+ * from the platform rather than from this component.
+ *
+ * Hover and focus are browser states expressed in CSS, not props. The only states
+ * Input models are the ones a consumer owns: `disabled`, `readOnly` and `invalid`.
+ *
+ * **Every rendered Input must have an accessible name.** This primitive does not
+ * manufacture one, because the name normally comes from a visible `<label>` that
+ * the surrounding field composition owns. Until that component exists, associate
+ * a real `<label htmlFor>` yourself, or pass `aria-label` / `aria-labelledby`. A
+ * `placeholder` is not a name — it disappears on the first keystroke. See
+ * `input.md`.
+ *
+ * `forwardRef` rather than a plain `ref` prop: this package supports React 18.3
+ * as well as 19, and ref-as-a-prop only works in 19.
+ */
+export const Input = forwardRef(function Input({ size = 'md', invalid = false, fullWidth = false, type = 'text', className, ...nativeProps }, ref) {
+    return (_jsx("input", { ...nativeProps, ref: ref, type: type, className: className === undefined ? 'lutra-input' : `lutra-input ${className}`, "aria-invalid": invalid || undefined, "data-size": size, "data-full-width": fullWidth ? 'true' : undefined }));
+});
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA8FnC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,EAC7F,GAAG;IAEH,OAAO,CACL,mBACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,SAAS,EAAE,kBAIjE,OAAO,IAAI,SAAS,eACvB,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC/C,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/link/index.d.ts

@@ -0,0 +1,3 @@
+export { Link } from './link.js';
+export type { LinkProps, LinkVariant } from './link.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/link/index.js

@@ -0,0 +1,2 @@
+export { Link } from './link.js';
+//# sourceMappingURL=index.js.map

package/dist/components/link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/link/link.d.ts

@@ -0,0 +1,44 @@
+import type { AnchorHTMLAttributes } from 'react';
+/**
+ * How the link is drawn. Maps to the `type` axis of the Figma component set, renamed here because
+ * `type` is already a native `<a>` attribute and shadowing it would remove something real.
+ *
+ * `'inline'` is for links inside prose and stays underlined. `'standalone'` is for links that sit on
+ * their own, where position and spacing already separate them from surrounding text.
+ *
+ * **Styling only.** Neither value changes the element, and neither exists to make a link behave like
+ * a button.
+ */
+export type LinkVariant = 'inline' | 'standalone';
+/**
+ * Native `<a>` attributes. Nothing is removed: `href`, `target`, `rel`, `download`, `hrefLang`,
+ * `referrerPolicy`, every `aria-*`, every `data-*` and every event handler pass straight through.
+ */
+type NativeAnchorProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export interface LinkProps extends NativeAnchorProps {
+    /** @default 'inline' */
+    variant?: LinkVariant;
+}
+/**
+ * A link. Renders a native `<a>`.
+ *
+ * **It is always an anchor, and there is no prop that turns it into a button.** The annotation is
+ * blunt about why: a link that does not navigate is a button, and a button that navigates is a link.
+ * Getting it wrong removes middle-click, open-in-new-tab, copy-link and the browser's own history
+ * behaviour — none of which can be added back by hand. If you need an action, use `Button`.
+ *
+ * Hover, focus, active and visited are browser states expressed in CSS. There are no `hovered`,
+ * `focused` or `visited` props: the browser already tracks all four, and a prop would drift out of
+ * step with the one that is real.
+ *
+ * **The link text is the accessible name, and it has to make sense on its own.** Screen-reader users
+ * list links out of context, so "Read the accessibility annotation guide" works and "Read more" does
+ * not. This component cannot fix a vague label and deliberately does not try.
+ *
+ * Nothing is appended for `target="_blank"`. The Figma component has no external-link icon and the
+ * annotation establishes no "opens in a new tab" contract, so inventing one here would put text in
+ * the accessible name that the design system never agreed to. Say it in the link text if it matters.
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=link.d.ts.map

package/dist/components/link/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;AAElD;;;GAGG;AACH,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,wBAAwB;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,yGAcf,CAAC"}

package/dist/components/link/link.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * A link. Renders a native `<a>`.
+ *
+ * **It is always an anchor, and there is no prop that turns it into a button.** The annotation is
+ * blunt about why: a link that does not navigate is a button, and a button that navigates is a link.
+ * Getting it wrong removes middle-click, open-in-new-tab, copy-link and the browser's own history
+ * behaviour — none of which can be added back by hand. If you need an action, use `Button`.
+ *
+ * Hover, focus, active and visited are browser states expressed in CSS. There are no `hovered`,
+ * `focused` or `visited` props: the browser already tracks all four, and a prop would drift out of
+ * step with the one that is real.
+ *
+ * **The link text is the accessible name, and it has to make sense on its own.** Screen-reader users
+ * list links out of context, so "Read the accessibility annotation guide" works and "Read more" does
+ * not. This component cannot fix a vague label and deliberately does not try.
+ *
+ * Nothing is appended for `target="_blank"`. The Figma component has no external-link icon and the
+ * annotation establishes no "opens in a new tab" contract, so inventing one here would put text in
+ * the accessible name that the design system never agreed to. Say it in the link text if it matters.
+ */
+export const Link = forwardRef(function Link({ variant = 'inline', className, children, ...nativeProps }, ref) {
+    return (_jsx("a", { ...nativeProps, ref: ref, className: className === undefined ? 'lutra-link' : `lutra-link ${className}`, "data-variant": variant, children: children }));
+});
+//# sourceMappingURL=link.js.map

package/dist/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA0BnC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAA+B,SAAS,IAAI,CACxE,EAAE,OAAO,GAAG,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,EAC3D,GAAG;IAEH,OAAO,CACL,eACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,SAAS,EAAE,kBAC/D,OAAO,YAEpB,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/link-card/index.d.ts

@@ -0,0 +1,3 @@
+export { LinkCard } from './link-card.js';
+export type { LinkCardProps } from './link-card.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/link-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/link-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/link-card/index.js

@@ -0,0 +1,2 @@
+export { LinkCard } from './link-card.js';
+//# sourceMappingURL=index.js.map

package/dist/components/link-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/link-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/link-card/link-card.d.ts

@@ -0,0 +1,62 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import type { HeadingLevel } from '../card/index.js';
+/**
+ * Native `<a>` attributes. They land on the anchor, not on the card, because the anchor is the
+ * interactive thing — `href`, `target`, `rel`, `download`, every `aria-*` and every event handler
+ * pass through to it.
+ */
+type NativeAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>;
+export interface LinkCardProps extends NativeAnchorProps {
+    /** Where the card goes. */
+    href: string;
+    /** The level the heading renders at. Required, for the same reason it is on `Card`. */
+    headingLevel: HeadingLevel;
+    /**
+     * The link text, which is the whole of the accessible name. It has to make sense read on its own,
+     * out of context, because that is how screen-reader users list links.
+     */
+    children: ReactNode;
+    /**
+     * Metadata below the link. Deliberately **outside** the accessible name — see below.
+     *
+     * Because it is outside the name, it must never carry something a person needs in order to know
+     * where the link goes.
+     */
+    supportingText?: ReactNode;
+    /** Extra class on the card surface. */
+    className?: string;
+}
+/**
+ * A card whose whole surface is one destination.
+ *
+ * ## The shape, and why it is exactly this shape
+ *
+ * A heading containing a single anchor, with the anchor's `::after` pseudo-element stretched over the
+ * card. That produces the two properties the annotation asks for, and it is the only construction
+ * that produces both:
+ *
+ * - **The accessible name is the link text alone.** The anchor wraps only the heading text; the
+ *   pseudo-element supplies the clickable area. Supporting text and metadata stay out of the name.
+ * - **The card is exactly one tab stop.**
+ *
+ * The two obvious alternatives both fail, and they fail invisibly — the card looks perfect on screen
+ * either way:
+ *
+ * - **An anchor wrapped around the whole card** gives the link a name made of every string inside it,
+ *   which is unusable in a list of links.
+ * - **A `div` with an `onClick`** is not a link at all: no middle-click, no open-in-new-tab, no
+ *   copy-link, no history, and nothing in the accessibility tree saying it navigates.
+ *
+ * ## When not to use it
+ *
+ * Only when the card has exactly one destination and **no other interactive content**. A link inside
+ * a link is not valid and the browser will not honour it, and any control under the stretched
+ * pseudo-element is unreachable by pointer. If you need two actions, or a link and a button, use
+ * `Card` with a `CardFooter`.
+ *
+ * Hover raises the card and underlines the link text; focus draws the ring. Both change more than
+ * colour, so both survive greyscale.
+ */
+export declare const LinkCard: import("react").ForwardRefExoticComponent<LinkCardProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=link-card.d.ts.map

package/dist/components/link-card/link-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-card.d.ts","sourceRoot":"","sources":["../../../src/components/link-card/link-card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;GAIG;AACH,KAAK,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnF,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,uFAAuF;IACvF,YAAY,EAAE,YAAY,CAAC;IAC3B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,QAAQ,6GAsBnB,CAAC"}

package/dist/components/link-card/link-card.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/** The chevron from the Figma component. Decorative: the link text is already the name. */
+function ChevronRightIcon() {
+    return (_jsx("svg", { className: "lutra-link-card__chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M9 5l7 7-7 7", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * A card whose whole surface is one destination.
+ *
+ * ## The shape, and why it is exactly this shape
+ *
+ * A heading containing a single anchor, with the anchor's `::after` pseudo-element stretched over the
+ * card. That produces the two properties the annotation asks for, and it is the only construction
+ * that produces both:
+ *
+ * - **The accessible name is the link text alone.** The anchor wraps only the heading text; the
+ *   pseudo-element supplies the clickable area. Supporting text and metadata stay out of the name.
+ * - **The card is exactly one tab stop.**
+ *
+ * The two obvious alternatives both fail, and they fail invisibly — the card looks perfect on screen
+ * either way:
+ *
+ * - **An anchor wrapped around the whole card** gives the link a name made of every string inside it,
+ *   which is unusable in a list of links.
+ * - **A `div` with an `onClick`** is not a link at all: no middle-click, no open-in-new-tab, no
+ *   copy-link, no history, and nothing in the accessibility tree saying it navigates.
+ *
+ * ## When not to use it
+ *
+ * Only when the card has exactly one destination and **no other interactive content**. A link inside
+ * a link is not valid and the browser will not honour it, and any control under the stretched
+ * pseudo-element is unreachable by pointer. If you need two actions, or a link and a button, use
+ * `Card` with a `CardFooter`.
+ *
+ * Hover raises the card and underlines the link text; focus draws the ring. Both change more than
+ * colour, so both survive greyscale.
+ */
+export const LinkCard = forwardRef(function LinkCard({ href, headingLevel, children, supportingText, className, ...nativeProps }, ref) {
+    const Heading = `h${headingLevel}`;
+    const hasSupportingText = supportingText !== undefined && supportingText !== null && supportingText !== false;
+    return (_jsxs("div", { className: className === undefined ? 'lutra-link-card' : `lutra-link-card ${className}`, children: [_jsxs(Heading, { className: "lutra-link-card__heading", children: [_jsx("a", { ...nativeProps, ref: ref, className: "lutra-link-card__link", href: href, children: children }), _jsx(ChevronRightIcon, {})] }), hasSupportingText && _jsx("p", { className: "lutra-link-card__supporting-text", children: supportingText })] }));
+});
+//# sourceMappingURL=link-card.js.map

package/dist/components/link-card/link-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-card.js","sourceRoot":"","sources":["../../../src/components/link-card/link-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiCnC,2FAA2F;AAC3F,SAAS,gBAAgB;IACvB,OAAO,CACL,cACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,iBACH,MAAM,EAClB,SAAS,EAAC,OAAO,YAEjB,eAAM,CAAC,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,GAAG,GAClE,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAmC,SAAS,QAAQ,CACpF,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,EAC3E,GAAG;IAEH,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAC;IAC5C,MAAM,iBAAiB,GACrB,cAAc,KAAK,SAAS,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,KAAK,CAAC;IAEtF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,SAAS,EAAE,aAC1F,MAAC,OAAO,IAAC,SAAS,EAAC,0BAA0B,aAG3C,eAAO,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,YACvE,QAAQ,GACP,EACJ,KAAC,gBAAgB,KAAG,IACZ,EAET,iBAAiB,IAAI,YAAG,SAAS,EAAC,kCAAkC,YAAE,cAAc,GAAK,IACtF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/mobile-navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { MobileNavigation } from './mobile-navigation.js';
+export type { MobileNavigationProps, MobileNavigationAlign } from './mobile-navigation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/mobile-navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/mobile-navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/mobile-navigation/index.js

@@ -0,0 +1,2 @@
+export { MobileNavigation } from './mobile-navigation.js';
+//# sourceMappingURL=index.js.map

package/dist/components/mobile-navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/mobile-navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/mobile-navigation/mobile-navigation.d.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+/**
+ * Which edge of the trigger the panel is anchored to. Styling and position only — it changes no
+ * semantics. Named to match `Tooltip`'s `align`, so the library has one word for one idea.
+ */
+export type MobileNavigationAlign = 'start' | 'end';
+export interface MobileNavigationProps {
+    /**
+     * The trigger's accessible name. Say what it controls — the annotation asks for a name that names
+     * the thing being opened, not a shape.
+     *
+     * @default 'Menu'
+     */
+    label?: string;
+    /**
+     * The name of the navigation landmark inside the panel.
+     *
+     * A page may hold more than one `nav`, and when it does each needs its own name so they can be
+     * told apart in a landmark list.
+     *
+     * @default 'Primary'
+     */
+    navLabel?: string;
+    /** Accessible name of the close control inside the panel. @default 'Close navigation' */
+    closeLabel?: string;
+    /** The destinations. `NavigationItem`s. */
+    children: ReactNode;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Uncontrolled initial state. @default false */
+    defaultOpen?: boolean;
+    /** Called whenever the component wants the open state to change. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Makes the rest of the page `inert` while the panel is open, so nothing behind it can be
+     * focused, clicked or read.
+     *
+     * Off by default, and the reasoning is in `mobile-navigation.md`: the accessibility annotation
+     * asks for containment, the page guidance says not to trap focus, and `inert` is the one
+     * mechanism that satisfies both — but it also stops an outside press from dismissing the panel,
+     * because inert content receives no events. Turning it on is therefore a product decision about a
+     * specific panel, not a default this component may make on everyone's behalf.
+     *
+     * @default false
+     */
+    containBackground?: boolean;
+    /**
+     * Which edge of the trigger the panel is anchored to, using the same vocabulary as `Tooltip`.
+     *
+     * `'start'` anchors the panel's inline start to the trigger's, which is right when the trigger sits
+     * at the start of its row. Pass `'end'` when the trigger sits at the **end** of a row — a site
+     * header with the site name on one side and the menu on the other, which is what the Figma
+     * `Site Header` draws. A start-anchored panel there extends past the viewport edge and forces
+     * horizontal scrolling.
+     *
+     * @default 'start'
+     */
+    align?: MobileNavigationAlign;
+    /** Extra class on the wrapper. */
+    className?: string;
+}
+/**
+ * The mobile primary-navigation disclosure: a button that reveals a panel of destinations.
+ *
+ * **It is a disclosure, not a dialog.** The annotation asks for a button carrying `aria-expanded`
+ * and `aria-controls`, and the page guidance says not to apply dialog semantics or a focus trap. So
+ * there is no `role="dialog"`, no `aria-modal`, and no focus-trap loop. The panel is a `nav`
+ * landmark with its own accessible name, holding ordinary anchors.
+ *
+ * Behaviour, all of it from the annotation:
+ *
+ * - The trigger is a real button, so Enter and Space open it.
+ * - `aria-expanded` reflects the state; `aria-controls` points at the panel.
+ * - Opening moves focus into the panel.
+ * - Escape closes it and returns focus to the trigger.
+ * - The close button and a pointer press outside also close it, and Escape and the close button both
+ *   return focus to the trigger.
+ * - Every target holds the 44px minimum; that is in the stylesheet.
+ *
+ * The one place the two Figma sources disagree is background containment, and that is resolved by
+ * `containBackground` — see the prop, and `mobile-navigation.md` for the full argument.
+ *
+ * Figma's `Mobile Navigation` component draws the open panel only; the trigger lives in the header
+ * pattern. It is owned here because `aria-expanded`, `aria-controls` and the focus round trip are one
+ * mechanism, and splitting them across two components would leave neither able to keep the contract.
+ */
+export declare function MobileNavigation({ label, navLabel, closeLabel, children, open: controlledOpen, defaultOpen, onOpenChange, containBackground, align, className, }: MobileNavigationProps): import("react").JSX.Element;
+//# sourceMappingURL=mobile-navigation.d.ts.map

package/dist/components/mobile-navigation/mobile-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/mobile-navigation/mobile-navigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAc,EACd,QAAoB,EACpB,UAA+B,EAC/B,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,iBAAyB,EACzB,KAAe,EACf,SAAS,GACV,EAAE,qBAAqB,+BAiJvB"}