@lutra-ui-system/react 0.1.0

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

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { Button } from '../button/index.js';
+/** The first focusable thing in the panel, in DOM order. */
+const FOCUSABLE = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function MenuIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", focusable: "false", children: _jsx("path", { d: "M2 4h12M2 8h12M2 12h12", strokeLinecap: "round" }) }));
+}
+function CloseIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", focusable: "false", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" }) }));
+}
+/**
+ * Marks everything outside `element` as `inert`, walking up to `document.body` and marking the
+ * siblings at each level. Returns a function that restores exactly what was changed.
+ *
+ * Only elements that were not already inert are touched, so a consumer's own `inert` survives.
+ */
+function inertOutside(element) {
+    const marked = [];
+    let node = element;
+    while (node && node.parentElement) {
+        for (const sibling of Array.from(node.parentElement.children)) {
+            if (sibling === node)
+                continue;
+            if (!(sibling instanceof HTMLElement))
+                continue;
+            if (sibling.hasAttribute('inert'))
+                continue;
+            sibling.setAttribute('inert', '');
+            marked.push(sibling);
+        }
+        node = node.parentElement;
+    }
+    return () => {
+        for (const element of marked)
+            element.removeAttribute('inert');
+    };
+}
+/**
+ * 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 function MobileNavigation({ label = 'Menu', navLabel = 'Primary', closeLabel = 'Close navigation', children, open: controlledOpen, defaultOpen = false, onOpenChange, containBackground = false, align = 'start', className, }) {
+    const panelId = `lutra-mobile-navigation-${useId()}`;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const wrapperRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    // Set when this component closes itself, so focus returns to the trigger on those paths and not
+    // when a consumer closes the panel for their own reasons — a route change, say.
+    const returnFocus = useRef(false);
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const close = useCallback(({ focusTrigger }) => {
+        returnFocus.current = focusTrigger;
+        setOpen(false);
+    }, [setOpen]);
+    // The trigger toggles, and one press must produce exactly one notification. It sets the
+    // focus-return flag directly rather than going through `close` first: closing and then opening
+    // would report `false` before `true` on the way open, and `false` twice on the way closed, which
+    // is a state change a consumer never asked for.
+    const toggle = useCallback(() => {
+        returnFocus.current = false;
+        setOpen(!open);
+    }, [open, setOpen]);
+    // Focus moves into the panel on open, and back to the trigger when this component closed it.
+    useEffect(() => {
+        if (open) {
+            panelRef.current?.querySelector(FOCUSABLE)?.focus();
+            return;
+        }
+        if (returnFocus.current) {
+            returnFocus.current = false;
+            triggerRef.current?.focus();
+        }
+    }, [open]);
+    // Background containment. `inert` is native, so the browser does the work; there is no focus-trap
+    // loop here and nothing is given dialog semantics.
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!open || !containBackground || !wrapper)
+            return;
+        return inertOutside(wrapper);
+    }, [open, containBackground]);
+    // A pointer press outside closes the panel. `pointerdown` rather than `click`, and nothing is
+    // prevented, so whatever was pressed still receives its own event. With `containBackground` on
+    // there is nothing outside to press — that trade-off is documented on the prop.
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (target instanceof Node && wrapperRef.current?.contains(target))
+                return;
+            close({ focusTrigger: false });
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+        };
+    }, [open, close]);
+    // Escape is delegated with a native listener on the wrapper rather than a JSX handler, the same as
+    // Dropdown: the wrapper is a positioning container, not something interactive, and hanging a key
+    // handler off a plain div is what `jsx-a11y/no-static-element-interactions` rightly objects to. The
+    // real handling belongs to the button and the links whose events bubble up through it.
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!open || !wrapper)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            // One press, one layer, the same two mechanisms Dropdown uses: `preventDefault()` so a native
+            // modal `<dialog>` above the panel does not also treat this press as a close request, and
+            // `stopPropagation()` so a JavaScript layer listening for the key does not act on it either.
+            event.preventDefault();
+            event.stopPropagation();
+            close({ focusTrigger: true });
+        };
+        wrapper.addEventListener('keydown', onKeyDown);
+        return () => {
+            wrapper.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open, close]);
+    return (_jsxs("div", { ref: wrapperRef, className: className === undefined ? 'lutra-mobile-navigation' : `lutra-mobile-navigation ${className}`, children: [_jsx(Button, { ref: triggerRef, variant: "secondary", contentType: "icon-only", "aria-label": label, "aria-expanded": open, "aria-controls": panelId, onClick: toggle, children: _jsx(MenuIcon, {}) }), open && (_jsxs("div", { ref: panelRef, id: panelId, className: "lutra-mobile-navigation__panel", "data-align": align, children: [_jsx("div", { className: "lutra-mobile-navigation__controls", children: _jsx(Button, { variant: "secondary", contentType: "icon-only", "aria-label": closeLabel, onClick: () => close({ focusTrigger: true }), children: _jsx(CloseIcon, {}) }) }), _jsx("nav", { className: "lutra-mobile-navigation__nav", "aria-label": navLabel, children: children })] }))] }));
+}
+//# sourceMappingURL=mobile-navigation.js.map

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

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

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

@@ -0,0 +1,3 @@
+export { NavigationItem } from './navigation-item.js';
+export type { NavigationItemProps } from './navigation-item.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,38 @@
+import type { AnchorHTMLAttributes } from 'react';
+/**
+ * Native `<a>` attributes. Nothing is removed — `href`, `target`, `rel`, every `aria-*` and every
+ * event handler pass straight through, the same as `Link`.
+ */
+type NativeAnchorProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export interface NavigationItemProps extends NativeAnchorProps {
+    /**
+     * Marks this item as the page you are on. Sets `aria-current="page"`.
+     *
+     * **Exactly one item per navigation context may have it.** Two current items say two different
+     * things are the current page, which is worse than none.
+     *
+     * @default false
+     */
+    current?: boolean;
+    /** The visible text, which is the accessible name. */
+    children: React.ReactNode;
+}
+/**
+ * One destination in a navigation landmark. Renders a native `<a>`.
+ *
+ * It is a separate component from `Link` because it is a separate component in Figma with a
+ * different job: `Link` is for prose and standalone links, this is for a list of destinations where
+ * one of them is where you already are. Sharing an implementation would mean one of the two carrying
+ * props it has no use for.
+ *
+ * **The current state is shown three ways, not one.** The annotation asks for a weight change and an
+ * indicator bar as well as colour, because colour alone is not available to everyone, and because a
+ * bar alone disappears in forced-colours modes. All three are in the stylesheet; `aria-current="page"`
+ * is what carries it to assistive technology.
+ *
+ * The focus ring is drawn independently of the current indicator, so the item you are on and the item
+ * you have focused never look like the same thing.
+ */
+export declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=navigation-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD;;;GAGG;AACH,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,mHAqB1B,CAAC"}

