@lutra-ui-system/react 0.1.0

package/dist/components/tooltip/index.js

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

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

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

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,74 @@
+import type { FocusEvent, KeyboardEvent, PointerEvent, ReactElement, ReactNode } from 'react';
+/** Side of the trigger the tooltip prefers. Maps to the `placement` axis of the Figma set. */
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/** Alignment along that side. Maps to the `align` axis of the Figma set. */
+export type TooltipAlign = 'start' | 'center' | 'end';
+/**
+ * Props the tooltip merges onto its trigger. The trigger must forward them to a DOM element.
+ *
+ * Every member admits `undefined` explicitly because `exactOptionalPropertyTypes` is on: clearing
+ * `aria-describedby` when the tooltip closes means passing `undefined`, and an optional property
+ * that cannot hold `undefined` would reject exactly that.
+ */
+interface TriggerProps {
+    'aria-describedby'?: string | undefined;
+    onPointerEnter?: ((event: PointerEvent<HTMLElement>) => void) | undefined;
+    onPointerLeave?: ((event: PointerEvent<HTMLElement>) => void) | undefined;
+    onFocus?: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+    onBlur?: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+    onKeyDown?: ((event: KeyboardEvent<HTMLElement>) => void) | undefined;
+}
+export interface TooltipProps {
+    /**
+     * The tooltip text. **Supplementary only.**
+     *
+     * Nothing essential belongs here: touch devices have no hover, so anything that matters must also
+     * exist in visible text, help text, or the control's own name. Never put links or buttons in it —
+     * the tooltip cannot be reached to use them.
+     */
+    content: ReactNode;
+    /**
+     * The trigger. A single element that forwards props to a DOM node, and that already has its own
+     * accessible name — the tooltip describes a control, it never names one.
+     */
+    children: ReactElement<TriggerProps>;
+    /** @default 'top' */
+    placement?: TooltipPlacement;
+    /** @default 'center' */
+    align?: TooltipAlign;
+    /**
+     * Milliseconds before an open triggered by pointer or focus takes effect. From the Figma API
+     * contract. Closing is always immediate.
+     *
+     * @default 120
+     */
+    delay?: number;
+    /** Extra class on the tooltip surface. */
+    className?: string;
+}
+/**
+ * Supplementary information anchored to a trigger.
+ *
+ * The contract comes from the Figma API note and the accessibility annotation, and is deliberately
+ * narrow:
+ *
+ * - **It opens on focus as well as hover.** A tooltip that only answers to the pointer is invisible
+ *   to keyboard users, which is the single most common way this component is got wrong.
+ * - **It is connected with `aria-describedby`, and only while open**, so it is announced after the
+ *   trigger's own name rather than instead of it. It never supplies the name: a control that needs a
+ *   tooltip to be identifiable is a control that needs a label.
+ * - **Escape dismisses it** and focus stays on the trigger.
+ * - **It is never a tab stop and never traps focus.** There is no backdrop.
+ * - **It holds no interactive content.** If content needs to be operated, it is not a tooltip.
+ *
+ * `placement` and `align` are a preference. When there is not enough room on the preferred side the
+ * tooltip flips to the opposite one, which is the whole of the positioning logic — no dependency,
+ * and no attempt at a general floating-element engine.
+ *
+ * The trigger is cloned so the describedby relationship and the open/close handlers can be attached
+ * to the real focusable element. Existing values are merged rather than replaced: a consumer's own
+ * `aria-describedby` and handlers keep working.
+ */
+export declare function Tooltip({ content, children, placement, align, delay, className, }: TooltipProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9F,8FAA8F;AAC9F,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,4EAA4E;AAC5E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD;;;;;;GAMG;AACH,UAAU,YAAY;IACpB,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1E,cAAc,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1E,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjE,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChE,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACvE;AAED,MAAM,WAAW,YAAY;IAC3B;;;;;;OAMG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACrC,qBAAqB;IACrB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,wBAAwB;IACxB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAeD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAgB,EAChB,KAAW,EACX,SAAS,GACV,EAAE,YAAY,+BAkLd"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { isDevelopment } from '../../internal/development.js';
+/** Everything a tooltip must not contain, because none of it can be reached inside one. */
+const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex], [contenteditable="true"]';
+/**
+ * How long the pointer may be over neither the trigger nor the tooltip before it closes.
+ *
+ * NO FIGMA VARIABLE, and not the same thing as `delay`: this is the time it takes to cross the 8px
+ * gap between the trigger and the tooltip, not a deliberate wait. It is the smallest value that
+ * makes the crossing reliable — long enough to survive the pointer being over neither element for a
+ * frame or two, short enough that a tooltip left behind does not linger.
+ */
+const POINTER_GRACE = 150;
+/**
+ * Supplementary information anchored to a trigger.
+ *
+ * The contract comes from the Figma API note and the accessibility annotation, and is deliberately
+ * narrow:
+ *
+ * - **It opens on focus as well as hover.** A tooltip that only answers to the pointer is invisible
+ *   to keyboard users, which is the single most common way this component is got wrong.
+ * - **It is connected with `aria-describedby`, and only while open**, so it is announced after the
+ *   trigger's own name rather than instead of it. It never supplies the name: a control that needs a
+ *   tooltip to be identifiable is a control that needs a label.
+ * - **Escape dismisses it** and focus stays on the trigger.
+ * - **It is never a tab stop and never traps focus.** There is no backdrop.
+ * - **It holds no interactive content.** If content needs to be operated, it is not a tooltip.
+ *
+ * `placement` and `align` are a preference. When there is not enough room on the preferred side the
+ * tooltip flips to the opposite one, which is the whole of the positioning logic — no dependency,
+ * and no attempt at a general floating-element engine.
+ *
+ * The trigger is cloned so the describedby relationship and the open/close handlers can be attached
+ * to the real focusable element. Existing values are merged rather than replaced: a consumer's own
+ * `aria-describedby` and handlers keep working.
+ */
+export function Tooltip({ content, children, placement = 'top', align = 'center', delay = 120, className, }) {
+    const id = `lutra-tooltip-${useId()}`;
+    const [open, setOpen] = useState(false);
+    const [resolvedPlacement, setResolvedPlacement] = useState(placement);
+    const wrapperRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const openTimer = useRef(undefined);
+    const closeTimer = useRef(undefined);
+    const cancelPendingOpen = useCallback(() => {
+        if (openTimer.current !== undefined) {
+            clearTimeout(openTimer.current);
+            openTimer.current = undefined;
+        }
+    }, []);
+    const cancelPendingClose = useCallback(() => {
+        if (closeTimer.current !== undefined) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = undefined;
+        }
+    }, []);
+    const openAfterDelay = useCallback(() => {
+        cancelPendingClose();
+        cancelPendingOpen();
+        openTimer.current = setTimeout(() => {
+            setOpen(true);
+        }, delay);
+    }, [cancelPendingClose, cancelPendingOpen, delay]);
+    const closeNow = useCallback(() => {
+        cancelPendingOpen();
+        cancelPendingClose();
+        setOpen(false);
+    }, [cancelPendingClose, cancelPendingOpen]);
+    /**
+     * Closes after a grace period rather than at once, which is what makes the tooltip hoverable.
+     *
+     * WCAG 2.2 SC 1.4.13 requires content shown on hover to stay visible while the pointer is on it,
+     * so the pointer has to be able to leave the trigger, cross the gap and land on the tooltip
+     * without it vanishing on the way. Entering either the trigger or the tooltip cancels the pending
+     * close; leaving both lets it run.
+     */
+    const closeAfterGrace = useCallback(() => {
+        cancelPendingOpen();
+        cancelPendingClose();
+        closeTimer.current = setTimeout(() => {
+            setOpen(false);
+        }, POINTER_GRACE);
+    }, [cancelPendingClose, cancelPendingOpen]);
+    // A pending open or close must not fire after the component has gone.
+    useEffect(() => () => {
+        cancelPendingOpen();
+        cancelPendingClose();
+    }, [cancelPendingClose, cancelPendingOpen]);
+    // Flip to the opposite side when the preferred one does not fit. Measured once per open, against
+    // the viewport, which is as far as the contract asks positioning to go.
+    useEffect(() => {
+        if (!open) {
+            setResolvedPlacement(placement);
+            return;
+        }
+        const trigger = wrapperRef.current;
+        const tooltip = tooltipRef.current;
+        if (!trigger || !tooltip)
+            return;
+        const anchor = trigger.getBoundingClientRect();
+        const box = tooltip.getBoundingClientRect();
+        const room = {
+            top: anchor.top,
+            bottom: window.innerHeight - anchor.bottom,
+            left: anchor.left,
+            right: window.innerWidth - anchor.right,
+        };
+        const opposite = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+        const needed = placement === 'top' || placement === 'bottom' ? box.height : box.width;
+        setResolvedPlacement(room[placement] < needed && room[opposite[placement]] >= needed
+            ? opposite[placement]
+            : placement);
+    }, [open, placement]);
+    // Interactive content cannot be reached inside a tooltip, so it is a defect rather than a
+    // variation. The type system cannot see into `content`, so this is checked at runtime in
+    // development, the same way Button checks its icon-only content.
+    useEffect(() => {
+        if (!isDevelopment || !open)
+            return;
+        if (tooltipRef.current?.querySelector(FOCUSABLE)) {
+            console.warn('Tooltip: interactive content found inside a tooltip. A tooltip cannot be reached to ' +
+                'operate it — move links, buttons and fields into the page, or use a different component.');
+        }
+    }, [open]);
+    if (isDevelopment && !isValidElement(children)) {
+        console.warn('Tooltip: `children` must be a single element that forwards props to a DOM node.');
+    }
+    const triggerProps = children.props;
+    const trigger = cloneElement(children, {
+        // Merged, not replaced: a consumer's own description keeps working alongside this one, and the
+        // relationship exists only while the tooltip is open.
+        'aria-describedby': [triggerProps['aria-describedby'], open ? id : undefined].filter(Boolean).join(' ') ||
+            undefined,
+        onPointerEnter: (event) => {
+            triggerProps.onPointerEnter?.(event);
+            openAfterDelay();
+        },
+        onPointerLeave: (event) => {
+            triggerProps.onPointerLeave?.(event);
+            // Not immediate: the pointer has to be able to reach the tooltip. See `closeAfterGrace`.
+            closeAfterGrace();
+        },
+        onFocus: (event) => {
+            triggerProps.onFocus?.(event);
+            openAfterDelay();
+        },
+        onBlur: (event) => {
+            // Focus is discrete — it does not travel across a gap — so losing it closes at once.
+            triggerProps.onBlur?.(event);
+            closeNow();
+        },
+        onKeyDown: (event) => {
+            triggerProps.onKeyDown?.(event);
+            if (event.key !== 'Escape')
+                return;
+            // Nothing is showing, so the press is not this component's to take. Cancelling it here would
+            // stop an ancestor dialog closing for no reason.
+            if (!open)
+                return;
+            // Escape dismisses the tooltip while focus stays where it is.
+            //
+            // `preventDefault()` is what keeps one press to one layer. Escape reaching a native modal
+            // `<dialog>` is a *close request*, and the close-request algorithm only runs the close watcher
+            // when the keydown was not cancelled — so cancelling it here is the platform's own way of
+            // saying this press has been spent, and no shared state is needed to say it.
+            //
+            // Propagation is deliberately left alone. A tooltip is not a layer that owns the keyboard, and
+            // nothing else in this library needs to be shielded from a press a tooltip handled.
+            event.preventDefault();
+            closeNow();
+        },
+    });
+    return (_jsxs("span", { className: "lutra-tooltip-wrapper", ref: wrapperRef, children: [trigger, open && (_jsx("span", { ref: tooltipRef, id: id, role: "tooltip", className: className === undefined ? 'lutra-tooltip' : `lutra-tooltip ${className}`, "data-placement": resolvedPlacement, "data-align": align, 
+                // The tooltip is hoverable: reaching it keeps it open, and leaving it starts the same
+                // grace period as leaving the trigger. Required by SC 1.4.13, and the reason the surface
+                // no longer sets `pointer-events: none`.
+                onPointerEnter: cancelPendingClose, onPointerLeave: closeAfterGrace, children: content }))] }));
+}
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The public API of `@lutra-ui-system/react`.
+ *
+ * Everything a consumer is allowed to import is named here explicitly. Adding
+ * an export is a deliberate, reviewed act: once a name leaves this file it is
+ * a supported part of the library's contract. Do not re-export whole modules
+ * with `export *`, and do not export internal helpers or types that only exist
+ * to support an implementation.
+ *
+ * Exports come from each component's own `index.ts` barrel, never from a
+ * component implementation file directly.
+ *
+ * Consumers must also import the stylesheet once, from `@lutra-ui-system/react/styles.css`.
+ * The package never imports CSS from JavaScript, so the stylesheet cannot be
+ * pulled into a server bundle by accident.
+ *
+ * See `docs/engineering-guidelines.md` for the rules that govern this file.
+ */
+export { Button } from './components/button/index.js';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonContentType, } from './components/button/index.js';
+export { Dialog } from './components/dialog/index.js';
+export type { DialogProps, DialogSize, DialogInitialFocus } from './components/dialog/index.js';
+export { Dropdown, DropdownItem, DropdownSeparator } from './components/dropdown/index.js';
+export type { DropdownProps, DropdownItemProps } from './components/dropdown/index.js';
+export { Tooltip } from './components/tooltip/index.js';
+export type { TooltipProps, TooltipPlacement, TooltipAlign } from './components/tooltip/index.js';
+export { Link } from './components/link/index.js';
+export type { LinkProps, LinkVariant } from './components/link/index.js';
+export { NavigationItem } from './components/navigation-item/index.js';
+export type { NavigationItemProps } from './components/navigation-item/index.js';
+export { MobileNavigation } from './components/mobile-navigation/index.js';
+export type { MobileNavigationProps, MobileNavigationAlign, } from './components/mobile-navigation/index.js';
+export { Card, CardFooter } from './components/card/index.js';
+export type { CardProps, CardElevation, CardFooterProps, CardFooterAlign, HeadingLevel, } from './components/card/index.js';
+export { LinkCard } from './components/link-card/index.js';
+export type { LinkCardProps } from './components/link-card/index.js';
+export { Table, TableRow, TableHeaderCell, TableCell, TableSelectionCell, TableRowActions, TableEmptyState, } from './components/table/index.js';
+export type { TableProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableSelectionCellProps, TableRowActionsProps, TableEmptyStateProps, TableAlign, TableSortState, } from './components/table/index.js';
+export { ErrorSummary } from './components/error-summary/index.js';
+export type { ErrorSummaryProps, ErrorSummaryItem } from './components/error-summary/index.js';
+export { Input } from './components/input/index.js';
+export type { InputProps, InputSize, InputType } from './components/input/index.js';
+export { Select } from './components/select/index.js';
+export type { SelectProps, SelectSize } from './components/select/index.js';
+export { Field } from './components/field/index.js';
+export type { FieldProps, FieldIndicator } from './components/field/index.js';
+export { Checkbox, CheckboxItem } from './components/checkbox/index.js';
+export type { CheckboxProps, CheckboxItemProps } from './components/checkbox/index.js';
+export { Radio, RadioItem } from './components/radio/index.js';
+export type { RadioProps, RadioItemProps } from './components/radio/index.js';
+export { Toggle, ToggleItem } from './components/toggle/index.js';
+export type { ToggleProps, ToggleItemProps } from './components/toggle/index.js';
+export { FieldGroup } from './components/field-group/index.js';
+export type { FieldGroupProps } from './components/field-group/index.js';
+export { SelectField } from './components/select-field/index.js';
+export type { SelectFieldProps } from './components/select-field/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1,38 @@
+/**
+ * The public API of `@lutra-ui-system/react`.
+ *
+ * Everything a consumer is allowed to import is named here explicitly. Adding
+ * an export is a deliberate, reviewed act: once a name leaves this file it is
+ * a supported part of the library's contract. Do not re-export whole modules
+ * with `export *`, and do not export internal helpers or types that only exist
+ * to support an implementation.
+ *
+ * Exports come from each component's own `index.ts` barrel, never from a
+ * component implementation file directly.
+ *
+ * Consumers must also import the stylesheet once, from `@lutra-ui-system/react/styles.css`.
+ * The package never imports CSS from JavaScript, so the stylesheet cannot be
+ * pulled into a server bundle by accident.
+ *
+ * See `docs/engineering-guidelines.md` for the rules that govern this file.
+ */
+export { Button } from './components/button/index.js';
+export { Dialog } from './components/dialog/index.js';
+export { Dropdown, DropdownItem, DropdownSeparator } from './components/dropdown/index.js';
+export { Tooltip } from './components/tooltip/index.js';
+export { Link } from './components/link/index.js';
+export { NavigationItem } from './components/navigation-item/index.js';
+export { MobileNavigation } from './components/mobile-navigation/index.js';
+export { Card, CardFooter } from './components/card/index.js';
+export { LinkCard } from './components/link-card/index.js';
+export { Table, TableRow, TableHeaderCell, TableCell, TableSelectionCell, TableRowActions, TableEmptyState, } from './components/table/index.js';
+export { ErrorSummary } from './components/error-summary/index.js';
+export { Input } from './components/input/index.js';
+export { Select } from './components/select/index.js';
+export { Field } from './components/field/index.js';
+export { Checkbox, CheckboxItem } from './components/checkbox/index.js';
+export { Radio, RadioItem } from './components/radio/index.js';
+export { Toggle, ToggleItem } from './components/toggle/index.js';
+export { FieldGroup } from './components/field-group/index.js';
+export { SelectField } from './components/select-field/index.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAQtD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGtD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAG3F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAGxD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAM3E,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAS9D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAG3D,OAAO,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,6BAA6B,CAAC;AAarC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAGnE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAGpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGtD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGxE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAG/D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAGlE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/internal/development.d.ts

