@rackbops/ui-react 0.1.0 → 0.1.2

package/dist/Button.d.ts

@@ -1,6 +1,13 @@
-import type { ButtonHTMLAttributes } from "react";
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { type ButtonHTMLAttributes, type RefAttributes } from "react";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, RefAttributes<HTMLButtonElement> {
     /** Visual emphasis. Maps to .rb-btn--{variant}. */
     variant?: "default" | "primary" | "accent" | "danger" | "ghost";
+    /** Size. "sm" maps to .rb-btn--sm for inline/table-row actions; "md" is the default. */
+    size?: "sm" | "md";
+    /**
+     * Icon-only mode: square hit target, no text gap. Maps to .rb-icon-btn.
+     * There's no visible label, so pass an accessible name via `aria-label`.
+     */
+    iconOnly?: boolean;
 }
-export declare function Button({ variant, type, className, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dist/Button.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { cx } from "./cx.js";
-export function Button({ variant = "default", type = "button", className, ...rest }) {
+export const Button = forwardRef(function Button({ variant = "default", size = "md", iconOnly = false, type = "button", className, ...rest }, ref) {
     // Default type="button" so a Button inside a <form> doesn't submit it on
     // click; pass type="submit" explicitly when that's what you want.
-    return (_jsx("button", { type: type, className: cx("rb-btn", variant !== "default" && `rb-btn--${variant}`, className), ...rest }));
-}
+    return (_jsx("button", { ref: ref, type: type, className: cx("rb-btn", variant !== "default" && `rb-btn--${variant}`, size === "sm" && "rb-btn--sm", iconOnly && "rb-icon-btn", className), ...rest }));
+});
+Button.displayName = "Button";

package/dist/Card.d.ts

@@ -1,6 +1,12 @@
-import type { HTMLAttributes } from "react";
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    /** Raised elevation (.rb-card--raised); themes that don't define it fall back. */
+import { type HTMLAttributes, type RefAttributes } from "react";
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+    /**
+     * Raised elevation (.rb-card--raised). Falls back to the base card in the
+     * three nazuraki ports: luminous-precision and neon-butterfly have no
+     * second elevation tier upstream at all; summer-cloud's upstream second
+     * tier is `--floating`, already carried over, so it doesn't also add a
+     * near-duplicate `--raised`.
+     */
     raised?: boolean;
 }
-export declare function Card({ raised, className, ...rest }: CardProps): import("react").JSX.Element;
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/Card.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { cx } from "./cx.js";
-export function Card({ raised, className, ...rest }) {
-    return _jsx("div", { className: cx("rb-card", raised && "rb-card--raised", className), ...rest });
-}
+export const Card = forwardRef(function Card({ raised, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: cx("rb-card", raised && "rb-card--raised", className), ...rest }));
+});
+Card.displayName = "Card";

package/dist/Dialog.d.ts

@@ -1,11 +1,9 @@
-import { type ReactNode } from "react";
-export interface DialogProps {
+import { type DialogHTMLAttributes, type ReactNode, type RefAttributes } from "react";
+export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title" | "onClose">, RefAttributes<HTMLDialogElement> {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
     actions?: ReactNode;
-    children?: ReactNode;
-    className?: string;
 }
 /** A native <dialog> driven by the `open` prop (showModal/close). */
-export declare function Dialog({ open, onClose, title, actions, children, className }: DialogProps): import("react").JSX.Element;
+export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & RefAttributes<HTMLDialogElement>>;

package/dist/Dialog.js

@@ -1,18 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef } from "react";
+import { forwardRef, useEffect, useId, useRef, } from "react";
 import { cx } from "./cx.js";
+/** Combines an internal ref this component needs with a consumer-supplied one,
+ * so both end up pointing at the same DOM node. */
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }
+    };
+}
 /** A native <dialog> driven by the `open` prop (showModal/close). */