package/dist/components/navigation-item/navigation-item.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * One destination in a navigation landmark. Renders a native `<a>`.
+ *
+ * It is a separate component from `Link` because it is a separate component in Figma with a
+ * different job: `Link` is for prose and standalone links, this is for a list of destinations where
+ * one of them is where you already are. Sharing an implementation would mean one of the two carrying
+ * props it has no use for.
+ *
+ * **The current state is shown three ways, not one.** The annotation asks for a weight change and an
+ * indicator bar as well as colour, because colour alone is not available to everyone, and because a
+ * bar alone disappears in forced-colours modes. All three are in the stylesheet; `aria-current="page"`
+ * is what carries it to assistive technology.
+ *
+ * The focus ring is drawn independently of the current indicator, so the item you are on and the item
+ * you have focused never look like the same thing.
+ */
+export const NavigationItem = forwardRef(function NavigationItem({ current = false, className, children, ...nativeProps }, ref) {
+    return (_jsxs("a", { ...nativeProps, ref: ref, className: className === undefined ? 'lutra-navigation-item' : `lutra-navigation-item ${className}`, ...(current ? { 'aria-current': 'page' } : {}), children: [_jsx("span", { className: "lutra-navigation-item__label", children: children }), current && _jsx("span", { className: "lutra-navigation-item__indicator", "aria-hidden": "true" })] }));
+});
+//# sourceMappingURL=navigation-item.js.map