@@ -0,0 +1,2 @@
+export declare const isDevelopment: boolean;
+//# sourceMappingURL=development.d.ts.map

package/dist/internal/development.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"development.d.ts","sourceRoot":"","sources":["../../src/internal/development.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,aAAa,SACiD,CAAC"}

package/dist/internal/development.js

@@ -0,0 +1,2 @@
+export const isDevelopment = typeof process === 'undefined' || process?.env?.NODE_ENV !== 'production';
+//# sourceMappingURL=development.js.map

package/dist/internal/development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"development.js","sourceRoot":"","sources":["../../src/internal/development.ts"],"names":[],"mappings":"AAqBA,MAAM,CAAC,MAAM,aAAa,GACxB,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,EAAE,GAAG,EAAE,QAAQ,KAAK,YAAY,CAAC"}

package/dist/internal/field-support.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+/**
+ * The label, indicator, hint and error scaffolding shared by `Field` and `SelectField`.
+ *
+ * This exists because two components need identical composition around different controls — two
+ * real call sites, which is the bar the guidelines set for extracting anything. It is deliberately
+ * not a form-control framework: it knows nothing about the control it wraps, has no registry, no
+ * context and no validation, and it renders the control as `children`. A third control that needs
+ * the same shell should use it; a control that needs something different should not be forced
+ * through it.
+ *
+ * Nothing here is exported from the package root.
+ */
+/** Which word, if any, appears after the label text. */
+export type FieldIndicator = 'none' | 'required' | 'optional';
+interface FieldIdsInput {
+    /** Consumer-supplied control id, if any. */
+    id: string | undefined;
+    hasHint: boolean;
+    hasError: boolean;
+    /** Anything the consumer already pointed the control at. */
+    describedBy: string | undefined;
+}
+export interface FieldIds {
+    controlId: string;
+    hintId: string | undefined;
+    errorId: string | undefined;
+    /** The full `aria-describedby` value, or undefined when there is nothing to describe. */
+    describedBy: string | undefined;
+}
+/**
+ * Derives the ids that tie a field's parts together.
+ *
+ * `useId` rather than a counter or a random value: it is stable across re-renders and consistent
+ * between the server and client render, so hydration does not mismatch. A render-time random id
+ * would break both.
+ *
+ * The consumer's own `aria-describedby` is preserved and listed first, not replaced. A field that
+ * silently dropped a relationship the consumer established — a shared format note, a character
+ * counter — would be a data-loss bug that only shows up in a screen reader.
+ */
+export declare function useFieldIds({ id, hasHint, hasError, describedBy }: FieldIdsInput): FieldIds;
+interface FieldShellProps {
+    controlId: string;
+    label: ReactNode;
+    indicator: FieldIndicator;
+    hint: ReactNode;
+    hintId: string | undefined;
+    error: ReactNode;
+    errorId: string | undefined;
+    disabled: boolean;
+    className: string | undefined;
+    /** The control itself, already wired with the ids this shell produced. */
+    children: ReactNode;
+}
+/**
+ * Renders the visible parts around a control, in the documented order:
+ * label → hint → control → error.
+ *
+ * The hint sits above the control so it is read before the control is operated; the error sits
+ * below it, which is where the Figma annotation places it and where Field Group puts its own.
+ *
+ * The indicator word is rendered *inside* the `<label>`, so it becomes part of the accessible name
+ * and is announced with it rather than being a separate visual flourish the label does not carry.
+ */
+export declare function FieldShell({ controlId, label, indicator, hint, hintId, error, errorId, disabled, className, children, }: FieldShellProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=field-support.d.ts.map

package/dist/internal/field-support.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-support.d.ts","sourceRoot":"","sources":["../../src/internal/field-support.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;GAWG;AAEH,wDAAwD;AACxD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,UAAU,aAAa;IACrB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,yFAAyF;IACzF,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,GAAG,QAAQ,CAiB3F;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAmCjB"}

package/dist/internal/field-support.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+/**
+ * Derives the ids that tie a field's parts together.
+ *
+ * `useId` rather than a counter or a random value: it is stable across re-renders and consistent
+ * between the server and client render, so hydration does not mismatch. A render-time random id
+ * would break both.
+ *
+ * The consumer's own `aria-describedby` is preserved and listed first, not replaced. A field that
+ * silently dropped a relationship the consumer established — a shared format note, a character
+ * counter — would be a data-loss bug that only shows up in a screen reader.
+ */
+export function useFieldIds({ id, hasHint, hasError, describedBy }) {
+    const generated = useId();
+    const controlId = id ?? `lutra-field-${generated}`;
+    const hintId = hasHint ? `${controlId}-hint` : undefined;
+    const errorId = hasError ? `${controlId}-error` : undefined;
+    // Order matters: the consumer's own description first, then the hint, then the error. A screen
+    // reader reads them in this order, and the error is the thing to leave ringing in the ear.
+    const parts = [describedBy, hintId, errorId].filter((part) => Boolean(part));
+    return {
+        controlId,
+        hintId,
+        errorId,
+        describedBy: parts.length > 0 ? parts.join(' ') : undefined,
+    };
+}
+/**
+ * Renders the visible parts around a control, in the documented order:
+ * label → hint → control → error.
+ *
+ * The hint sits above the control so it is read before the control is operated; the error sits
+ * below it, which is where the Figma annotation places it and where Field Group puts its own.
+ *
+ * The indicator word is rendered *inside* the `<label>`, so it becomes part of the accessible name
+ * and is announced with it rather than being a separate visual flourish the label does not carry.
+ */
+export function FieldShell({ controlId, label, indicator, hint, hintId, error, errorId, disabled, className, children, }) {
+    return (_jsxs("div", { className: className === undefined ? 'lutra-field' : `lutra-field ${className}`, "data-invalid": error ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, children: [_jsxs("label", { className: "lutra-field__label", htmlFor: controlId, children: [label, indicator !== 'none' && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "lutra-field__indicator", "data-indicator": indicator, children: indicator === 'required' ? 'Required' : 'Optional' })] }))] }), hint !== undefined && hint !== null && hint !== false && (_jsx("p", { className: "lutra-field__hint", id: hintId, children: hint })), children, error !== undefined && error !== null && error !== false && (_jsx("p", { className: "lutra-field__error", id: errorId, children: error }))] }));
+}
+//# sourceMappingURL=field-support.js.map

