@rackbops/ui-react 0.2.13 → 0.2.15

package/dist/Dialog.d.ts

@@ -2,6 +2,11 @@ import { type DialogHTMLAttributes, type ReactNode, type RefAttributes } from "r
 export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title" | "onClose">, RefAttributes<HTMLDialogElement> {
     open: boolean;
     onClose: () => void;
+    /**
+     * Renders as a heading in `.rb-dialog__title` (linked via aria-labelledby), replacing the
+     * native HTML `title` tooltip attribute -- there's no way to set a real tooltip through
+     * this component.
+     */
     title?: ReactNode;
     actions?: ReactNode;
 }

package/dist/LinksIndex.d.ts

@@ -1,6 +1,11 @@
 import { type HTMLAttributes, type RefAttributes } from "react";
 export interface LinkUrl {
     label: string;
+    /**
+     * Rendered as-is in an <a href> -- consumer-authored/trusted data (the app/site URLs you
+     * configure), not sanitized against `javascript:`-style schemes. Don't feed this untrusted
+     * input without validating the scheme first.
+     */
     url: string;
 }
 export interface LinkCategory {
@@ -20,6 +25,12 @@ export interface LinkItem {
 export interface LinksIndexProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     categories: LinkCategory[];
     links: LinkItem[];
+    /**
+     * Heading level for each category label; each card's own heading renders one level deeper
+     * (clamped to h6). Set this to match whatever heading LinksIndex is embedded under, so
+     * heading order stays sequential instead of skipping or repeating a level. Defaults to 2.
+     */
+    level?: 2 | 3 | 4 | 5 | 6;
 }
 /**
  * A generic, data-driven grouped index of apps/sites. Iterates `categories` in order, each a group

package/dist/LinksIndex.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+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
@@ -17,23 +17,29 @@ 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.
 const isExternal = (url) => /^(https?:)?\/\//i.test(url);
-function LinkCard({ link }) {
-    return (_jsxs(Card, { children: [_jsxs("h3", { children: [link.name, link.monitored ? (_jsxs(_Fragment, { children: [" ", _jsx(Badge, { variant: "success", children: "monitored" })] })) : null] }), link.description ? _jsx("p", { children: link.description }) : null, _jsx("ul", { style: listStyle, children: link.urls.map((u) => (_jsx("li", { children: isExternal(u.url) ? (_jsx("a", { href: u.url, target: "_blank", rel: "noreferrer noopener", children: u.label })) : (_jsx("a", { href: u.url, children: u.label })) }, u.url))) }), link.host ? _jsx("p", { children: link.host }) : null] }));
+function LinkCard({ link, level }) {
+    const Heading = `h${level}`;
+    return (_jsxs(Card, { children: [_jsxs(Heading, { children: [link.name, link.monitored ? (_jsxs(_Fragment, { children: [" ", _jsx(Badge, { variant: "success", children: "monitored" })] })) : null] }), link.description ? _jsx("p", { children: link.description }) : null, _jsx("ul", { style: listStyle, children: link.urls.map((u) => (
+                // Two urls on one link can share a `url` with different `label`s ("prod" /
+                // "canonical") -- key on the pair, not the url alone, so they don't collide.
+                _jsx("li", { children: isExternal(u.url) ? (_jsx("a", { href: u.url, target: "_blank", rel: "noreferrer noopener", children: u.label })) : (_jsx("a", { href: u.url, children: u.label })) }, `${u.label}::${u.url}`))) }), link.host ? _jsx("p", { children: link.host }) : null] }));
 }
-function Group({ label, items }) {
-    return (_jsxs("section", { children: [_jsx("h2", { children: label }), _jsx("div", { style: gridStyle, children: items.map((link) => (_jsx(LinkCard, { link: link }, link.name))) })] }));
+function Group({ label, items, level, }) {
+    const Heading = `h${level}`;
+    const cardLevel = (level < 6 ? level + 1 : 6);
+    return (_jsxs("section", { children: [_jsx(Heading, { children: label }), _jsx("div", { style: gridStyle, children: items.map((link) => (_jsx(LinkCard, { link: link, level: cardLevel }, link.name))) })] }));
 }
 /**
  * A generic, data-driven grouped index of apps/sites. Iterates `categories` in order, each a group
  * 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 const LinksIndex = forwardRef(function LinksIndex({ categories, links, className, ...rest }, ref) {
+export const LinksIndex = forwardRef(function LinksIndex({ categories, links, className, level = 2, ...rest }, ref) {
     const known = new Set(categories.map((c) => c.id));
     const other = links.filter((l) => !known.has(l.category));
     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] }));
+                return items.length > 0 ? (_jsx(Group, { label: cat.label, items: items, level: level }, cat.id)) : null;
+            }), other.length > 0 ? _jsx(Group, { label: "Other", items: other, level: level }) : null] }));
 });
 LinksIndex.displayName = "LinksIndex";

package/dist/NavRail.d.ts

@@ -1,9 +1,10 @@
-import { type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
-export interface NavRailItem {
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
+export interface NavRailItem extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "id" | "href"> {
     /** Matched against `activeId`; also used as the React list key. */
     id: string;
     label: ReactNode;
     href?: string;
+    [dataAttr: `data-${string}`]: unknown;
 }
 export interface NavRailProps extends HTMLAttributes<HTMLElement>, RefAttributes<HTMLElement> {
     items: NavRailItem[];
@@ -14,6 +15,8 @@ export interface NavRailProps extends HTMLAttributes<HTMLElement>, RefAttributes
 /**
  * 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.
+ * this component owns no state of its own. Any extra props on an item (onClick, target,
+ * rel, aria-*, data-*, className, ...) forward onto that item's own NavLink/<a> -- e.g. to
+ * intercept a click for a client router while still setting a real `href`.
  */
 export declare const NavRail: import("react").ForwardRefExoticComponent<Omit<NavRailProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/NavRail.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+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.
+ * this component owns no state of its own. Any extra props on an item (onClick, target,
+ * rel, aria-*, data-*, className, ...) forward onto that item's own NavLink/<a> -- e.g. to
+ * intercept a click for a client router while still setting a real `href`.
  */
 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))) }));