package/dist/components/navigation-item/navigation-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-item.js","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAuBnC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,SAAS,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,EAAE,GAAG;IACnF,OAAO,CACL,gBACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EACP,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,yBAAyB,SAAS,EAAE,KAKtF,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,aAExD,eAAM,SAAS,EAAC,8BAA8B,YAAE,QAAQ,GAAQ,EAG/D,OAAO,IAAI,eAAM,SAAS,EAAC,kCAAkC,iBAAa,MAAM,GAAG,IAClF,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Radio, RadioItem } from './radio.js';
+export type { RadioProps, RadioItemProps } from './radio.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/radio/index.js

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

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

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

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,58 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+/** Native `<input type="radio">` attributes, minus what this component owns. */
+type NativeRadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-invalid' | 'children' | 'size'>;
+export interface RadioProps extends NativeRadioProps {
+    /**
+     * Draws the option in its error treatment.
+     *
+     * **Visual only, and deliberately so.** A single radio cannot usefully be invalid on its own —
+     * validity belongs to the question, not to one of its answers. ARIA 1.2 does inherit
+     * `aria-invalid` into the `radio` role, but marks it **deprecated** there for that reason, so it
+     * is not used. The semantic state lives at group level: `FieldGroup` renders the message and
+     * connects it to the `<fieldset>`.
+     *
+     * This is the one place in the library where a visual state is not paired with a semantic one, and
+     * it is because pairing them here would be wrong rather than merely redundant. Checkbox, which
+     * genuinely can fail on its own, does set `aria-invalid`.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+}
+/**
+ * A radio button. Renders a native `<input type="radio">`.
+ *
+ * **Grouping is native: radios that share a `name` are one group.** The browser then supplies
+ * everything a radio group needs — arrow keys move between the options and select as they go, the
+ * group is one Tab stop, `Home` and `End` work, and selecting one option deselects the rest. None of
+ * that is reimplemented here, because reimplementing it is how radio groups get broken.
+ *
+ * That is also why this primitive takes no `options` array and knows nothing about its siblings:
+ * there is no state to coordinate. The Figma library has a `Radio` and a `Radio Item` but no group
+ * component; grouping semantics come from `FieldGroup`, which supplies the `<fieldset>` and
+ * `<legend>`.
+ *
+ * **Every rendered Radio must have an accessible name.** Use `RadioItem` for the ordinary labelled
+ * composition.
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioItemProps extends RadioProps {
+    /** The visible label. It is the radio's accessible name. */
+    label: ReactNode;
+    /** Supporting text below the label, connected with `aria-describedby`. */
+    description?: ReactNode;
+    /** Extra class on the item wrapper, not on the control. */
+    className?: string;
+}
+/**
+ * A radio button with its visible label, and optionally a description.
+ *
+ * The composition the Figma `Radio Item` component draws. The label is a real `<label>` associated by
+ * `for`/`id`, so clicking anywhere on it selects the option.
+ *
+ * Give every option in a group the same `name`. The label and description grow with their content;
+ * nothing sets a fixed height.
+ */
+export declare const RadioItem: import("react").ForwardRefExoticComponent<RadioItemProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,gFAAgF;AAChF,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAC9C,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAClD;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,KAAK,yGAehB,CAAC;AAEH,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,6GAuCpB,CAAC"}

