material 1.0.3 → 3.0.0-next.0

package/dist/react/create.d.ts

@@ -0,0 +1,77 @@
+/**
+ * React components over the elements.
+ *
+ * `createComponent` renders the element's tag and keeps React's model:
+ * attributes are passed as attributes, so server-rendered markup carries them;
+ * live-state properties (`checked`, `value`) are set on the element after each
+ * render, and are controlled when given, like React's own inputs; the
+ * attribute they shadow is the `default*` prop. Events are typed `on*`
+ * callbacks. The element is registered on first mount, never at import.
+ *
+ * Works the same on React 18 and 19: the component sets properties and
+ * attaches listeners itself rather than relying on React 19's custom element
+ * support.
+ *
+ * @module react
+ */
+import * as React from "react";
+import type { DefineOptions, ElementEvents, ElementProps, ElementSlotProp } from "../elements/index.js";
+import { type ComponentSpec, type DeclarationSpec, type DefaultProps, type FormProps, type Pascal, type RetiredEvents } from "../elements/adapter.js";
+export { configure } from "../elements/adapter.js";
+export type { DefaultProps, FormProps } from "../elements/adapter.js";
+/** `change` → `onChange`, typed with the element's event. */
+export type EventProps<S> = {
+    [K in keyof ElementEvents<S> & string as `on${Pascal<K>}`]?: (event: ElementEvents<S>[K]) => void;
+};
+type BaseProps<S> = ElementProps<S> & DefaultProps<S> & EventProps<S>;
+/**
+ * Each named slot as a prop taking nodes (`actions={<Button />}`), rendered
+ * into a `<span slot="…">` the adapter owns; a text prop of the same name
+ * (`headline`) takes its text or nodes (FLO-333).
+ */
+type SlotProps<S> = {
+    [K in ElementSlotProp<S>]?: React.ReactNode;
+};
+type OwnProps<S> = Omit<BaseProps<S>, ElementSlotProp<S>> & SlotProps<S>;
+/**
+ * `@types/react` 18's `HTMLAttributes` has no `popover` through 18.3.31.
+ * `enterKeyHint` joins that interface in 18.3.31; earlier 18 types it on inputs.
+ * `nonce` is absent on 18.0.0 and present by 18.0.28.
+ * A release that already declares a key keeps its own type.
+ */
+type ReactHostGaps = {
+    popover?: "" | "auto" | "manual" | "hint";
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
+    nonce?: string;
+};
+type Missing<Base, Extra> = {
+    [K in Exclude<keyof Extra, keyof Base>]?: K extends keyof Extra ? Extra[K] : never;
+};
+/** `HTMLAttributes` for the host, plus globals a supported React 18 type omits. */
+export type ReactHostAttributes<E extends HTMLElement = HTMLElement> = React.HTMLAttributes<E> & Missing<React.HTMLAttributes<E>, ReactHostGaps>;
+/**
+ * Props of a generated component: the element's own, plus any HTML attribute for the host.
+ * `OwnProps` includes the element's `on*` handlers, so those names keep the component's event.
+ */
+export type ComponentProps<S> = OwnProps<S> & FormProps<S> & Omit<ReactHostAttributes, keyof OwnProps<S> | RetiredProps<S>> & {
+    [K in RetiredProps<S>]?: `${K} was removed in material 3.0.0: use onChange`;
+} & {
+    children?: React.ReactNode;
+};
+/** The handler props of events material 3.0.0 removed (`onToggle` on the icon button): refused, see `RetiredEvents`. */
+type RetiredProps<S> = `on${Pascal<RetiredEvents<S>>}`;
+/** A generated component; named so declarations stay short. */
+export type MComponent<S, E extends HTMLElement> = React.ForwardRefExoticComponent<React.PropsWithoutRef<ComponentProps<S>> & React.RefAttributes<E>>;
+/**
+ * The React component for an element.
+ * @param spec - The element's spec (`switchElement.spec`)
+ * @param define - Registers the element and anything it needs (`defineSwitch`)
+ */
+export declare const createComponent: <S, E extends HTMLElement>(spec: ComponentSpec, define: (options?: DefineOptions) => string, displayName: string) => MComponent<S, E>;
+export type DeclarationProps<A> = A & Omit<ReactHostAttributes, keyof A> & {
+    children?: React.ReactNode;
+};
+/** A generated declaration component. */
+export type MDeclaration<A> = React.ForwardRefExoticComponent<React.PropsWithoutRef<DeclarationProps<A>> & React.RefAttributes<HTMLElement>>;
+/** The React component for a declaration child; its parent registers the tag. */
+export declare const createDeclaration: <A>(spec: DeclarationSpec, displayName: string) => MDeclaration<A>;