+    return (_jsx("nav", { ref: ref, className: cx("rb-nav-rail", className), ...rest, children: items.map(({ id, label, href, ...itemRest }) => (_jsx(NavLink, { href: href, active: id === activeId, ...itemRest, children: label }, id))) }));
 });
 NavRail.displayName = "NavRail";

package/dist/Tabs.d.ts

@@ -1,13 +1,12 @@
-import { type ReactNode, type RefAttributes } from "react";
+import { type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
 export interface TabItem {
     id: string;
     label: ReactNode;
     content: ReactNode;
 }
-export interface TabsProps extends RefAttributes<HTMLDivElement> {
+export interface TabsProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     items: TabItem[];
     /** Initially active tab id; defaults to the first item. */
     defaultId?: string;
-    className?: string;
 }
 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 { forwardRef, useId, useRef, useState, } from "react";
 import { cx } from "./cx.js";
-export const Tabs = forwardRef(function Tabs({ items, defaultId, className }, ref) {
+export const Tabs = forwardRef(function Tabs({ items, defaultId, className, ...rest }, 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,13 @@ export const Tabs = forwardRef(function Tabs({ items, defaultId, className }, re
         // Move focus with the selection — the whole point of the roving tabindex.
         tabRefs.current[next]?.focus();
     };
-    return (_jsxs("div", { ref: ref, className: className, children: [_jsx("div", { className: "rb-tabs", role: "tablist", children: items.map((t, idx) => {
+    return (
+    // The outer <div> is a plain structural wrapper -- an ARIA tablist should
+    // contain only `tab` children, so the tabpanels below live as its
+    // siblings instead. That's the element `ref` points to; className and
+    // arbitrary props (aria-label, data-testid, id, ...) belong on the actual
+    // role="tablist" element, which is what they're meant to reach.
+    _jsxs("div", { ref: ref, children: [_jsx("div", { className: cx("rb-tabs", className), role: "tablist", ...rest, children: items.map((t, idx) => {
                     const selected = t.id === activeId;
                     return (_jsx("button", { ref: (el) => {
                             tabRefs.current[idx] = el;

package/dist/feedback.d.ts

@@ -6,8 +6,13 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & RefAttributes<HTMLSpanElement>>;
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">, RefAttributes<HTMLDivElement> {
     variant?: SemanticVariant;
+    /**
+     * Renders as a heading in `.rb-alert__title`, replacing the native HTML `title` tooltip
+     * attribute -- there's no way to set a real tooltip through this component.
+     */
     title?: ReactNode;
 }
+/** A status banner (.rb-alert); `role="alert"` announces it to screen readers on mount/update. */
 export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export interface ProgressProps extends ProgressHTMLAttributes<HTMLProgressElement>, RefAttributes<HTMLProgressElement> {
 }

package/dist/feedback.js

@@ -5,6 +5,7 @@ export const Badge = forwardRef(function Badge({ variant, className, ...rest },
     return (_jsx("span", { ref: ref, className: cx("rb-badge", variant && `rb-badge--${variant}`, className), ...rest }));
 });
 Badge.displayName = "Badge";
+/** A status banner (.rb-alert); `role="alert"` announces it to screen readers on mount/update. */
 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] }));
 });

package/dist/form.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import { type CSSProperties, 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>>;
@@ -17,6 +17,10 @@ export declare const Field: import("react").ForwardRefExoticComponent<Omit<Field
 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;
+    /** Styles the .rb-choice row itself (e.g. margins, flex alignment) -- `className` still styles the control. Only used when `label` is set. */
+    wrapperClassName?: string;
+    /** Styles the .rb-choice row itself; `style` still styles the control. Only used when `label` is set. */
+    wrapperStyle?: CSSProperties;
 }
 export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<ChoiceProps, "ref"> & RefAttributes<HTMLInputElement>>;
 export declare const Radio: import("react").ForwardRefExoticComponent<Omit<ChoiceProps, "ref"> & RefAttributes<HTMLInputElement>>;

package/dist/form.js

@@ -22,20 +22,20 @@ export const Field = forwardRef(function Field({ className, ...rest }, ref) {
 });
 Field.displayName = "Field";
 /** A checkbox/radio/switch control, optionally wrapped with its label. */
-function ChoiceControl({ label, control }) {
+function ChoiceControl({ label, control, wrapperClassName, wrapperStyle, }) {
     if (label === undefined)
         return _jsx(_Fragment, { children: control });
-    return (_jsxs("label", { className: "rb-choice", children: [control, label] }));
+    return (_jsxs("label", { className: cx("rb-choice", wrapperClassName), style: wrapperStyle, children: [control, label] }));
 }
-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 }) }));
+export const Checkbox = forwardRef(function Checkbox({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, 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 }) }));
+export const Radio = forwardRef(function Radio({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, 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 }) }));
+export const Switch = forwardRef(function Switch({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, type: "checkbox", role: "switch", className: cx("rb-switch", className), ...rest }) }));
 });
 Switch.displayName = "Switch";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {