@interstellarforge/matter-react 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Interstellarforge
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Button.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ControlSize = "sm" | "md" | "lg";
+export interface ButtonProps extends ComponentProps<"button"> {
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    /** Keeps the button focusable but blocks clicks while pending. */
+    loading?: boolean;
+}
+export declare function Button({ variant, size, type, loading, className, onClick, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface IconButtonProps extends Omit<ButtonProps, "aria-label"> {
+    /** Accessible name; required because the button has no visible text. */
+    label: string;
+}
+export declare function IconButton({ label, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Button.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export function Button({ variant = "secondary", size = "md", type = "button", loading = false, className, onClick, ...rest }) {
+    return (_jsx("button", { ...rest, type: type, className: cx("m-button", className), "data-variant": variant, "data-size": size, "aria-busy": loading || undefined, "aria-disabled": loading || undefined, onClick: loading
+            ? (event) => {
+                event.preventDefault();
+            }
+            : onClick }));
+}
+export function IconButton({ label, ...rest }) {
+    return _jsx(Button, { ...rest, "aria-label": label, "data-icon-only": "" });
+}

package/dist/Controls.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+export interface CheckboxProps extends Omit<ComponentProps<"input">, "type"> {
+    invalid?: boolean;
+    indeterminate?: boolean;
+}
+/** Client component: `indeterminate` is a DOM property that needs a ref. */
+export declare function Checkbox({ invalid, indeterminate, className, children, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export interface SwitchProps extends Omit<ComponentProps<"button">, "onChange" | "role" | "value"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+/** Needs an accessible name via `aria-label` or `aria-labelledby`. */
+export declare function Switch({ checked, defaultChecked, onCheckedChange, className, onClick, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Controls.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "./cx.js";
+/** Client component: `indeterminate` is a DOM property that needs a ref. */
+export function Checkbox({ invalid, indeterminate = false, className, children, ...rest }) {
+    return (_jsxs("label", { className: cx("m-checkbox", className), children: [_jsx("input", { ...rest, type: "checkbox", "aria-invalid": invalid ? true : undefined, ref: (element) => {
+                    if (element) {
+                        element.indeterminate = indeterminate;
+                    }
+                } }), _jsx("span", { children: children })] }));
+}
+/** Needs an accessible name via `aria-label` or `aria-labelledby`. */
+export function Switch({ checked, defaultChecked = false, onCheckedChange, className, onClick, ...rest }) {
+    const [internal, setInternal] = useState(defaultChecked);
+    const on = checked ?? internal;
+    return (_jsx("button", { ...rest, type: "button", role: "switch", "aria-checked": on, className: cx("m-switch", className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            setInternal(!on);
+            onCheckedChange?.(!on);
+        } }));
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Visible heading; also the accessible name. */
+    title: string;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    children: ReactNode;
+    footer?: ReactNode;
+}
+/** Modal dialog on the native `<dialog>`: focus trap, Esc and inert background come from the platform. */
+export declare function Dialog({ open, onOpenChange, title, closeLabel, children, footer, }: DialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/Dialog.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+/** Modal dialog on the native `<dialog>`: focus trap, Esc and inert background come from the platform. */
+export function Dialog({ open, onOpenChange, title, closeLabel, children, footer, }) {
+    const ref = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        const dialog = ref.current;
+        if (!dialog) {
+            return;
+        }
+        if (open && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!open && dialog.open) {
+            dialog.close();
+        }
+    }, [open]);
+    return (_jsxs("dialog", { ref: ref, className: "m-dialog", "aria-labelledby": titleId, onClose: () => {
+            onOpenChange(false);
+        }, onClick: (event) => {
+            if (event.target === event.currentTarget) {
+                onOpenChange(false);
+            }
+        }, children: [_jsxs("div", { className: "m-dialog__header", children: [_jsx("h2", { id: titleId, className: "m-dialog__title", children: title }), _jsx("button", { type: "button", className: "m-button", "data-variant": "ghost", "data-icon-only": "", "aria-label": closeLabel, onClick: () => {
+                            onOpenChange(false);
+                        }, children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })] }), _jsx("div", { className: "m-dialog__body", children: children }), footer ? _jsx("div", { className: "m-dialog__footer", children: footer }) : undefined] }));
+}

package/dist/Display.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ElementType } from "react";
+export type BadgeTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+export interface BadgeProps extends ComponentProps<"span"> {
+    tone?: BadgeTone;
+}
+/** Status must also be readable as text; never rely on the tone colour alone. */
+export declare function Badge({ tone, className, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export interface CardProps extends ComponentProps<"div"> {
+    as?: ElementType;
+    padded?: boolean;
+}
+export declare function Card({ as: Tag, padded, className, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Display.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** Status must also be readable as text; never rely on the tone colour alone. */
+export function Badge({ tone = "neutral", className, ...rest }) {
+    return (_jsx("span", { ...rest, className: cx("m-badge", className), "data-tone": tone }));
+}
+export function Card({ as: Tag = "div", padded = false, className, ...rest }) {
+    return (_jsx(Tag, { ...rest, className: cx("m-card", className), "data-padded": padded ? "" : undefined }));
+}

package/dist/Feedback.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface AvatarProps extends Omit<ComponentProps<"span">, "children"> {
+    /** Full name: used as the accessible name and for the initials fallback. */
+    name: string;
+    src?: string;
+    size?: "sm" | "md" | "lg";
+}
+export declare function Avatar({ name, src, size, className, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export type BannerTone = "info" | "success" | "warning" | "danger";
+export interface BannerProps extends Omit<ComponentProps<"div">, "title"> {
+    tone?: BannerTone;
+    title?: ReactNode;
+}
+/** Warnings and errors are announced immediately (`alert`); the rest politely (`status`). */
+export declare function Banner({ tone, title, className, children, ...rest }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export interface ProgressBarProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Accessible name (required). */
+    label: string;
+    /** Omit for an indeterminate bar. */
+    value?: number;
+    max?: number;
+}
+export declare function ProgressBar({ label, value, max, className, style, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export interface EmptyStateProps extends Omit<ComponentProps<"div">, "title"> {
+    title: ReactNode;
+    /** Optional call to action, e.g. a `Button`. */
+    action?: ReactNode;
+}
+export declare function EmptyState({ title, action, className, children, ...rest }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/Feedback.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+function initials(name) {
+    return name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part.charAt(0))
+        .join("");
+}
+export function Avatar({ name, src, size = "md", className, ...rest }) {
+    return (_jsx("span", { ...rest, className: cx("m-avatar", className), "data-size": size, role: "img", "aria-label": name, children: src ? _jsx("img", { src: src, alt: "" }) : initials(name) }));
+}
+/** Warnings and errors are announced immediately (`alert`); the rest politely (`status`). */
+export function Banner({ tone = "info", title, className, children, ...rest }) {
+    return (_jsxs("div", { role: tone === "danger" || tone === "warning" ? "alert" : "status", ...rest, className: cx("m-banner", className), "data-tone": tone, children: [title ? _jsx("div", { className: "m-banner__title", children: title }) : null, children] }));
+}
+export function ProgressBar({ label, value, max = 100, className, style, ...rest }) {
+    const percent = value === undefined
+        ? undefined
+        : Math.min(100, Math.max(0, (value / max) * 100));
+    return (_jsx("div", { ...rest, className: cx("m-progress", className), role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, style: percent === undefined
+            ? style
+            : {
+                ...style,
+                "--m-progress": `${String(percent)}%`,
+            }, children: _jsx("div", { className: "m-progress__bar" }) }));
+}
+export function EmptyState({ title, action, className, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx("m-empty", className), children: [_jsx("div", { className: "m-empty__title", children: title }), children ? _jsx("div", { children: children }) : null, action] }));
+}

package/dist/Fields.d.ts

@@ -0,0 +1,18 @@
+import type { IconDefinition } from "@interstellarforge/matter-icons";
+import type { ComponentProps } from "react";
+interface FieldProps {
+    /** Sets `aria-invalid` and the error border. */
+    invalid?: boolean;
+}
+export interface InputProps extends ComponentProps<"input">, FieldProps {
+    /** Decorative leading icon, e.g. `search`. The input still needs its own accessible name. */
+    icon?: IconDefinition;
+}
+export declare function Input({ invalid, icon, className, ...rest }: InputProps): import("react/jsx-runtime").JSX.Element;
+export interface TextareaProps extends ComponentProps<"textarea">, FieldProps {
+}
+export declare function Textarea({ invalid, className, ...rest }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export interface SelectProps extends ComponentProps<"select">, FieldProps {
+}
+export declare function Select({ invalid, className, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Fields.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Icon } from "./Icon.js";
+export function Input({ invalid, icon, className, ...rest }) {
+    const input = (_jsx("input", { ...rest, className: cx("m-input", icon ? undefined : className), "aria-invalid": invalid ? true : undefined }));
+    return icon ? (_jsxs("span", { className: cx("m-input-icon", className), children: [_jsx(Icon, { icon: icon }), input] })) : (input);
+}
+export function Textarea({ invalid, className, ...rest }) {
+    return (_jsx("textarea", { ...rest, className: cx("m-input m-textarea", className), "aria-invalid": invalid ? true : undefined }));
+}
+export function Select({ invalid, className, ...rest }) {
+    return (_jsx("select", { ...rest, className: cx("m-input m-select", className), "aria-invalid": invalid ? true : undefined }));
+}

package/dist/Icon.d.ts

@@ -0,0 +1,10 @@
+import type { IconDefinition } from "@interstellarforge/matter-icons";
+import type { ComponentProps } from "react";
+export interface IconProps extends Omit<ComponentProps<"svg">, "children" | "dangerouslySetInnerHTML"> {
+    /** A named export of `@interstellarforge/matter-icons`, e.g. `search` (tree-shakeable). */
+    icon: IconDefinition;
+    size?: number;
+    /** Accessible name. Without it the icon is decorative and hidden from assistive technology. */
+    label?: string;
+}
+export declare function Icon({ icon, size, label, className, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/Icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export function Icon({ icon, size = 18, label, className, ...rest }) {
+    return (_jsx("svg", { ...rest, className: cx("m-icon", className), width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, 
+        // The body is static markup from our own, SVGO-optimised icon sources.
+        dangerouslySetInnerHTML: { __html: icon.body } }));
+}

package/dist/Menu.d.ts

@@ -0,0 +1,12 @@
+export interface MenuItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MenuProps {
+    /** Visible text of the trigger button. */
+    triggerLabel: string;
+    items: MenuItem[];
+    onSelect: (id: string) => void;
+}
+export declare function Menu({ triggerLabel, items, onSelect }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/Menu.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+export function Menu({ triggerLabel, items, onSelect }) {
+    const menuId = useId();
+    const root = useRef(null);
+    const trigger = useRef(null);
+    const itemRefs = useRef([]);
+    const [open, setOpen] = useState(false);
+    const enabled = items.flatMap((item, index) => item.disabled ? [] : [index]);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function onPointerDown(event) {
+            if (!root.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+        };
+    }, [open]);
+    function focusItem(index) {
+        if (index !== undefined) {
+            itemRefs.current[index]?.focus();
+        }
+    }
+    function close() {
+        setOpen(false);
+        trigger.current?.focus();
+    }
+    function openAt(position) {
+        setOpen(true);
+        queueMicrotask(() => {
+            focusItem(position === "first" ? enabled[0] : enabled.at(-1));
+        });
+    }
+    function onMenuKeyDown(event) {
+        const current = itemRefs.current.findIndex((element) => element === document.activeElement);
+        const position = enabled.indexOf(current);
+        if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+            return;
+        }
+        const next = {
+            ArrowDown: enabled[(position + 1) % enabled.length],
+            ArrowUp: enabled[(position - 1 + enabled.length) % enabled.length],
+            Home: enabled[0],
+            End: enabled.at(-1),
+        }[event.key];
+        if (next !== undefined) {
+            event.preventDefault();
+            focusItem(next);
+            return;
+        }
+        if (event.key.length === 1) {
+            const typed = event.key.toLowerCase();
+            focusItem(enabled.find((index) => index > current &&
+                items[index]?.label.toLowerCase().startsWith(typed)) ??
+                enabled.find((index) => items[index]?.label.toLowerCase().startsWith(typed)));
+        }
+    }
+    return (_jsxs("div", { ref: root, className: "m-menu-wrap", children: [_jsx("button", { ref: trigger, type: "button", className: "m-button", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": menuId, onClick: () => {
+                    if (open) {
+                        setOpen(false);
+                    }
+                    else {
+                        openAt("first");
+                    }
+                }, onKeyDown: (event) => {
+                    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                        event.preventDefault();
+                        openAt(event.key === "ArrowDown" ? "first" : "last");
+                    }
+                }, children: triggerLabel }), _jsx("div", { id: menuId, role: "menu", className: "m-menu", hidden: !open, onKeyDown: onMenuKeyDown, children: items.map((item, index) => (_jsx("button", { ref: (element) => {
+                        itemRefs.current[index] = element;
+                    }, type: "button", role: "menuitem", className: "m-menu__item", tabIndex: -1, disabled: item.disabled, onClick: () => {
+                        onSelect(item.id);
+                        close();
+                    }, children: item.label }, item.id))) })] }));
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface TabItem {
+    id: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    items: TabItem[];
+    /** Accessible name of the tab list. */
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare function Tabs({ items, label, value, defaultValue, onValueChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tabs.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+export function Tabs({ items, label, value, defaultValue, onValueChange, }) {
+    const base = useId();
+    const refs = useRef(new Map());
+    const firstEnabled = items.find((item) => !item.disabled)?.id;
+    const [internal, setInternal] = useState(defaultValue ?? firstEnabled);
+    const selected = value ?? internal;
+    const enabled = items.filter((item) => !item.disabled);
+    function select(id) {
+        setInternal(id);
+        onValueChange?.(id);
+        refs.current.get(id)?.focus();
+    }
+    function onKeyDown(event) {
+        const index = enabled.findIndex((item) => item.id === selected);
+        const last = enabled.length - 1;
+        const target = {
+            ArrowRight: enabled[index === last ? 0 : index + 1],
+            ArrowLeft: enabled[index <= 0 ? last : index - 1],
+            Home: enabled[0],
+            End: enabled[last],
+        }[event.key];
+        if (target) {
+            event.preventDefault();
+            select(target.id);
+        }
+    }
+    return (_jsxs("div", { className: "m-tabs", children: [_jsx("div", { role: "tablist", "aria-label": label, className: "m-tablist", onKeyDown: onKeyDown, children: items.map((item) => (_jsx("button", { ref: (element) => {
+                        if (element) {
+                            refs.current.set(item.id, element);
+                        }
+                    }, type: "button", role: "tab", id: `${base}-tab-${item.id}`, className: "m-tab", "aria-selected": item.id === selected, "aria-controls": `${base}-panel-${item.id}`, tabIndex: item.id === selected ? 0 : -1, disabled: item.disabled, onClick: () => {
+                        select(item.id);
+                    }, children: item.label }, item.id))) }), items.map((item) => (_jsx("div", { role: "tabpanel", id: `${base}-panel-${item.id}`, className: "m-tabpanel", "aria-labelledby": `${base}-tab-${item.id}`, hidden: item.id !== selected, children: item.id === selected ? item.content : undefined }, item.id)))] }));
+}

package/dist/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+export interface TooltipProps {
+    content: string;
+    /** The single element that triggers the tooltip; it receives `aria-describedby`. */
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+}
+/** Opens on hover and focus; Esc dismisses. Placement is fixed to the top in the MVP (no collision handling). */
+export declare function Tooltip({ content, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useId, useState } from "react";
+/** Opens on hover and focus; Esc dismisses. Placement is fixed to the top in the MVP (no collision handling). */
+export function Tooltip({ content, children }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    return (_jsxs("span", { className: "m-tooltip-wrap", onMouseEnter: () => {
+            setOpen(true);
+        }, onMouseLeave: () => {
+            setOpen(false);
+        }, onFocus: () => {
+            setOpen(true);
+        }, onBlur: () => {
+            setOpen(false);
+        }, onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                setOpen(false);
+            }
+        }, children: [cloneElement(children, { "aria-describedby": id }), _jsx("span", { id: id, role: "tooltip", className: "m-tooltip", hidden: !open, children: content })] }));
+}

package/dist/cx.d.ts

@@ -0,0 +1,2 @@
+/** Joins class names, skipping empty values. Consumer classes are always kept. */
+export declare function cx(...names: (string | undefined)[]): string;

package/dist/cx.js

@@ -0,0 +1,4 @@
+/** Joins class names, skipping empty values. Consumer classes are always kept. */
+export function cx(...names) {
+    return names.filter(Boolean).join(" ");
+}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+export type { ButtonProps, ButtonVariant, ControlSize, IconButtonProps, } from "./Button.tsx";
+export { Button, IconButton } from "./Button.tsx";
+export type { DialogProps } from "./Dialog.tsx";
+export { Dialog } from "./Dialog.tsx";
+export type { BadgeProps, BadgeTone, CardProps } from "./Display.tsx";
+export { Badge, Card } from "./Display.tsx";
+export type { CheckboxProps, SwitchProps } from "./Controls.tsx";
+export { Checkbox, Switch } from "./Controls.tsx";
+export type { InputProps, SelectProps, TextareaProps } from "./Fields.tsx";
+export { Input, Select, Textarea } from "./Fields.tsx";
+export type { MenuItem, MenuProps } from "./Menu.tsx";
+export { Menu } from "./Menu.tsx";
+export type { TabItem, TabsProps } from "./Tabs.tsx";
+export { Tabs } from "./Tabs.tsx";
+export type { TooltipProps } from "./Tooltip.tsx";
+export { Tooltip } from "./Tooltip.tsx";
+export type { IconProps } from "./Icon.tsx";
+export { Icon } from "./Icon.tsx";
+export type { AvatarProps, BannerProps, BannerTone, EmptyStateProps, ProgressBarProps, } from "./Feedback.tsx";
+export { Avatar, Banner, EmptyState, ProgressBar } from "./Feedback.tsx";

package/dist/index.js

@@ -0,0 +1,10 @@
+export { Button, IconButton } from "./Button.js";
+export { Dialog } from "./Dialog.js";
+export { Badge, Card } from "./Display.js";
+export { Checkbox, Switch } from "./Controls.js";
+export { Input, Select, Textarea } from "./Fields.js";
+export { Menu } from "./Menu.js";
+export { Tabs } from "./Tabs.js";
+export { Tooltip } from "./Tooltip.js";
+export { Icon } from "./Icon.js";
+export { Avatar, Banner, EmptyState, ProgressBar } from "./Feedback.js";

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@interstellarforge/matter-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "license": "MIT",
+  "description": "Matter components for React 19 / Next.js. Styling comes from @interstellarforge/matter-css.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/interstellarforge/matter.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.8",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "axe-core": "4.14.0",
+    "jsdom": "30.1.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "vitest": "4.1.6"
+  },
+  "dependencies": {
+    "@interstellarforge/matter-icons": "0.2.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.