package/dist/react/create.js

@@ -0,0 +1,123 @@
+"use client";
+import * as React from "react";
+import { RENDERED_HOST_ATTRIBUTE } from "../elements/styles.js";
+import { shadow } from "./shadow.js";
+import { camel, describe, describeDeclaration, getPrefix, isBrowser, pascal, serverDefaults, toAttribute, writeDefaults, writeLive, } from "../elements/adapter.js";
+export { configure } from "../elements/adapter.js";
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+const assignRef = (ref, value) => {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+};
+export const createComponent = (spec, define, displayName) => {
+    const described = describe(spec);
+    const properties = new Set(described.properties);
+    const attributes = described.attributes;
+    const events = new Map(described.events.map((event) => [`on${pascal(event)}`, event]));
+    const slots = new Map(described.slots.map((slot) => [camel(slot), slot]));
+    const Component = React.forwardRef((props, forwardedRef) => {
+        const element = React.useRef(null);
+        const host = {};
+        const live = {};
+        const handlers = {};
+        const named = [];
+        for (const [key, value] of Object.entries(props)) {
+            const event = events.get(key);
+            const attribute = attributes.get(key);
+            const slot = slots.get(key);
+            if (slot !== undefined && !(attribute && typeof value === "string")) {
+                if (value != null && value !== false) {
+                    named.push(React.createElement("span", { key: slot, slot, style: { display: "contents" } }, value));
+                }
+                continue;
+            }
+            if (event) {
+                if (typeof value === "function")
+                    handlers[event] = value;
+            }
+            else if (properties.has(key)) {
+                live[key] = value;
+            }
+            else if (attribute?.shadowed) {
+                if (!isBrowser)
+                    host[attribute.name] = toAttribute(attribute.type, value);
+            }
+            else if (attribute) {
+                host[attribute.name] = toAttribute(attribute.type, value);
+            }
+            else if (key === "className") {
+                host.class = value;
+            }
+            else {
+                host[key] = value;
+            }
+        }
+        if (!isBrowser) {
+            for (const [name, value] of serverDefaults(described, (property) => live[property]))
+                host[name] ?? (host[name] = value);
+        }
+        const latest = React.useRef({ handlers, live });
+        useIsomorphicLayoutEffect(() => {
+            latest.current = { handlers, live };
+        });
+        useIsomorphicLayoutEffect(() => {
+            if (element.current)
+                writeDefaults(element.current, described, (key) => props[key]);
+        });
+        useIsomorphicLayoutEffect(() => {
+            define({ prefix: getPrefix() });
+        }, []);
+        useIsomorphicLayoutEffect(() => {
+            if (element.current)
+                writeLive(element.current, described, (property) => live[property]);
+        });
+        React.useEffect(() => {
+            const el = element.current;
+            if (!el)
+                return;
+            const listeners = [...new Set(events.values())].map((event) => {
+                const listener = (e) => {
+                    latest.current.handlers[event]?.(e);
+                    queueMicrotask(() => {
+                        if (element.current)
+                            writeLive(element.current, described, (property) => latest.current.live[property]);
+                    });
+                };
+                el.addEventListener(event, listener);
+                return () => el.removeEventListener(event, listener);
+            });
+            return () => listeners.forEach((remove) => remove());
+        }, []);
+        const ref = React.useCallback((node) => {
+            element.current = node;
+            assignRef(forwardedRef, node);
+        }, [forwardedRef]);
+        const { children, ...attributesAndProps } = host;
+        const tag = `${getPrefix()}-${spec.name}`;
+        const template = shadow(tag, attributesAndProps, React.createElement(React.Fragment, null, children, ...named));
+        const hostProps = { ...attributesAndProps, ref };
+        if (template != null)
+            hostProps[RENDERED_HOST_ATTRIBUTE] = "";
+        if (isBrowser && spec.ssr !== false)
+            hostProps.suppressHydrationWarning = true;
+        return React.createElement(tag, hostProps, template, children, ...named);
+    });
+    Component.displayName = displayName;
+    return Component;
+};
+export const createDeclaration = (spec, displayName) => {
+    const attributes = describeDeclaration(spec);
+    const Component = React.forwardRef((props, ref) => {
+        const host = { ref };
+        for (const [key, value] of Object.entries(props)) {
+            const attribute = attributes.get(key);
+            const name = attribute ? attribute.name : key === "className" ? "class" : key;
+            host[name] = attribute ? toAttribute(attribute.type, value) : value;
+        }
+        return React.createElement(`${getPrefix()}-${spec.name}`, host);
+    });
+    Component.displayName = displayName;
+    return Component;
+};