-export function Dialog({ open, onClose, title, actions, children, className }) {
-    const ref = useRef(null);
+export const Dialog = forwardRef(function Dialog({ open, onClose, title, actions, children, className, ...rest }, forwardedRef) {
+    const internalRef = useRef(null);
     const titleId = useId();
+    // No dependency array: a native close (Escape, or a method="dialog" form)
+    // flips el.open out from under the `open` prop with nothing to reconcile
+    // them, so a stranded open=true re-render must re-sync too, not just a
+    // render where `open` itself changed (issue #31).
     useEffect(() => {
-        const el = ref.current;
+        const el = internalRef.current;
         if (!el)
             return;
         if (open && !el.open)
             el.showModal();
         else if (!open && el.open)
             el.close();
-    }, [open]);
-    return (_jsxs("dialog", { ref: ref, className: cx("rb-dialog", className), onClose: onClose, "aria-labelledby": title !== undefined ? titleId : undefined, children: [_jsxs("div", { className: "rb-dialog__body", children: [title !== undefined && (_jsx("h2", { id: titleId, className: "rb-dialog__title", children: title })), children] }), actions !== undefined && _jsx("div", { className: "rb-dialog__actions", children: actions })] }));
-}
+    });
+    return (_jsxs("dialog", { ref: mergeRefs(internalRef, forwardedRef), className: cx("rb-dialog", className), onClose: onClose, "aria-labelledby": title !== undefined ? titleId : undefined, ...rest, children: [_jsxs("div", { className: "rb-dialog__body", children: [title !== undefined && (_jsx("h2", { id: titleId, className: "rb-dialog__title", children: title })), children] }), actions !== undefined && _jsx("div", { className: "rb-dialog__actions", children: actions })] }));
+});
+Dialog.displayName = "Dialog";