package/dist/components/radio/radio.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useFieldIds } from '../../internal/field-support.js';
+/**
+ * A radio button. Renders a native `<input type="radio">`.
+ *
+ * **Grouping is native: radios that share a `name` are one group.** The browser then supplies
+ * everything a radio group needs — arrow keys move between the options and select as they go, the
+ * group is one Tab stop, `Home` and `End` work, and selecting one option deselects the rest. None of
+ * that is reimplemented here, because reimplementing it is how radio groups get broken.
+ *
+ * That is also why this primitive takes no `options` array and knows nothing about its siblings:
+ * there is no state to coordinate. The Figma library has a `Radio` and a `Radio Item` but no group
+ * component; grouping semantics come from `FieldGroup`, which supplies the `<fieldset>` and
+ * `<legend>`.
+ *
+ * **Every rendered Radio must have an accessible name.** Use `RadioItem` for the ordinary labelled
+ * composition.
+ */
+export const Radio = forwardRef(function Radio({ invalid = false, className, ...nativeProps }, ref) {
+    return (_jsx("input", { ...nativeProps, ref: ref, type: "radio", className: className === undefined ? 'lutra-radio' : `lutra-radio ${className}`, "data-invalid": invalid ? 'true' : undefined }));
+});
+/**
+ * A radio button with its visible label, and optionally a description.
+ *
+ * The composition the Figma `Radio Item` component draws. The label is a real `<label>` associated by
+ * `for`/`id`, so clicking anywhere on it selects the option.
+ *
+ * Give every option in a group the same `name`. The label and description grow with their content;
+ * nothing sets a fixed height.
+ */
+export const RadioItem = forwardRef(function RadioItem({ label, description, className, id, disabled = false, 'aria-describedby': describedBy, ...radioProps }, ref) {
+    const hasDescription = description !== undefined && description !== null && description !== false;
+    const ids = useFieldIds({ id, hasHint: hasDescription, hasError: false, describedBy });
+    return (_jsxs("div", { className: className === undefined ? 'lutra-choice' : `lutra-choice ${className}`, "data-disabled": disabled ? 'true' : undefined, children: [_jsx(Radio, { ...radioProps, ref: ref, id: ids.controlId, disabled: disabled, "aria-describedby": ids.describedBy }), _jsxs("div", { className: "lutra-choice__content", children: [_jsx("label", { className: "lutra-choice__label", htmlFor: ids.controlId, children: label }), hasDescription && (_jsx("p", { className: "lutra-choice__description", id: ids.hintId, children: description }))] })] }));
+});
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AA2B9D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,EAC9C,GAAG;IAEH,OAAO,CACL,mBACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,SAAS,EAAE,kBAGjE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC1C,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAWH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAmC,SAAS,SAAS,CACtF,EACE,KAAK,EACL,WAAW,EACX,SAAS,EACT,EAAE,EACF,QAAQ,GAAG,KAAK,EAChB,kBAAkB,EAAE,WAAW,EAC/B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,cAAc,GAAG,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,KAAK,CAAC;IAClG,MAAM,GAAG,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;IAEvF,OAAO,CACL,eACE,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,mBAClE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAE5C,KAAC,KAAK,OACA,UAAU,EACd,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,GAAG,CAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,sBACA,GAAG,CAAC,WAAW,GACjC,EACF,eAAK,SAAS,EAAC,uBAAuB,aACpC,gBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,CAAC,SAAS,YAC1D,KAAK,GACA,EACP,cAAc,IAAI,CACjB,YAAG,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAE,GAAG,CAAC,MAAM,YACpD,WAAW,GACV,CACL,IACG,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Select } from './select.js';
+export type { SelectProps, SelectSize } from './select.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/select/index.js

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

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

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

package/dist/components/select/select.d.ts