package/dist/react/datepicker.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/datepicker";
+import { type DatepickerSpec, type DatepickerElement } from "../elements/datepicker.js";
+import { type MComponent } from "./create.js";
+export declare const Datepicker: MComponent<DatepickerSpec, DatepickerElement>;

package/dist/react/datepicker.js

@@ -0,0 +1,7 @@
+// src/react/datepicker.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/datepicker";
+import { datepickerElement, defineDatepicker } from "../elements/datepicker.js";
+import { createComponent } from "./create.js";
+export const Datepicker = /*#__PURE__*/ createComponent(datepickerElement.spec, defineDatepicker, "Datepicker");

package/dist/react/dialog.d.ts

@@ -0,0 +1,7 @@
+import "material/elements/css/progress";
+import "material/elements/css/button";
+import "material/elements/css/divider";
+import "material/elements/css/dialog";
+import { type DialogSpec, type DialogElement } from "../elements/dialog.js";
+import { type MComponent } from "./create.js";
+export declare const Dialog: MComponent<DialogSpec, DialogElement>;

package/dist/react/dialog.js

@@ -0,0 +1,10 @@
+// src/react/dialog.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/progress";
+import "material/elements/css/button";
+import "material/elements/css/divider";
+import "material/elements/css/dialog";
+import { dialogElement, defineDialog } from "../elements/dialog.js";
+import { createComponent } from "./create.js";
+export const Dialog = /*#__PURE__*/ createComponent(dialogElement.spec, defineDialog, "Dialog");

package/dist/react/divider.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/divider";
+import { type DividerSpec, type DividerElement } from "../elements/divider.js";
+import { type MComponent } from "./create.js";
+export declare const Divider: MComponent<DividerSpec, DividerElement>;

package/dist/react/divider.js

@@ -0,0 +1,7 @@
+// src/react/divider.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/divider";
+import { dividerElement, defineDivider } from "../elements/divider.js";
+import { createComponent } from "./create.js";
+export const Divider = /*#__PURE__*/ createComponent(dividerElement.spec, defineDivider, "Divider");

package/dist/react/drawer-item.d.ts

@@ -0,0 +1,3 @@
+import { type DrawerItemAttributes } from "../elements/drawer.js";
+import { type MDeclaration } from "./create.js";
+export declare const DrawerItem: MDeclaration<DrawerItemAttributes>;

package/dist/react/drawer-item.js

@@ -0,0 +1,6 @@
+// src/react/drawer-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { drawerItemDeclaration } from "../elements/drawer.js";
+import { createDeclaration } from "./create.js";
+export const DrawerItem = /*#__PURE__*/ createDeclaration(drawerItemDeclaration, "DrawerItem");

package/dist/react/drawer.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/drawer";
+import { type DrawerSpec, type DrawerElement } from "../elements/drawer.js";
+import { type MComponent } from "./create.js";
+export declare const Drawer: MComponent<DrawerSpec, DrawerElement>;

