@lo-tek/interfaces 0.0.0 → 0.38.0

package/dist/react.d.ts

@@ -0,0 +1,494 @@
+import { tableSort } from "./components/css/table/table.js";
+import { dialog } from "./components/frame/dialog/dialog.js";
+import { errorSummary } from "./components/frame/error-summary/error-summary.js";
+import { createFieldId, type FieldOptions } from "./components/frame/field/field-core.js";
+import { popover } from "./components/frame/popover/popover.js";
+import { sessionTimeout } from "./components/frame/session-timeout/session-timeout.js";
+import { suggestion } from "./components/frame/suggestion/suggestion.js";
+import { type TabsWithStateOptions } from "./components/frame/tabs/tabs.js";
+import { toast } from "./components/standalone/toast/toast.js";
+export type { LtEventMap } from "./components/events.js";
+/**
+ * The same API as `lt`, but with `className` and `htmlFor`.
+ *
+ * The rest of the system returns `class` and `for`, as the attributes are
+ * actually named in HTML. React accepts them, and they end up correctly in
+ * the DOM, but the development build writes "Invalid DOM property `class`.
+ * Did you mean `className`?" to the console, once for each attribute name. It
+ * is noise in every app that uses the components, and it teaches the reader
+ * to ignore the console.
+ *
+ * ```ts
+ * import { lt } from "@lo-tek/interfaces/react"
+ *
+ * <button {...lt.button({ variant: "secondary" })}>Save draft</button>
+ * ```
+ *
+ * The call sites are identical to the rest of the system; only the import
+ * path differs. This is a plain renaming of keys, so the package gets no
+ * dependency on React from it.
+ *
+ * Astro and plain HTML take `class` and `for` as they are. There you use
+ * `@lo-tek/interfaces` directly.
+ */
+/**
+ * Gives the keys the names React expects, and the values the types React
+ * expects.
+ *
+ * `tabindex` is not only a different name: in HTML the value is a string, and
+ * in React `tabIndex` is a number. When we left the string, `lt.tabs()` came
+ * out with `tabIndex: "0"`, and TypeScript rejected it in every React app. It
+ * worked in the browser, since React converts the value itself, so the bug
+ * only showed up as a type error for the consumer.
+ */
+export type ReactAttributes<T> = {
+    [K in keyof T as K extends "class" ? "className" : K extends "for" ? "htmlFor" : K extends "tabindex" ? "tabIndex" : K extends "autocomplete" ? "autoComplete" : K]: K extends "tabindex" ? number : T[K];
+};
+export declare function toReactAttributes<T extends Record<string, unknown>>(attributes: T): ReactAttributes<T>;
+/**
+ * A set as the builder functions here return it, with `className`,
+ * `htmlFor` and `tabIndex` as a number.
+ */
+export type ReactSet = Record<string, string | number | boolean | undefined>;
+/**
+ * Like `lt.setAttributes` in the main entry point, for the sets from here.
+ *
+ * A React app reaches the DOM through a `ref`, and then naturally uses `lt`
+ * from this entry point. Passed straight to the main entry point's
+ * `setAttributes`, `className` became the attribute `classname`, and the
+ * cleanup did not find the builder function behind the set. Here the names
+ * are translated back first.
+ */
+export declare function setAttributes(element: Element | null | undefined, ...sets: ReactSet[]): void;
+/**
+ * Re-exported from the main entry point.
+ *
+ * `field.mdx` points to it in a section that tells the reader to import from
+ * `@lo-tek/interfaces/react`, and without this a React consumer who follows
+ * the advice gets "createFieldId is not exported". It is safe only when the
+ * markup is rendered once; in a React component `useId()` is the answer,
+ * also in an app without a server.
+ */
+export { createFieldId };
+export declare const lt: {
+    readonly accordion: ((options?: import("./index.js").AccordionOptions | undefined) => ReactAttributes<import("./index.js").AccordionAttributes>) & (({ variant }?: import("./index.js").AccordionOptions) => import("./index.js").AccordionAttributes) & {
+        content: "lt-accordion__content";
+        variants: readonly ["default", "plain"];
+        isVariant: (value: string) => value is "default" | "plain";
+    };
+    readonly alert: ((options?: import("./index.js").AlertOptions | undefined) => ReactAttributes<import("./index.js").AlertAttributes>) & (({ color }?: import("./index.js").AlertOptions) => import("./index.js").AlertAttributes) & {
+        title: "lt-alert__title";
+        colors: readonly ["info", "success", "warning", "danger"];
+        isColor: (value: string) => value is "warning" | "info" | "success" | "danger";
+    };
+    readonly avatar: ((options?: import("./index.js").AvatarOptions | undefined) => ReactAttributes<import("./index.js").AvatarAttributes>) & (({ size, variant, }?: import("./index.js").AvatarOptions) => import("./index.js").AvatarAttributes) & {
+        stack: "lt-avatar-stack";
+        sizes: readonly ["small", "medium", "large"];
+        isSize: (value: string) => value is "small" | "medium" | "large";
+        variants: readonly ["circle", "square"];
+        isVariant: (value: string) => value is "circle" | "square";
+    };
+    readonly badge: ((options?: import("./index.js").BadgeOptions | undefined) => ReactAttributes<import("./index.js").BadgeAttributes>) & (({ color }?: import("./index.js").BadgeOptions) => import("./index.js").BadgeAttributes) & {
+        colors: readonly ["info", "success", "warning", "danger", "neutral"];
+        isColor: (value: string) => value is "warning" | "info" | "success" | "danger" | "neutral";
+    };
+    readonly breadcrumbs: ((options?: unknown) => ReactAttributes<import("./index.js").BreadcrumbsAttributes>) & (() => import("./index.js").BreadcrumbsAttributes);
+    readonly button: ((options?: import("./index.js").ButtonOptions | undefined) => ReactAttributes<import("./index.js").ButtonAttributes>) & (({ variant }?: import("./index.js").ButtonOptions) => import("./index.js").ButtonAttributes) & {
+        variants: readonly ["primary", "secondary", "ghost", "danger"];
+        isVariant: (value: string) => value is "danger" | "primary" | "secondary" | "ghost";
+    };
+    readonly card: ((options?: import("./index.js").CardOptions | undefined) => ReactAttributes<import("./index.js").CardAttributes>) & (({ variant, interactive }?: import("./index.js").CardOptions) => import("./index.js").CardAttributes) & {
+        title: "lt-card__title";
+        variants: readonly ["outline", "filled"];
+        isVariant: (value: string) => value is "outline" | "filled";
+    };
+    readonly checkbox: ((options?: import("./index.js").CheckboxOptions | undefined) => ReactAttributes<import("./index.js").CheckboxAttributes>) & (({ state }?: import("./index.js").CheckboxOptions) => import("./index.js").CheckboxAttributes) & {
+        row: "lt-checkbox-row";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+    };
+    readonly divider: ((options?: import("./index.js").DividerOptions | undefined) => ReactAttributes<import("./index.js").DividerAttributes>) & (({ variant }?: import("./index.js").DividerOptions) => import("./index.js").DividerAttributes) & {
+        variants: readonly ["default", "subtle", "strong"];
+        isVariant: (value: string) => value is "default" | "subtle" | "strong";
+    };
+    readonly errorText: ((options?: import("./index.js").ErrorTextOptions | undefined) => ReactAttributes<import("./index.js").ErrorTextAttributes>) & (({ variant }?: import("./index.js").ErrorTextOptions) => import("./index.js").ErrorTextAttributes) & {
+        variants: readonly ["error", "warning"];
+        isVariant: (value: string) => value is "error" | "warning";
+    };
+    readonly fieldset: ((options?: import("./index.js").FieldsetOptions | undefined) => ReactAttributes<import("./index.js").FieldsetAttributes>) & (({ state, disabled }?: import("./index.js").FieldsetOptions) => import("./index.js").FieldsetAttributes) & {
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+    };
+    readonly heading: ((options?: import("./index.js").HeadingOptions | undefined) => ReactAttributes<import("./index.js").HeadingAttributes>) & (({ size }?: import("./index.js").HeadingOptions) => import("./index.js").HeadingAttributes) & {
+        sizes: readonly ["xs", "s", "m", "l", "xl", "mega"];
+        isSize: (value: string) => value is "xs" | "s" | "m" | "l" | "xl" | "mega";
+    };
+    readonly fileUpload: ((options?: import("./index.js").FileUploadOptions | undefined) => ReactAttributes<import("./index.js").FileUploadAttributes>) & (({ state, multiple, accept, }?: import("./index.js").FileUploadOptions) => import("./index.js").FileUploadAttributes) & {
+        list: "lt-file-upload-list";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+    };
+    readonly helpText: ((options?: import("./index.js").HelpTextOptions | undefined) => ReactAttributes<import("./index.js").HelpTextAttributes>) & (({ variant }?: import("./index.js").HelpTextOptions) => import("./index.js").HelpTextAttributes) & {
+        variants: readonly ["muted", "strong", "success", "warning"];
+        isVariant: (value: string) => value is "warning" | "success" | "strong" | "muted";
+    };
+    readonly icon: ((options?: import("./index.js").IconOptions | undefined) => ReactAttributes<import("./index.js").IconAttributes>) & (({ label }?: import("./index.js").IconOptions) => import("./index.js").IconAttributes);
+    readonly input: ((options?: import("./index.js").InputOptions | undefined) => ReactAttributes<import("./index.js").InputAttributes>) & (({ type, state }?: import("./index.js").InputOptions) => import("./index.js").InputAttributes) & {
+        types: readonly ["text", "password", "email", "number", "date", "datetime-local", "week", "month", "tel", "url", "search", "time"];
+        isType: (value: string) => value is "number" | "date" | "search" | "url" | "text" | "password" | "email" | "datetime-local" | "week" | "month" | "tel" | "time";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+    };
+    readonly label: ((options?: import("./index.js").LabelOptions | undefined) => ReactAttributes<import("./index.js").LabelAttributes>) & (({ required, optional, disabled }?: import("./index.js").LabelOptions) => import("./index.js").LabelAttributes) & {
+        markers: readonly ["symbol", "text"];
+        isMarker: (value: string) => value is "symbol" | "text";
+    };
+    readonly legend: ((options?: import("./index.js").LegendOptions | undefined) => ReactAttributes<import("./index.js").LegendAttributes>) & (({ required, optional, disabled }?: import("./index.js").LegendOptions) => import("./index.js").LegendAttributes) & {
+        markers: readonly ["symbol", "text"];
+        isMarker: (value: string) => value is "symbol" | "text";
+    };
+    readonly link: ((options?: import("./index.js").LinkOptions | undefined) => ReactAttributes<import("./index.js").LinkAttributes>) & (({ disabled }?: import("./index.js").LinkOptions) => import("./index.js").LinkAttributes);
+    readonly list: ((options?: import("./index.js").ListOptions | undefined) => ReactAttributes<import("./index.js").ListAttributes>) & (({ variant }?: import("./index.js").ListOptions) => import("./index.js").ListAttributes) & {
+        variants: readonly ["default", "plain", "divided"];
+        isVariant: (value: string) => value is "default" | "plain" | "divided";
+    };
+    readonly pagination: ((options?: unknown) => ReactAttributes<import("./index.js").PaginationAttributes>) & (() => import("./index.js").PaginationAttributes) & {
+        gap: "lt-pagination__gap";
+    };
+    readonly paragraph: ((options?: import("./index.js").ParagraphOptions | undefined) => ReactAttributes<import("./index.js").ParagraphAttributes>) & (({ size, variant, }?: import("./index.js").ParagraphOptions) => import("./index.js").ParagraphAttributes) & {
+        sizes: readonly ["small", "medium", "large"];
+        isSize: (value: string) => value is "small" | "medium" | "large";
+        variants: readonly ["default", "lead"];
+        isVariant: (value: string) => value is "default" | "lead";
+    };
+    readonly radio: ((options?: import("./index.js").RadioOptions | undefined) => ReactAttributes<import("./index.js").RadioAttributes>) & (({ state }?: import("./index.js").RadioOptions) => import("./index.js").RadioAttributes) & {
+        row: "lt-radio-row";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+    };
+    readonly search: ((options?: import("./index.js").SearchOptions | undefined) => ReactAttributes<import("./index.js").SearchAttributes>) & (({ state }?: import("./index.js").SearchOptions) => import("./index.js").SearchAttributes) & {
+        row: "lt-search-row";
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+    };
+    readonly select: ((options?: import("./index.js").SelectOptions | undefined) => ReactAttributes<import("./index.js").SelectAttributes>) & (({ state, picker, }?: import("./index.js").SelectOptions) => import("./index.js").SelectAttributes) & {
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+        pickers: readonly ["auto", "styled"];
+        isPicker: (value: string) => value is "auto" | "styled";
+    };
+    readonly skeleton: ((options?: import("./index.js").SkeletonOptions | undefined) => ReactAttributes<import("./index.js").SkeletonAttributes>) & (({ variant }?: import("./index.js").SkeletonOptions) => import("./index.js").SkeletonAttributes) & {
+        variants: readonly ["block", "text", "circle"];
+        isVariant: (value: string) => value is "text" | "circle" | "block";
+    };
+    readonly skipLink: ((options?: unknown) => ReactAttributes<import("./index.js").SkipLinkAttributes>) & (() => import("./index.js").SkipLinkAttributes);
+    readonly progress: ((options?: import("./index.js").ProgressOptions | undefined) => ReactAttributes<import("./index.js").ProgressAttributes>) & (({ value, max, color, label, valueText, }?: import("./index.js").ProgressOptions) => import("./index.js").ProgressAttributes) & {
+        colors: readonly ["success", "warning", "danger"];
+        isColor: (value: string) => value is "warning" | "success" | "danger";
+    };
+    readonly spinner: ((options?: import("./index.js").SpinnerOptions | undefined) => ReactAttributes<import("./index.js").SpinnerAttributes>) & (({ size, label }?: import("./index.js").SpinnerOptions) => import("./index.js").SpinnerAttributes) & {
+        sizes: readonly ["small", "medium", "large"];
+        isSize: (value: string) => value is "small" | "medium" | "large";
+    };
+    readonly srOnly: ((options?: unknown) => ReactAttributes<import("./index.js").SrOnlyAttributes>) & (() => import("./index.js").SrOnlyAttributes);
+    readonly switch: ((options?: import("./index.js").SwitchOptions | undefined) => ReactAttributes<import("./index.js").SwitchAttributes>) & (({ disabled }?: import("./index.js").SwitchOptions) => import("./index.js").SwitchAttributes) & {
+        row: "lt-switch-row";
+    };
+    readonly toggleGroup: ((options?: unknown) => ReactAttributes<import("./index.js").ToggleGroupAttributes>) & (() => import("./index.js").ToggleGroupAttributes) & {
+        option: "lt-toggle-group__option";
+    };
+    readonly tooltip: ((options?: unknown) => ReactAttributes<import("./index.js").TooltipAttributes>) & (() => import("./index.js").TooltipAttributes) & {
+        bubble: "lt-tooltip__bubble";
+    };
+    readonly table: ((options?: import("./index.js").TableOptions | undefined) => ReactAttributes<import("./index.js").TableAttributes>) & (({ variant, hoverable }?: import("./index.js").TableOptions) => import("./index.js").TableAttributes) & {
+        scroll: "lt-table-scroll";
+        variants: readonly ["default", "striped"];
+        isVariant: (value: string) => value is "default" | "striped";
+    };
+    readonly tableSort: ((options?: Parameters<typeof tableSort>[0]) => {
+        header: {
+            "aria-sort"?: import("./index.js").TableSortDirection;
+        };
+        button: ReactAttributes<{
+            class: typeof import("./components/css/table/table.js").TABLE_SORT_CLASS;
+            type: "button";
+        }>;
+    }) & {
+        isDirection: (value: string) => value is "ascending" | "descending";
+    };
+    readonly tag: ((options?: import("./index.js").TagOptions | undefined) => ReactAttributes<import("./index.js").TagAttributes>) & (({ variant, selectable }?: import("./index.js").TagOptions) => import("./index.js").TagAttributes) & {
+        variants: readonly ["outline", "filled"];
+        isVariant: (value: string) => value is "outline" | "filled";
+    };
+    readonly textarea: ((options?: import("./index.js").TextareaOptions | undefined) => ReactAttributes<import("./index.js").TextareaAttributes>) & (({ state }?: import("./index.js").TextareaOptions) => import("./index.js").TextareaAttributes) & {
+        states: readonly ["default", "invalid", "success"];
+        isState: (value: string) => value is "default" | "invalid" | "success";
+    };
+    /**
+     * Wires a whole field, with `className` and `htmlFor` on the label.
+     *
+     * `control`, `help` and `error` have no keys that need renaming, and are
+     * therefore the same in both entry points.
+     */
+    readonly field: (options: FieldOptions) => {
+        label: ReactAttributes<{
+            class: "lt-label";
+            for: string;
+            "data-required"?: import("./index.js").RequiredMarker;
+            "data-optional"?: "";
+            "aria-disabled"?: "true";
+        }>;
+        control: {
+            id: string;
+            "aria-describedby"?: string;
+            "aria-invalid"?: "true";
+            "data-state"?: "invalid";
+            disabled?: true;
+        };
+        help: {
+            id: string;
+        };
+        error: {
+            id: string;
+            hidden?: true;
+        };
+        state: import("./index.js").FieldState;
+    };
+    /**
+     * The compound builder functions return one attribute set per element,
+     * and each set must be renamed on its own. `host` has `tabindex`, and the
+     * panels in `lt.tabs()` have both `tabindex` and `class`.
+     */
+    readonly errorSummary: (options?: Parameters<typeof errorSummary>[0]) => {
+        host: ReactAttributes<{
+            class: typeof import("./index.js").ERROR_SUMMARY_CLASS;
+            role: "alert";
+            tabindex: "-1";
+            id?: string;
+            hidden?: true;
+            "aria-labelledby"?: string;
+        }>;
+        title: ReactAttributes<{
+            class: typeof import("./index.js").ERROR_SUMMARY_TITLE_CLASS;
+            id?: string;
+        }>;
+    };
+    readonly dialog: ((options: Parameters<typeof dialog>[0]) => {
+        host: {
+            open?: true;
+        };
+        dialog: ReactAttributes<{
+            class: typeof import("./components/frame/dialog/dialog.js").DIALOG_CLASS;
+            "aria-labelledby": string;
+            open?: true;
+            "data-color"?: Exclude<import("./components/frame/dialog/dialog.js").DialogColor, "neutral">;
+        }>;
+        header: ReactAttributes<{
+            class: typeof import("./components/frame/dialog/dialog.js").DIALOG_HEADER_CLASS;
+        }>;
+        title: ReactAttributes<{
+            class: typeof import("./components/frame/dialog/dialog.js").DIALOG_TITLE_CLASS;
+            id: string;
+        }>;
+        subtitle: ReactAttributes<{
+            class: typeof import("./components/frame/dialog/dialog.js").DIALOG_SUBTITLE_CLASS;
+        }>;
+        body: ReactAttributes<{
+            class: typeof import("./components/frame/dialog/dialog.js").DIALOG_BODY_CLASS;
+        }>;
+        footer: ReactAttributes<{
+            class: typeof import("./components/frame/dialog/dialog.js").DIALOG_FOOTER_CLASS;
+        }>;
+    }) & {
+        dialog: "lt-dialog";
+        header: "lt-dialog__header";
+        title: "lt-dialog__title";
+        subtitle: "lt-dialog__subtitle";
+        body: "lt-dialog__body";
+        footer: "lt-dialog__footer";
+        colors: readonly ["neutral", "brand", "info", "success", "warning", "danger"];
+        isColor: (value: string) => value is "warning" | "info" | "success" | "danger" | "neutral" | "brand";
+    };
+    readonly popover: ((options: Parameters<typeof popover>[0]) => {
+        host: {
+            open?: true;
+            placement?: import("./index.js").PopoverPlacement;
+        };
+        trigger: ReactAttributes<{
+            type: "button";
+            "aria-expanded": "true" | "false";
+            "aria-controls": string;
+        }>;
+        panel: ReactAttributes<{
+            class: typeof import("./index.js").POPOVER_CLASS;
+            id: string;
+            popover: "manual";
+        }>;
+    }) & {
+        isPlacement: typeof import("./index.js").isPopoverPlacement;
+    };
+    /**
+     * The whole state, not just the links: React reports a mismatch for every
+     * attribute the component writes on an element React has rendered. See
+     * `tabsWithState`.
+     */
+    readonly tabs: (options: TabsWithStateOptions) => {
+        list: ReactAttributes<{
+            class: typeof import("./index.js").TABS_LIST_CLASS;
+            role: "tablist";
+            "aria-label": string;
+        }>;
+        item: ReactAttributes<{
+            role: "presentation";
+        }>;
+        tabs: ReactAttributes<{
+            id: string;
+            href: string;
+            role: "tab";
+            "aria-selected": "true" | "false";
+            "aria-controls": string;
+            tabindex: "0" | "-1";
+        }>[];
+        panels: ReactAttributes<{
+            id: string;
+            class: typeof import("./index.js").TABS_PANEL_CLASS;
+            role: "tabpanel";
+            "aria-labelledby": string;
+            tabindex?: "0";
+            hidden?: true;
+        }>[];
+    };
+    readonly suggestion: (options: Parameters<typeof suggestion>[0]) => {
+        label: ReactAttributes<{
+            id: string;
+            class: "lt-label";
+            for: string;
+            "data-required"?: import("./index.js").RequiredMarker;
+            "data-optional"?: "";
+            "aria-disabled"?: "true";
+        }>;
+        control: ReactAttributes<{
+            class: "lt-input";
+            type: "text";
+            role: "combobox";
+            autocomplete: "off";
+            "aria-expanded": "true" | "false";
+            "aria-controls": string;
+            "aria-describedby": string;
+            "aria-autocomplete": "list";
+            "aria-activedescendant": string | undefined;
+            id: string;
+            "aria-invalid"?: "true";
+            "data-state"?: "invalid";
+            disabled?: true;
+        }>;
+        list: ReactAttributes<{
+            class: "lt-suggestion__list";
+            id: string;
+            role: "listbox";
+            "aria-labelledby": string;
+            popover: "manual";
+            hidden: true | undefined;
+            "aria-busy": "true" | undefined;
+        }>;
+        options: ReactAttributes<{
+            class: "lt-suggestion__option";
+            id: string;
+            role: "option";
+            "aria-selected": "true" | "false";
+        }>[];
+        empty: ReactAttributes<{
+            class: "lt-suggestion__empty";
+            hidden: true | undefined;
+        }>;
+        status: ReactAttributes<{
+            class: "lt-sr-only";
+            id: string;
+            role: "status";
+        }>;
+        value: ReactAttributes<{
+            class: "lt-suggestion__value";
+            type: "hidden";
+        }>;
+        help: {
+            id: string;
+        };
+        error: {
+            id: string;
+            hidden?: true;
+        };
+        state: "default" | "invalid" | "success";
+    };
+    readonly toast: (options?: Parameters<typeof toast>[0]) => {
+        host: ReactAttributes<{
+            class: typeof import("./index.js").TOAST_CLASS;
+            role: "status";
+            "aria-live": "polite";
+            "aria-atomic": "false";
+            "aria-label": string;
+            "close-label"?: string;
+            "data-ignore-morph": "";
+        }>;
+        message: ReactAttributes<{
+            class: typeof import("./index.js").TOAST_MESSAGE_CLASS;
+        }>;
+        close: ReactAttributes<{
+            class: typeof import("./index.js").TOAST_CLOSE_CLASS;
+        }>;
+    };
+    readonly sessionTimeout: ((options: Parameters<typeof sessionTimeout>[0]) => {
+        host: ReactAttributes<{
+            class: typeof import("./index.js").SESSION_TIMEOUT_CLASS;
+            "warn-at"?: string;
+            "expires-at"?: string;
+            "activity-interval"?: string;
+            "data-ignore-morph": "";
+        }>;
+        dialog: ReactAttributes<{
+            class: typeof import("./index.js").SESSION_TIMEOUT_DIALOG_CLASS;
+            role: "alertdialog";
+            "aria-labelledby": string;
+        }>;
+        title: ReactAttributes<{
+            class: typeof import("./index.js").SESSION_TIMEOUT_TITLE_CLASS;
+            id: string;
+        }>;
+        text: ReactAttributes<{
+            class: typeof import("./index.js").SESSION_TIMEOUT_TEXT_CLASS;
+        }>;
+        count: ReactAttributes<{
+            class: typeof import("./index.js").SESSION_TIMEOUT_COUNT_CLASS;
+            "aria-hidden": "true";
+        }>;
+        live: ReactAttributes<{
+            class: "lt-sr-only";
+            role: "status";
+        }>;
+        actions: ReactAttributes<{
+            class: typeof import("./index.js").SESSION_TIMEOUT_ACTIONS_CLASS;
+            method: "dialog";
+        }>;
+        extend: ReactAttributes<{
+            class: "lt-button";
+            value: typeof import("./index.js").SESSION_EXTEND;
+        }>;
+        logout: ReactAttributes<{
+            class: "lt-button";
+            "data-variant": "secondary";
+            value: typeof import("./index.js").SESSION_LOGOUT;
+        }>;
+    }) & {
+        dialog: "lt-session-timeout__dialog";
+        title: "lt-session-timeout__title";
+        text: "lt-session-timeout__text";
+        count: "lt-session-timeout__count";
+        actions: "lt-session-timeout__actions";
+    };
+    readonly connectionStatus: ((options?: import("./index.js").ConnectionStatusOptions | undefined) => ReactAttributes<import("./index.js").ConnectionStatusAttributes>) & (({ offlineText, onlineText, }?: import("./index.js").ConnectionStatusOptions) => import("./index.js").ConnectionStatusAttributes);
+    readonly setAttributes: typeof setAttributes;
+    readonly states: readonly ["default", "invalid", "success"];
+    readonly isState: (value: string) => value is "default" | "invalid" | "success";
+    readonly markers: readonly ["symbol", "text"];
+    readonly isMarker: (value: string) => value is "symbol" | "text";
+};
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

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