package/dist/internal/field-support.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-support.js","sourceRoot":"","sources":["../../src/internal/field-support.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAoC9B;;;;;;;;;;GAUG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAiB;IAC/E,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,SAAS,GAAG,EAAE,IAAI,eAAe,SAAS,EAAE,CAAC;IAEnD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5D,+FAA+F;IAC/F,2FAA2F;IAC3F,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAkB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7F,OAAO;QACL,SAAS;QACT,MAAM;QACN,OAAO;QACP,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;KAC5D,CAAC;AACJ,CAAC;AAgBD;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACQ;IAChB,OAAO,CACL,eACE,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,SAAS,EAAE,kBACjE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBACzB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAE5C,iBAAO,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,SAAS,aACrD,KAAK,EACL,SAAS,KAAK,MAAM,IAAI,CACvB,8BAEyF,GAAG,EAC1F,eAAM,SAAS,EAAC,wBAAwB,oBAAiB,SAAS,YAC/D,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAC9C,IACN,CACJ,IACK,EAEP,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,IAAI,CACxD,YAAG,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,MAAM,YACxC,IAAI,GACH,CACL,EAEA,QAAQ,EAER,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,CAC3D,YAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,OAAO,YAC1C,KAAK,GACJ,CACL,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/internal/isomorphic-layout-effect.d.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server.
+ *
+ * Some DOM state has no HTML attribute behind it and can only be assigned to the element — a
+ * checkbox's `indeterminate` property is the example this library has. Writing it during render
+ * would be a side effect in the render phase, which React is entitled to run more than once, to
+ * abandon, or to replay; it has to happen after the DOM exists instead.
+ *
+ * `useLayoutEffect` is the right one of the two, because it runs before the browser paints. With
+ * `useEffect` there is a frame in which the element is on screen without the property set, and for
+ * `indeterminate` that frame shows the wrong control — a tick or an empty box where a dash belongs.
+ *
+ * The catch is that React warns when `useLayoutEffect` runs during server rendering, where there is
+ * no layout to read and nothing to paint. This package must render on a server without complaint,
+ * so the hook is chosen once, at module scope, from whether a document exists.
+ *
+ * The `typeof` guard matters for the same reason it does in `development.ts`: `document` is not
+ * defined in a plain Node process, and an unguarded reference would throw while the module is being
+ * evaluated. Choosing between the two hooks once, rather than per render, keeps the rules of hooks
+ * satisfied — the same hook is called on every render of a given component.
+ *
+ * Nothing here is exported from the package root.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+//# sourceMappingURL=isomorphic-layout-effect.d.ts.map