package/dist/react/drawer.js

@@ -0,0 +1,7 @@
+// src/react/drawer.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/drawer";
+import { drawerElement, defineDrawer } from "../elements/drawer.js";
+import { createComponent } from "./create.js";
+export const Drawer = /*#__PURE__*/ createComponent(drawerElement.spec, defineDrawer, "Drawer");

package/dist/react/extended-fab.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/extended-fab";
+import { type ExtendedFabSpec, type ExtendedFabElement } from "../elements/extended-fab.js";
+import { type MComponent } from "./create.js";
+export declare const ExtendedFab: MComponent<ExtendedFabSpec, ExtendedFabElement>;

package/dist/react/extended-fab.js

@@ -0,0 +1,7 @@
+// src/react/extended-fab.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/extended-fab";
+import { extendedFabElement, defineExtendedFab } from "../elements/extended-fab.js";
+import { createComponent } from "./create.js";
+export const ExtendedFab = /*#__PURE__*/ createComponent(extendedFabElement.spec, defineExtendedFab, "ExtendedFab");

package/dist/react/fab-menu-item.d.ts

@@ -0,0 +1,3 @@
+import { type FabMenuItemAttributes } from "../elements/fab-menu.js";
+import { type MDeclaration } from "./create.js";
+export declare const FabMenuItem: MDeclaration<FabMenuItemAttributes>;

package/dist/react/fab-menu-item.js

@@ -0,0 +1,6 @@
+// src/react/fab-menu-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { fabMenuItemDeclaration } from "../elements/fab-menu.js";
+import { createDeclaration } from "./create.js";
+export const FabMenuItem = /*#__PURE__*/ createDeclaration(fabMenuItemDeclaration, "FabMenuItem");

package/dist/react/fab-menu.d.ts

@@ -0,0 +1,6 @@
+import "material/elements/css/fab";
+import "material/elements/css/menu";
+import "material/elements/css/fab-menu";
+import { type FabMenuSpec, type FabMenuElement } from "../elements/fab-menu.js";
+import { type MComponent } from "./create.js";
+export declare const FabMenu: MComponent<FabMenuSpec, FabMenuElement>;

package/dist/react/fab-menu.js

@@ -0,0 +1,9 @@
+// src/react/fab-menu.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/fab";
+import "material/elements/css/menu";
+import "material/elements/css/fab-menu";
+import { fabMenuElement, defineFabMenu } from "../elements/fab-menu.js";
+import { createComponent } from "./create.js";
+export const FabMenu = /*#__PURE__*/ createComponent(fabMenuElement.spec, defineFabMenu, "FabMenu");

package/dist/react/fab.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/fab";
+import { type FabSpec, type FabElement } from "../elements/fab.js";
+import { type MComponent } from "./create.js";
+export declare const Fab: MComponent<FabSpec, FabElement>;

package/dist/react/fab.js

@@ -0,0 +1,7 @@
+// src/react/fab.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/fab";
+import { fabElement, defineFab } from "../elements/fab.js";
+import { createComponent } from "./create.js";
+export const Fab = /*#__PURE__*/ createComponent(fabElement.spec, defineFab, "Fab");

package/dist/react/icon-button.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/icon-button";
+import { type IconButtonSpec, type IconButtonElement } from "../elements/icon-button.js";
+import { type MComponent } from "./create.js";
+export declare const IconButton: MComponent<IconButtonSpec, IconButtonElement>;

package/dist/react/icon-button.js

@@ -0,0 +1,7 @@
+// src/react/icon-button.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/icon-button";
+import { iconButtonElement, defineIconButton } from "../elements/icon-button.js";
+import { createComponent } from "./create.js";
+export const IconButton = /*#__PURE__*/ createComponent(iconButtonElement.spec, defineIconButton, "IconButton");

package/dist/react/index.d.ts