@@ -0,0 +1,67 @@
+import type { SelectHTMLAttributes } from 'react';
+/** Drawn size. Maps to the `size` axis of the Figma component set. */
+export type SelectSize = 'sm' | 'md' | 'lg';
+/**
+ * Native `<select>` attributes, minus the three this component redefines or refuses.
+ *
+ * Keeping the rest means `name`, `value`, `defaultValue`, `required`, `disabled`, `autoComplete`,
+ * `form`, `onChange`, every other `aria-*` and every `data-*` behave exactly as they do on a plain
+ * `<select>`.
+ *
+ * - `size` is redefined. The native attribute is the number of rows shown in a list box; Lutra's is
+ *   the design system's size scale, and that is the meaning a consumer of this library expects.
+ * - `multiple` is removed. It turns the control into a scrolling list box with a completely
+ *   different shape and interaction model, which the Figma component does not draw and this styling
+ *   would misrepresent. A multi-select need is a checkbox group or a component of its own.
+ * - `aria-invalid` is removed on purpose — see `invalid`.
+ */
+type NativeSelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'multiple' | 'aria-invalid'>;
+export interface SelectProps extends NativeSelectProps {
+    /**
+     * Drawn size.
+     *
+     * `'sm'` sets 14px text. Mobile Safari zooms the page when a focused control's text is below
+     * 16px, so prefer `'md'` for anything filled in on a phone.
+     *
+     * @default 'md'
+     */
+    size?: SelectSize;
+    /**
+     * Marks the selection as failing validation. Sets both the visual treatment and
+     * `aria-invalid="true"` from the one value, so they cannot disagree — the same contract Input
+     * uses. `aria-invalid` is therefore not accepted as a separate prop.
+     *
+     * Select owns the invalid state; the error message belongs to `SelectField`.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Stretches the control to the width of its container. Layout only.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+/**
+ * A single-choice dropdown. Renders a native `<select>`.
+ *
+ * Native on purpose, and not merely for convenience: the accessibility annotation describes an
+ * ordinary select, and the platform control brings typeahead, Home and End, the arrow-key model
+ * each platform expects, form participation, and — on touch devices — the system picker. A custom
+ * ARIA combobox would have to reimplement all of that to look the same, and would be worse at it.
+ * Nothing in the Figma component describes behaviour a `<select>` cannot provide.
+ *
+ * Options are the consumer's own `<option>` and `<optgroup>` elements, passed as children.
+ *
+ * Hover and focus are browser states expressed in CSS, not props. The only states Select models are
+ * the ones a consumer owns: `disabled`, `required` and `invalid`.
+ *
+ * **Every rendered Select must have an accessible name**, from a `<label htmlFor>` — normally
+ * supplied by `SelectField` — or from `aria-label` / `aria-labelledby`.
+ *
+ * `forwardRef` rather than a plain `ref` prop: this package supports React 18.3 as well as 19.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export {};
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,KAAK,iBAAiB,GAAG,IAAI,CAC3B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,cAAc,CACrC,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,MAAM,2GAuBjB,CAAC"}

package/dist/components/select/select.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * A single-choice dropdown. Renders a native `<select>`.
+ *
+ * Native on purpose, and not merely for convenience: the accessibility annotation describes an
+ * ordinary select, and the platform control brings typeahead, Home and End, the arrow-key model
+ * each platform expects, form participation, and — on touch devices — the system picker. A custom
+ * ARIA combobox would have to reimplement all of that to look the same, and would be worse at it.
+ * Nothing in the Figma component describes behaviour a `<select>` cannot provide.
+ *
+ * Options are the consumer's own `<option>` and `<optgroup>` elements, passed as children.
+ *
+ * Hover and focus are browser states expressed in CSS, not props. The only states Select models are
+ * the ones a consumer owns: `disabled`, `required` and `invalid`.
+ *
+ * **Every rendered Select must have an accessible name**, from a `<label htmlFor>` — normally
+ * supplied by `SelectField` — or from `aria-label` / `aria-labelledby`.
+ *
+ * `forwardRef` rather than a plain `ref` prop: this package supports React 18.3 as well as 19.
+ */
+export const Select = forwardRef(function Select({ size = 'md', invalid = false, fullWidth = false, className, children, ...nativeProps }, ref) {
+    return (_jsx("span", { className: "lutra-select-wrapper", "data-full-width": fullWidth ? 'true' : undefined, children: _jsx("select", { ...nativeProps, ref: ref, className: className === undefined ? 'lutra-select' : `lutra-select ${className}`, "aria-invalid": invalid || undefined, "data-size": size, "data-full-width": fullWidth ? 'true' : undefined, children: children }) }));
+});
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAqDnC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,EACxF,GAAG;IAEH,OAAO,CAKL,eAAM,SAAS,EAAC,sBAAsB,qBAAkB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YACpF,oBACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,kBAEnE,OAAO,IAAI,SAAS,eACvB,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAE9C,QAAQ,GACF,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

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

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

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

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

package/dist/components/select-field/select-field.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import type { FieldIndicator } from '../../internal/field-support.js';
+import type { SelectProps } from '../select/index.js';
+/**
+ * Select props that SelectField derives rather than forwards. `invalid` comes from `error`, exactly
+ * as it does in Field.
+ */
+type ForwardedSelectProps = Omit<SelectProps, 'invalid'>;
+export interface SelectFieldProps extends ForwardedSelectProps {
+    /** The visible label. Always required. */
+    label: ReactNode;
+    /** Supporting text shown above the control and connected with `aria-describedby`. */
+    hint?: ReactNode;
+    /**
+     * The error message. Its presence is what puts the field in the error state — it drives the red
+     * treatment, `aria-invalid` on the control, and the visible message together.
+     */
+    error?: ReactNode;
+    /**
+     * The word shown after the label text and included in the accessible name. Defaults to
+     * `'required'` when the native `required` attribute is set.
+     */
+    indicator?: FieldIndicator;
+    /** Extra class on the field wrapper, not on the control. */
+    className?: string;
+    /** The `<option>` and `<optgroup>` elements. */
+    children: ReactNode;
+}
+/**
+ * A labelled dropdown: label, optional hint, a `Select`, and an optional error message.
+ *
+ * Identical composition to `Field`, around a different control. Both render the same shell — the
+ * same label element, the same indicator placement, the same id derivation, the same
+ * `aria-describedby` assembly — so a text field and a dropdown behave and read the same way in a
+ * form, and a change to that behaviour lands in one place.
+ *
+ * Everything not listed above is forwarded to `Select`, so `name`, `value`, `defaultValue`,
+ * `required`, `onChange`, `size` and `fullWidth` behave as they do there. A `ref` reaches the native
+ * `<select>`.
+ */
+export declare const SelectField: import("react").ForwardRefExoticComponent<SelectFieldProps & import("react").RefAttributes<HTMLSelectElement>>;
+export {};
+//# sourceMappingURL=select-field.d.ts.map

package/dist/components/select-field/select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../src/components/select-field/select-field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,gHA+CtB,CAAC"}

package/dist/components/select-field/select-field.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { FieldShell, useFieldIds } from '../../internal/field-support.js';
+import { Select } from '../select/index.js';
+/**
+ * A labelled dropdown: label, optional hint, a `Select`, and an optional error message.
+ *
+ * Identical composition to `Field`, around a different control. Both render the same shell — the
+ * same label element, the same indicator placement, the same id derivation, the same
+ * `aria-describedby` assembly — so a text field and a dropdown behave and read the same way in a
+ * form, and a change to that behaviour lands in one place.
+ *
+ * Everything not listed above is forwarded to `Select`, so `name`, `value`, `defaultValue`,
+ * `required`, `onChange`, `size` and `fullWidth` behave as they do there. A `ref` reaches the native
+ * `<select>`.
+ */
+export const SelectField = forwardRef(function SelectField({ label, hint, error, indicator, className, id, required = false, disabled = false, 'aria-describedby': describedBy, children, ...selectProps }, ref) {
+    const hasHint = hint !== undefined && hint !== null && hint !== false;
+    const hasError = error !== undefined && error !== null && error !== false;
+    const ids = useFieldIds({ id, hasHint, hasError, describedBy });
+    const resolvedIndicator = indicator ?? (required ? 'required' : 'none');
+    return (_jsx(FieldShell, { controlId: ids.controlId, label: label, indicator: resolvedIndicator, hint: hint, hintId: ids.hintId, error: error, errorId: ids.errorId, disabled: disabled, className: className, children: _jsx(Select, { ...selectProps, ref: ref, id: ids.controlId, required: required, disabled: disabled, invalid: hasError, "aria-describedby": ids.describedBy, children: children }) }));
+});
+//# sourceMappingURL=select-field.js.map

package/dist/components/select-field/select-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","sourceRoot":"","sources":["../../../src/components/select-field/select-field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AA8B5C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAsC,SAAS,WAAW,CAC7F,EACE,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,SAAS,EACT,EAAE,EACF,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,kBAAkB,EAAE,WAAW,EAC/B,QAAQ,EACR,GAAG,WAAW,EACf,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,CAAC;IACtE,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAE1E,MAAM,GAAG,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAC;IAChE,MAAM,iBAAiB,GAAmB,SAAS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAExF,OAAO,CACL,KAAC,UAAU,IACT,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,CAAC,OAAO,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,YAEpB,KAAC,MAAM,OACD,WAAW,EACf,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,GAAG,CAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,sBACC,GAAG,CAAC,WAAW,YAEhC,QAAQ,GACF,GACE,CACd,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Table, TableRow, TableHeaderCell, TableCell, TableSelectionCell, TableRowActions, TableEmptyState, } from './table.js';
+export type { TableProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableSelectionCellProps, TableRowActionsProps, TableEmptyStateProps, TableAlign, TableSortState, } from './table.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,UAAU,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,UAAU,EACV,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/components/table/index.js

@@ -0,0 +1,2 @@
+export { Table, TableRow, TableHeaderCell, TableCell, TableSelectionCell, TableRowActions, TableEmptyState, } from './table.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC"}