package/dist/LinksIndex.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import { type HTMLAttributes, type RefAttributes } from "react";
 export interface LinkUrl {
     label: string;
     url: string;
@@ -17,7 +17,7 @@ export interface LinkItem {
     host?: string;
     monitored?: boolean;
 }
-export interface LinksIndexProps extends HTMLAttributes<HTMLDivElement> {
+export interface LinksIndexProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     categories: LinkCategory[];
     links: LinkItem[];
 }
@@ -26,4 +26,4 @@ export interface LinksIndexProps extends HTMLAttributes<HTMLDivElement> {
  * of `rb-card`s; links whose `category` is not listed collect into a trailing "Other" group. No
  * router assumed -- external URLs open in a new tab. Themed by the consumer's `data-rb-style`.
  */
-export declare function LinksIndex({ categories, links, className, ...rest }: LinksIndexProps): import("react").JSX.Element;
+export declare const LinksIndex: import("react").ForwardRefExoticComponent<Omit<LinksIndexProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/LinksIndex.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Card } from "./Card.js";
 import { Badge } from "./feedback.js";
 // Structural inline layout only -- the card/badge surfaces + colour come from @rackbops/styles
@@ -9,8 +10,9 @@ const gridStyle = {
     gridTemplateColumns: "repeat(auto-fill, minmax(16rem, 1fr))",
     gap: "var(--rb-space-4)",
 };
-// Reset the url list structurally (no bullets/indent) so it renders the same under every theme --
-// the themes don't all reset a bare `ul`.
+// Reset the url list structurally (no bullets/indent) -- this is a link-nav list, not prose, so it
+// deliberately opts out of the themes' bare `ul` treatment (disc markers + indent) rather than
+// working around an inconsistency between them.
 const listStyle = { listStyle: "none", margin: 0, padding: 0 };
 // External = an http(s) or protocol-relative (`//host`) url -> opens in a new tab; anything else
 // (relative, mailto:, tel:, ...) stays a plain in-page link.
@@ -26,11 +28,12 @@ function Group({ label, items }) {
  * of `rb-card`s; links whose `category` is not listed collect into a trailing "Other" group. No
  * router assumed -- external URLs open in a new tab. Themed by the consumer's `data-rb-style`.
  */
-export function LinksIndex({ categories, links, className, ...rest }) {
+export const LinksIndex = forwardRef(function LinksIndex({ categories, links, className, ...rest }, ref) {
     const known = new Set(categories.map((c) => c.id));
     const other = links.filter((l) => !known.has(l.category));
-    return (_jsxs("div", { className: className, ...rest, children: [categories.map((cat) => {
+    return (_jsxs("div", { ref: ref, className: className, ...rest, children: [categories.map((cat) => {
                 const items = links.filter((l) => l.category === cat.id);
                 return items.length > 0 ? _jsx(Group, { label: cat.label, items: items }, cat.id) : null;
             }), other.length > 0 ? _jsx(Group, { label: "Other", items: other }) : null] }));
-}
+});
+LinksIndex.displayName = "LinksIndex";

package/dist/NavLink.d.ts

@@ -1,6 +1,6 @@
-import type { AnchorHTMLAttributes } from "react";
-export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+import { type AnchorHTMLAttributes, type RefAttributes } from "react";
+export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, RefAttributes<HTMLAnchorElement> {
     /** Marks the active route (.rb-link--active). */
     active?: boolean;
 }
-export declare function NavLink({ active, className, ...rest }: NavLinkProps): import("react").JSX.Element;
+export declare const NavLink: import("react").ForwardRefExoticComponent<Omit<NavLinkProps, "ref"> & RefAttributes<HTMLAnchorElement>>;

package/dist/NavLink.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { cx } from "./cx.js";
-export function NavLink({ active, className, ...rest }) {
-    return (_jsx("a", { "aria-current": active ? "page" : undefined, className: cx("rb-link", active && "rb-link--active", className), ...rest }));
-}
+export const NavLink = forwardRef(function NavLink({ active, className, ...rest }, ref) {
+    return (_jsx("a", { ref: ref, "aria-current": active ? "page" : undefined, className: cx("rb-link", active && "rb-link--active", className), ...rest }));
+});
+NavLink.displayName = "NavLink";

package/dist/NavRail.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
+export interface NavRailItem {
+    /** Matched against `activeId`; also used as the React list key. */
+    id: string;
+    label: ReactNode;
+    href?: string;
+}
+export interface NavRailProps extends HTMLAttributes<HTMLElement>, RefAttributes<HTMLElement> {
+    items: NavRailItem[];
+    /** Id of the currently active item (mirrors NavLink's own `active` contract --
+     * no second active-state convention). No item is marked active if it matches none. */
+    activeId?: string;
+}
+/**
+ * A vertical nav container (.rb-nav-rail) rendering one NavLink per item.
+ * Controlled by the caller via `activeId`, same as NavLink's own `active` prop --
+ * this component owns no state of its own.
+ */
+export declare const NavRail: import("react").ForwardRefExoticComponent<Omit<NavRailProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/NavRail.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+import { NavLink } from "./NavLink.js";
+/**
+ * A vertical nav container (.rb-nav-rail) rendering one NavLink per item.
+ * Controlled by the caller via `activeId`, same as NavLink's own `active` prop --
+ * this component owns no state of its own.
+ */
+export const NavRail = forwardRef(function NavRail({ items, activeId, className, ...rest }, ref) {
+    return (_jsx("nav", { ref: ref, className: cx("rb-nav-rail", className), ...rest, children: items.map((item) => (_jsx(NavLink, { href: item.href, active: item.id === activeId, children: item.label }, item.id))) }));
+});
+NavRail.displayName = "NavRail";

package/dist/Stepper.d.ts

@@ -0,0 +1,26 @@
+import { type OlHTMLAttributes, type ReactNode, type RefAttributes } from "react";
+export interface StepperStep {
+    /** Also used as the React list key. */
+    id: string;
+    label: ReactNode;
+    /** Shown for the current/upcoming states; a complete step always shows the
+     * built-in checkmark instead, regardless of this. */
+    icon?: ReactNode;
+}
+export interface StepperProps extends OlHTMLAttributes<HTMLOListElement>, RefAttributes<HTMLOListElement> {
+    steps: StepperStep[];
+    /** 0-based index of the current step; steps before it read complete, after
+     * it read upcoming. Drives each step's state -- and, through it, the
+     * connector segment leading into that step -- there is no separate
+     * progress-percentage prop to keep in sync with `current`. */
+    current: number;
+}
+/**
+ * A delivery/milestone stepper (.rb-stepper): renders one <li> per step, each
+ * classed .rb-stepper--complete/--current/--upcoming derived from `current` --
+ * callers never compute step state themselves. Each step's own class also
+ * drives the connector segment leading into it (CSS: `.rb-stepper__step:not(
+ * :first-child).rb-stepper--complete/--current::before`), so the rail fill
+ * and the step states can never drift out of sync with each other.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<Omit<StepperProps, "ref"> & RefAttributes<HTMLOListElement>>;

package/dist/Stepper.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+function CheckIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 12.5 9.5 18 20 6", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * A delivery/milestone stepper (.rb-stepper): renders one <li> per step, each
+ * classed .rb-stepper--complete/--current/--upcoming derived from `current` --
+ * callers never compute step state themselves. Each step's own class also
+ * drives the connector segment leading into it (CSS: `.rb-stepper__step:not(
+ * :first-child).rb-stepper--complete/--current::before`), so the rail fill
+ * and the step states can never drift out of sync with each other.
+ */
+export const Stepper = forwardRef(function Stepper({ steps, current, className, ...rest }, ref) {
+    return (_jsx("ol", { ref: ref, className: cx("rb-stepper", className), ...rest, children: steps.map((step, i) => {
+            const state = i < current ? "complete" : i === current ? "current" : "upcoming";
+            return (_jsxs("li", { className: cx("rb-stepper__step", `rb-stepper--${state}`), "aria-current": state === "current" ? "step" : undefined, children: [_jsx("span", { className: "rb-stepper__node", children: state === "complete" ? _jsx(CheckIcon, {}) : (step.icon ?? i + 1) }), _jsx("span", { className: "rb-stepper__label", children: step.label })] }, step.id));
+        }) }));
+});
+Stepper.displayName = "Stepper";

package/dist/Tabs.d.ts

@@ -1,13 +1,13 @@
-import { type ReactNode } from "react";
+import { type ReactNode, type RefAttributes } from "react";
 export interface TabItem {
     id: string;
     label: ReactNode;
     content: ReactNode;
 }
-export interface TabsProps {
+export interface TabsProps extends RefAttributes<HTMLDivElement> {
     items: TabItem[];
     /** Initially active tab id; defaults to the first item. */
     defaultId?: string;
     className?: string;
 }
-export declare function Tabs({ items, defaultId, className }: TabsProps): import("react").JSX.Element;
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/Tabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
+import { forwardRef, useId, useRef, useState, } from "react";
 import { cx } from "./cx.js";
-export function Tabs({ items, defaultId, className }) {
+export const Tabs = forwardRef(function Tabs({ items, defaultId, className }, ref) {
     const base = useId();
     const [active, setActive] = useState(defaultId ?? items[0]?.id);
     // Fall back to the first tab if `active` names no item, so exactly one tab is
@@ -26,7 +26,7 @@ export function Tabs({ items, defaultId, className }) {
         // Move focus with the selection — the whole point of the roving tabindex.
         tabRefs.current[next]?.focus();
     };
-    return (_jsxs("div", { className: className, children: [_jsx("div", { className: "rb-tabs", role: "tablist", children: items.map((t, idx) => {
+    return (_jsxs("div", { ref: ref, className: className, children: [_jsx("div", { className: "rb-tabs", role: "tablist", children: items.map((t, idx) => {
                     const selected = t.id === activeId;
                     return (_jsx("button", { ref: (el) => {
                             tabRefs.current[idx] = el;
@@ -35,4 +35,5 @@ export function Tabs({ items, defaultId, className }) {
                 const selected = t.id === activeId;
                 return (_jsx("div", { className: "rb-tabpanel", role: "tabpanel", id: `${base}-panel-${t.id}`, "aria-labelledby": `${base}-tab-${t.id}`, hidden: !selected, tabIndex: 0, children: t.content }, t.id));
             })] }));
-}
+});
+Tabs.displayName = "Tabs";

package/dist/feedback.d.ts

@@ -1,14 +1,17 @@
-import type { HTMLAttributes, ProgressHTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ProgressHTMLAttributes, type ReactNode, type RefAttributes } from "react";
 export type SemanticVariant = "info" | "success" | "warning" | "danger";
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
     variant?: SemanticVariant;
 }
-export declare function Badge({ variant, className, ...rest }: BadgeProps): import("react").JSX.Element;
-export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">, RefAttributes<HTMLDivElement> {
     variant?: SemanticVariant;
     title?: ReactNode;
 }
-export declare function Alert({ variant, title, className, children, ...rest }: AlertProps): import("react").JSX.Element;
-export type ProgressProps = ProgressHTMLAttributes<HTMLProgressElement>;
-export declare function Progress({ className, ...rest }: ProgressProps): import("react").JSX.Element;
-export declare function Spinner({ className, ...rest }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export interface ProgressProps extends ProgressHTMLAttributes<HTMLProgressElement>, RefAttributes<HTMLProgressElement> {
+}
+export declare const Progress: import("react").ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & RefAttributes<HTMLProgressElement>>;
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
+}
+export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & RefAttributes<HTMLSpanElement>>;

package/dist/feedback.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
 import { cx } from "./cx.js";
-export function Badge({ variant, className, ...rest }) {
-    return (_jsx("span", { className: cx("rb-badge", variant && `rb-badge--${variant}`, className), ...rest }));
-}
-export function Alert({ variant, title, className, children, ...rest }) {
-    return (_jsxs("div", { role: "alert", className: cx("rb-alert", variant && `rb-alert--${variant}`, className), ...rest, children: [title !== undefined && _jsx("div", { className: "rb-alert__title", children: title }), children] }));
-}
-export function Progress({ className, ...rest }) {
-    return _jsx("progress", { className: cx("rb-progress", className), ...rest });
-}
-export function Spinner({ className, ...rest }) {
-    return (_jsx("span", { role: "status", "aria-label": "Loading", className: cx("rb-spinner", className), ...rest }));
-}
+export const Badge = forwardRef(function Badge({ variant, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: cx("rb-badge", variant && `rb-badge--${variant}`, className), ...rest }));
+});
+Badge.displayName = "Badge";
+export const Alert = forwardRef(function Alert({ variant, title, className, children, ...rest }, ref) {
+    return (_jsxs("div", { ref: ref, role: "alert", className: cx("rb-alert", variant && `rb-alert--${variant}`, className), ...rest, children: [title !== undefined && _jsx("div", { className: "rb-alert__title", children: title }), children] }));
+});
+Alert.displayName = "Alert";
+export const Progress = forwardRef(function Progress({ className, ...rest }, ref) {
+    return _jsx("progress", { ref: ref, className: cx("rb-progress", className), ...rest });
+});
+Progress.displayName = "Progress";
+export const Spinner = forwardRef(function Spinner({ className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, role: "status", "aria-label": "Loading", className: cx("rb-spinner", className), ...rest }));
+});
+Spinner.displayName = "Spinner";

package/dist/form.d.ts

@@ -1,17 +1,23 @@
-import type { HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
-export type InputProps = InputHTMLAttributes<HTMLInputElement>;
-export declare function Input({ className, ...rest }: InputProps): import("react").JSX.Element;
-export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
-export declare function Textarea({ className, ...rest }: TextareaProps): import("react").JSX.Element;
-export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
-export declare function Select({ className, ...rest }: SelectProps): import("react").JSX.Element;
-export type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
-export declare function Label({ className, ...rest }: LabelProps): import("react").JSX.Element;
-export declare function Field({ className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+import { type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, RefAttributes<HTMLInputElement> {
+}
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, RefAttributes<HTMLTextAreaElement> {
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement>, RefAttributes<HTMLSelectElement> {
+}
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & RefAttributes<HTMLSelectElement>>;
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement>, RefAttributes<HTMLLabelElement> {
+}
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & RefAttributes<HTMLLabelElement>>;
+export interface FieldProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+}
+export declare const Field: import("react").ForwardRefExoticComponent<Omit<FieldProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type">, RefAttributes<HTMLInputElement> {
     /** Optional label text; when set the control is wrapped in a .rb-choice row. */
     label?: ReactNode;
 }
-export declare function Checkbox({ label, className, ...rest }: ChoiceProps): import("react").JSX.Element;
-export declare function Radio({ label, className, ...rest }: ChoiceProps): import("react").JSX.Element;
-export declare function Switch({ label, className, ...rest }: ChoiceProps): import("react").JSX.Element;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<ChoiceProps, "ref"> & RefAttributes<HTMLInputElement>>;
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<ChoiceProps, "ref"> & RefAttributes<HTMLInputElement>>;
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<ChoiceProps, "ref"> & RefAttributes<HTMLInputElement>>;

package/dist/form.js

@@ -1,32 +1,41 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
 import { cx } from "./cx.js";
-export function Input({ className, ...rest }) {
-    return _jsx("input", { className: cx("rb-input", className), ...rest });
-}
-export function Textarea({ className, ...rest }) {
-    return _jsx("textarea", { className: cx("rb-textarea", className), ...rest });
-}
-export function Select({ className, ...rest }) {
-    return _jsx("select", { className: cx("rb-select", className), ...rest });
-}
-export function Label({ className, ...rest }) {
-    return _jsx("label", { className: cx("rb-label", className), ...rest });
-}
-export function Field({ className, ...rest }) {
-    return _jsx("div", { className: cx("rb-field", className), ...rest });
-}
+export const Input = forwardRef(function Input({ className, ...rest }, ref) {
+    return _jsx("input", { ref: ref, className: cx("rb-input", className), ...rest });
+});
+Input.displayName = "Input";
+export const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
+    return _jsx("textarea", { ref: ref, className: cx("rb-textarea", className), ...rest });
+});
+Textarea.displayName = "Textarea";
+export const Select = forwardRef(function Select({ className, ...rest }, ref) {
+    return _jsx("select", { ref: ref, className: cx("rb-select", className), ...rest });
+});
+Select.displayName = "Select";
+export const Label = forwardRef(function Label({ className, ...rest }, ref) {
+    return _jsx("label", { ref: ref, className: cx("rb-label", className), ...rest });
+});
+Label.displayName = "Label";
+export const Field = forwardRef(function Field({ className, ...rest }, ref) {
+    return _jsx("div", { ref: ref, className: cx("rb-field", className), ...rest });
+});
+Field.displayName = "Field";
 /** A checkbox/radio/switch control, optionally wrapped with its label. */
 function ChoiceControl({ label, control }) {
     if (label === undefined)
         return _jsx(_Fragment, { children: control });
     return (_jsxs("label", { className: "rb-choice", children: [control, label] }));
 }
-export function Checkbox({ label, className, ...rest }) {
-    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { type: "checkbox", className: cx("rb-checkbox", className), ...rest }) }));
-}
-export function Radio({ label, className, ...rest }) {
-    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { type: "radio", className: cx("rb-radio", className), ...rest }) }));
-}
-export function Switch({ label, className, ...rest }) {
-    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { type: "checkbox", role: "switch", className: cx("rb-switch", className), ...rest }) }));
-}
+export const Checkbox = forwardRef(function Checkbox({ label, className, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { ref: ref, type: "checkbox", className: cx("rb-checkbox", className), ...rest }) }));
+});
+Checkbox.displayName = "Checkbox";
+export const Radio = forwardRef(function Radio({ label, className, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { ref: ref, type: "radio", className: cx("rb-radio", className), ...rest }) }));
+});
+Radio.displayName = "Radio";
+export const Switch = forwardRef(function Switch({ label, className, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { ref: ref, type: "checkbox", role: "switch", className: cx("rb-switch", className), ...rest }) }));
+});
+Switch.displayName = "Switch";

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 export { Button, type ButtonProps } from "./Button.js";
 export { Card, type CardProps } from "./Card.js";
 export { NavLink, type NavLinkProps } from "./NavLink.js";