@@ -0,0 +1,58 @@
+/**
+ * React components for the elements. Each renders its `<m-*>` tag, registers
+ * it on first mount and loads its CSS.
+ *
+ * @module react
+ */
+export { configure } from "./create.js";
+export type { ComponentProps, DeclarationProps, EventProps, DefaultProps, FormProps, MComponent, MDeclaration } from "./create.js";
+export { Button } from "./button.js";
+export { Switch } from "./switch.js";
+export { Tabs } from "./tabs.js";
+export { Progress } from "./progress.js";
+export { LoadingIndicator } from "./loading-indicator.js";
+export { Badge } from "./badge.js";
+export { Divider } from "./divider.js";
+export { IconButton } from "./icon-button.js";
+export { Fab } from "./fab.js";
+export { ExtendedFab } from "./extended-fab.js";
+export { Checkbox } from "./checkbox.js";
+export { Slider } from "./slider.js";
+export { TextField } from "./text-field.js";
+export { Radios } from "./radios.js";
+export { NavigationBar } from "./navigation-bar.js";
+export { NavigationRail } from "./navigation-rail.js";
+export { Drawer } from "./drawer.js";
+export { TopAppBar } from "./top-app-bar.js";
+export { BottomAppBar } from "./bottom-app-bar.js";
+export { ButtonGroup } from "./button-group.js";
+export { Chips } from "./chips.js";
+export { List } from "./list.js";
+export { Card } from "./card.js";
+export { Carousel } from "./carousel.js";
+export { Menu } from "./menu.js";
+export { FabMenu } from "./fab-menu.js";
+export { Select } from "./select.js";
+export { SplitButton } from "./split-button.js";
+export { Tooltip } from "./tooltip.js";
+export { Toolbar } from "./toolbar.js";
+export { Snackbar } from "./snackbar.js";
+export { Dialog } from "./dialog.js";
+export { BottomSheet } from "./bottom-sheet.js";
+export { SideSheet } from "./side-sheet.js";
+export { Datepicker } from "./datepicker.js";
+export { Timepicker } from "./timepicker.js";
+export { Search } from "./search.js";
+export { Tab } from "./tab.js";
+export { Radio } from "./radio.js";
+export { NavigationBarItem } from "./navigation-bar-item.js";
+export { NavigationRailItem } from "./navigation-rail-item.js";
+export { DrawerItem } from "./drawer-item.js";
+export { ButtonGroupItem } from "./button-group-item.js";
+export { Chip } from "./chip.js";
+export { ListItem } from "./list-item.js";
+export { CarouselItem } from "./carousel-item.js";
+export { MenuItem } from "./menu-item.js";
+export { FabMenuItem } from "./fab-menu-item.js";
+export { SelectOption } from "./select-option.js";
+export { SearchSuggestion } from "./search-suggestion.js";

package/dist/react/index.js

@@ -0,0 +1,52 @@
+"use client";
+export { configure } from "./create.js";
+export { Button } from "./button.js";
+export { Switch } from "./switch.js";
+export { Tabs } from "./tabs.js";
+export { Progress } from "./progress.js";
+export { LoadingIndicator } from "./loading-indicator.js";
+export { Badge } from "./badge.js";
+export { Divider } from "./divider.js";
+export { IconButton } from "./icon-button.js";
+export { Fab } from "./fab.js";
+export { ExtendedFab } from "./extended-fab.js";
+export { Checkbox } from "./checkbox.js";
+export { Slider } from "./slider.js";
+export { TextField } from "./text-field.js";
+export { Radios } from "./radios.js";
+export { NavigationBar } from "./navigation-bar.js";
+export { NavigationRail } from "./navigation-rail.js";
+export { Drawer } from "./drawer.js";
+export { TopAppBar } from "./top-app-bar.js";
+export { BottomAppBar } from "./bottom-app-bar.js";
+export { ButtonGroup } from "./button-group.js";
+export { Chips } from "./chips.js";
+export { List } from "./list.js";
+export { Card } from "./card.js";
+export { Carousel } from "./carousel.js";
+export { Menu } from "./menu.js";
+export { FabMenu } from "./fab-menu.js";
+export { Select } from "./select.js";
+export { SplitButton } from "./split-button.js";
+export { Tooltip } from "./tooltip.js";
+export { Toolbar } from "./toolbar.js";
+export { Snackbar } from "./snackbar.js";
+export { Dialog } from "./dialog.js";
+export { BottomSheet } from "./bottom-sheet.js";
+export { SideSheet } from "./side-sheet.js";
+export { Datepicker } from "./datepicker.js";
+export { Timepicker } from "./timepicker.js";
+export { Search } from "./search.js";
+export { Tab } from "./tab.js";
+export { Radio } from "./radio.js";
+export { NavigationBarItem } from "./navigation-bar-item.js";
+export { NavigationRailItem } from "./navigation-rail-item.js";
+export { DrawerItem } from "./drawer-item.js";
+export { ButtonGroupItem } from "./button-group-item.js";
+export { Chip } from "./chip.js";
+export { ListItem } from "./list-item.js";
+export { CarouselItem } from "./carousel-item.js";
+export { MenuItem } from "./menu-item.js";
+export { FabMenuItem } from "./fab-menu-item.js";
+export { SelectOption } from "./select-option.js";
+export { SearchSuggestion } from "./search-suggestion.js";