package/dist/internal/isomorphic-layout-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isomorphic-layout-effect.d.ts","sourceRoot":"","sources":["../../src/internal/isomorphic-layout-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,kBACyB,CAAC"}

package/dist/internal/isomorphic-layout-effect.js

@@ -0,0 +1,26 @@
+import { useEffect, useLayoutEffect } from 'react';
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server.
+ *
+ * Some DOM state has no HTML attribute behind it and can only be assigned to the element — a
+ * checkbox's `indeterminate` property is the example this library has. Writing it during render
+ * would be a side effect in the render phase, which React is entitled to run more than once, to
+ * abandon, or to replay; it has to happen after the DOM exists instead.
+ *
+ * `useLayoutEffect` is the right one of the two, because it runs before the browser paints. With
+ * `useEffect` there is a frame in which the element is on screen without the property set, and for
+ * `indeterminate` that frame shows the wrong control — a tick or an empty box where a dash belongs.
+ *
+ * The catch is that React warns when `useLayoutEffect` runs during server rendering, where there is
+ * no layout to read and nothing to paint. This package must render on a server without complaint,
+ * so the hook is chosen once, at module scope, from whether a document exists.
+ *
+ * The `typeof` guard matters for the same reason it does in `development.ts`: `document` is not
+ * defined in a plain Node process, and an unguarded reference would throw while the module is being
+ * evaluated. Choosing between the two hooks once, rather than per render, keeps the rules of hooks
+ * satisfied — the same hook is called on every render of a given component.
+ *
+ * Nothing here is exported from the package root.
+ */
+export const useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+//# sourceMappingURL=isomorphic-layout-effect.js.map

package/dist/internal/isomorphic-layout-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isomorphic-layout-effect.js","sourceRoot":"","sources":["../../src/internal/isomorphic-layout-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,yBAAyB,GACpC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC"}