-export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, type InputProps, type TextareaProps, type SelectProps, type LabelProps, type ChoiceProps, } from "./form.js";
-export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type ProgressProps, type SemanticVariant, } from "./feedback.js";
+export { NavRail, type NavRailProps, type NavRailItem } from "./NavRail.js";
+export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, type InputProps, type TextareaProps, type SelectProps, type LabelProps, type FieldProps, type ChoiceProps, } from "./form.js";
+export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type ProgressProps, type SpinnerProps, type SemanticVariant, } from "./feedback.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
 export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
+export { Stepper, type StepperProps, type StepperStep } from "./Stepper.js";
 export { LinksIndex, type LinksIndexProps, type LinkItem, type LinkCategory, type LinkUrl, } from "./LinksIndex.js";
 export { cx } from "./cx.js";

package/dist/index.js

@@ -1,9 +1,11 @@
 export { Button } from "./Button.js";
 export { Card } from "./Card.js";
 export { NavLink } from "./NavLink.js";
+export { NavRail } from "./NavRail.js";
 export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
 export { Dialog } from "./Dialog.js";
 export { Tabs } from "./Tabs.js";
+export { Stepper } from "./Stepper.js";
 export { LinksIndex, } from "./LinksIndex.js";
 export { cx } from "./cx.js";

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React components styled by @rackbops/styles rackbops themes.",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/roshne/rackbops-ui-ux-std-lib.git",
@@ -29,9 +29,11 @@
     "react": ">=18"
   },
   "devDependencies": {
+    "@types/jsdom": "^30.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsx": "^4.19.0",