package/dist/react/jsx.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Types the bare `m-*` tags in React's JSX, for the elements used directly
+ * rather than through the components. Types only, opt in once: `import type {} from "material/react/jsx";`
+ *
+ * @module react/jsx
+ */
+import type * as React from "react";
+import type { ElementEvents, ElementMarkup } from "../elements/index.js";
+import type { ReactHostAttributes } from "./create.js";
+/**
+ * The element's events as React 19 listens to them on a custom element: an
+ * `on<event>` prop in lower case gets the element's own event
+ * (`onchange={(e) => e.detail.value}`). `onChange` stays React's synthetic
+ * event, which has no `detail`; React 18 sets no event props on a custom element.
+ */
+type Events<S> = {
+    [K in keyof ElementEvents<S> & string as `on${Lowercase<K>}`]?: (event: ElementEvents<S>[K]) => void;
+};
+/** A tag's props: its attributes as markup writes them, its events, and any HTML attribute. */
+type Tag<S, E extends HTMLElement> = Omit<React.DetailedHTMLProps<ReactHostAttributes<E>, E>, keyof ElementMarkup<S> | keyof Events<S>> & ElementMarkup<S> & Events<S>;
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "m-button": Tag<import("../elements/button.js").ButtonSpec, import("../elements/button.js").ButtonElement>;
+            "m-switch": Tag<import("../elements/switch.js").SwitchSpec, import("../elements/switch.js").SwitchElement>;
+            "m-tabs": Tag<import("../elements/tabs.js").TabsSpec, import("../elements/tabs.js").TabsElement>;
+            "m-progress": Tag<import("../elements/progress.js").ProgressSpec, import("../elements/progress.js").ProgressElement>;
+            "m-loading-indicator": Tag<import("../elements/loading-indicator.js").LoadingIndicatorSpec, import("../elements/loading-indicator.js").LoadingIndicatorElement>;
+            "m-badge": Tag<import("../elements/badge.js").BadgeSpec, import("../elements/badge.js").BadgeElement>;
+            "m-divider": Tag<import("../elements/divider.js").DividerSpec, import("../elements/divider.js").DividerElement>;
+            "m-icon-button": Tag<import("../elements/icon-button.js").IconButtonSpec, import("../elements/icon-button.js").IconButtonElement>;
+            "m-fab": Tag<import("../elements/fab.js").FabSpec, import("../elements/fab.js").FabElement>;
+            "m-extended-fab": Tag<import("../elements/extended-fab.js").ExtendedFabSpec, import("../elements/extended-fab.js").ExtendedFabElement>;
+            "m-checkbox": Tag<import("../elements/checkbox.js").CheckboxSpec, import("../elements/checkbox.js").CheckboxElement>;
+            "m-slider": Tag<import("../elements/slider.js").SliderSpec, import("../elements/slider.js").SliderElement>;
+            "m-text-field": Tag<import("../elements/text-field.js").TextFieldSpec, import("../elements/text-field.js").TextFieldElement>;
+            "m-radios": Tag<import("../elements/radios.js").RadiosSpec, import("../elements/radios.js").RadiosElement>;
+            "m-navigation-bar": Tag<import("../elements/navigation-bar.js").NavigationBarSpec, import("../elements/navigation-bar.js").NavigationBarElement>;
+            "m-navigation-rail": Tag<import("../elements/navigation-rail.js").NavigationRailSpec, import("../elements/navigation-rail.js").NavigationRailElement>;
+            "m-drawer": Tag<import("../elements/drawer.js").DrawerSpec, import("../elements/drawer.js").DrawerElement>;
+            "m-top-app-bar": Tag<import("../elements/top-app-bar.js").TopAppBarSpec, import("../elements/top-app-bar.js").TopAppBarElement>;
+            "m-bottom-app-bar": Tag<import("../elements/bottom-app-bar.js").BottomAppBarSpec, import("../elements/bottom-app-bar.js").BottomAppBarElement>;
+            "m-button-group": Tag<import("../elements/button-group.js").ButtonGroupSpec, import("../elements/button-group.js").ButtonGroupElement>;
+            "m-chips": Tag<import("../elements/chips.js").ChipsSpec, import("../elements/chips.js").ChipsElement>;
+            "m-list": Tag<import("../elements/list.js").ListSpec, import("../elements/list.js").ListElement>;
+            "m-card": Tag<import("../elements/card.js").CardSpec, import("../elements/card.js").CardElement>;
+            "m-carousel": Tag<import("../elements/carousel.js").CarouselSpec, import("../elements/carousel.js").CarouselElement>;
+            "m-menu": Tag<import("../elements/menu.js").MenuSpec, import("../elements/menu.js").MenuElement>;
+            "m-fab-menu": Tag<import("../elements/fab-menu.js").FabMenuSpec, import("../elements/fab-menu.js").FabMenuElement>;
+            "m-select": Tag<import("../elements/select.js").SelectSpec, import("../elements/select.js").SelectElement>;
+            "m-split-button": Tag<import("../elements/split-button.js").SplitButtonSpec, import("../elements/split-button.js").SplitButtonElement>;
+            "m-tooltip": Tag<import("../elements/tooltip.js").TooltipSpec, import("../elements/tooltip.js").TooltipElement>;
+            "m-toolbar": Tag<import("../elements/toolbar.js").ToolbarSpec, import("../elements/toolbar.js").ToolbarElement>;
+            "m-snackbar": Tag<import("../elements/snackbar.js").SnackbarSpec, import("../elements/snackbar.js").SnackbarElement>;
+            "m-dialog": Tag<import("../elements/dialog.js").DialogSpec, import("../elements/dialog.js").DialogElement>;
+            "m-bottom-sheet": Tag<import("../elements/bottom-sheet.js").BottomSheetSpec, import("../elements/bottom-sheet.js").BottomSheetElement>;
+            "m-side-sheet": Tag<import("../elements/side-sheet.js").SideSheetSpec, import("../elements/side-sheet.js").SideSheetElement>;
+            "m-datepicker": Tag<import("../elements/datepicker.js").DatepickerSpec, import("../elements/datepicker.js").DatepickerElement>;
+            "m-timepicker": Tag<import("../elements/timepicker.js").TimepickerSpec, import("../elements/timepicker.js").TimepickerElement>;
+            "m-search": Tag<import("../elements/search.js").SearchSpec, import("../elements/search.js").SearchElement>;
+            "m-tab": Tag<typeof import("../elements/tabs.js").tabDeclaration, HTMLElement>;
+            "m-radio": Tag<typeof import("../elements/radios.js").radioDeclaration, HTMLElement>;
+            "m-navigation-bar-item": Tag<typeof import("../elements/navigation-bar.js").navigationBarItemDeclaration, HTMLElement>;
+            "m-navigation-rail-item": Tag<typeof import("../elements/navigation-rail.js").navigationRailItemDeclaration, HTMLElement>;
+            "m-drawer-item": Tag<typeof import("../elements/drawer.js").drawerItemDeclaration, HTMLElement>;
+            "m-button-group-item": Tag<typeof import("../elements/button-group.js").buttonGroupItemDeclaration, HTMLElement>;
+            "m-chip": Tag<typeof import("../elements/chips.js").chipDeclaration, HTMLElement>;
+            "m-list-item": Tag<typeof import("../elements/list.js").listItemDeclaration, HTMLElement>;
+            "m-carousel-item": Tag<typeof import("../elements/carousel.js").carouselItemDeclaration, HTMLElement>;
+            "m-menu-item": Tag<typeof import("../elements/menu.js").menuItemDeclaration, HTMLElement>;
+            "m-fab-menu-item": Tag<typeof import("../elements/fab-menu.js").fabMenuItemDeclaration, HTMLElement>;
+            "m-select-option": Tag<typeof import("../elements/select.js").selectOptionDeclaration, HTMLElement>;
+            "m-search-suggestion": Tag<typeof import("../elements/search.js").searchSuggestionDeclaration, HTMLElement>;
+        }
+    }
+}
+export {};

package/dist/react/jsx.js

@@ -0,0 +1,2 @@
+"use client";
+export {};

package/dist/react/list-item.d.ts

@@ -0,0 +1,3 @@
+import { type ListItemAttributes } from "../elements/list.js";
+import { type MDeclaration } from "./create.js";
+export declare const ListItem: MDeclaration<ListItemAttributes>;

package/dist/react/list-item.js

@@ -0,0 +1,6 @@
+// src/react/list-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { listItemDeclaration } from "../elements/list.js";
+import { createDeclaration } from "./create.js";
+export const ListItem = /*#__PURE__*/ createDeclaration(listItemDeclaration, "ListItem");

package/dist/react/list.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/list";
+import { type ListSpec, type ListElement } from "../elements/list.js";
+import { type MComponent } from "./create.js";
+export declare const List: MComponent<ListSpec, ListElement>;

package/dist/react/list.js

@@ -0,0 +1,7 @@
+// src/react/list.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/list";
+import { listElement, defineList } from "../elements/list.js";
+import { createComponent } from "./create.js";
+export const List = /*#__PURE__*/ createComponent(listElement.spec, defineList, "List");

package/dist/react/loading-indicator.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/loading-indicator";
+import { type LoadingIndicatorSpec, type LoadingIndicatorElement } from "../elements/loading-indicator.js";
+import { type MComponent } from "./create.js";
+export declare const LoadingIndicator: MComponent<LoadingIndicatorSpec, LoadingIndicatorElement>;

package/dist/react/loading-indicator.js

@@ -0,0 +1,7 @@
+// src/react/loading-indicator.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/loading-indicator";
+import { loadingIndicatorElement, defineLoadingIndicator } from "../elements/loading-indicator.js";
+import { createComponent } from "./create.js";
+export const LoadingIndicator = /*#__PURE__*/ createComponent(loadingIndicatorElement.spec, defineLoadingIndicator, "LoadingIndicator");

package/dist/react/menu-item.d.ts

@@ -0,0 +1,3 @@
+import { type MenuItemAttributes } from "../elements/menu.js";
+import { type MDeclaration } from "./create.js";
+export declare const MenuItem: MDeclaration<MenuItemAttributes>;

package/dist/react/menu-item.js

@@ -0,0 +1,6 @@
+// src/react/menu-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { menuItemDeclaration } from "../elements/menu.js";
+import { createDeclaration } from "./create.js";
+export const MenuItem = /*#__PURE__*/ createDeclaration(menuItemDeclaration, "MenuItem");

package/dist/react/menu.d.ts

@@ -0,0 +1,4 @@
+import "material/elements/css/menu";
+import { type MenuSpec, type MenuElement } from "../elements/menu.js";
+import { type MComponent } from "./create.js";
+export declare const Menu: MComponent<MenuSpec, MenuElement>;

package/dist/react/menu.js

@@ -0,0 +1,7 @@
+// src/react/menu.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "material/elements/css/menu";
+import { menuElement, defineMenu } from "../elements/menu.js";
+import { createComponent } from "./create.js";
+export const Menu = /*#__PURE__*/ createComponent(menuElement.spec, defineMenu, "Menu");