@rackbops/ui-react 0.1.0

package/dist/Button.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual emphasis. Maps to .rb-btn--{variant}. */
+    variant?: "default" | "primary" | "accent" | "danger" | "ghost";
+}
+export declare function Button({ variant, type, className, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export function Button({ variant = "default", type = "button", className, ...rest }) {
+    // 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 }));
+}

package/dist/Card.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Raised elevation (.rb-card--raised); themes that don't define it fall back. */
+    raised?: boolean;
+}
+export declare function Card({ raised, className, ...rest }: CardProps): import("react").JSX.Element;

package/dist/Card.js

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

package/dist/Dialog.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export interface DialogProps {
+    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;

package/dist/Dialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+/** A native <dialog> driven by the `open` prop (showModal/close). */
+export function Dialog({ open, onClose, title, actions, children, className }) {
+    const ref = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        const el = ref.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 })] }));
+}

package/dist/LinksIndex.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from "react";
+export interface LinkUrl {
+    label: string;
+    url: string;
+}
+export interface LinkCategory {
+    id: string;
+    label: string;
+}
+export interface LinkItem {
+    /** Also used as the React list key -- app/site names are unique. */
+    name: string;
+    urls: LinkUrl[];
+    description?: string;
+    /** Matches a LinkCategory.id; anything unlisted falls into an "Other" group. */
+    category: string;
+    host?: string;
+    monitored?: boolean;
+}
+export interface LinksIndexProps extends HTMLAttributes<HTMLDivElement> {
+    categories: LinkCategory[];
+    links: LinkItem[];
+}
+/**
+ * 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 declare function LinksIndex({ categories, links, className, ...rest }: LinksIndexProps): import("react").JSX.Element;

package/dist/LinksIndex.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "./Card.js";
+import { Badge } from "./feedback.js";
+// Structural inline layout only -- the card/badge surfaces + colour come from @rackbops/styles
+// (rb-card/rb-badge + tokens), so this adds no @rackbops/styles classes and the theme contract is
+// untouched. (Bare-tag heading typography still follows each theme's own base rules.)
+const gridStyle = {
+    display: "grid",
+    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`.
+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 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))) })] }));
+}
+/**
+ * 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 function LinksIndex({ categories, links, className, ...rest }) {
+    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) => {
+                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] }));
+}

package/dist/NavLink.d.ts

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

package/dist/NavLink.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 }));
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+}
+export interface TabsProps {
+    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;

package/dist/Tabs.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+export function Tabs({ items, defaultId, className }) {
+    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
+    // always selected (a defaultId that matches nothing still highlights a tab).
+    const activeId = items.some((t) => t.id === active) ? active : items[0]?.id;
+    const tabRefs = useRef([]);
+    const onKeyDown = (e) => {
+        const i = items.findIndex((t) => t.id === activeId);
+        let next = i;
+        if (e.key === "ArrowRight" || e.key === "ArrowDown")
+            next = (i + 1) % items.length;
+        else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+            next = (i - 1 + items.length) % items.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = items.length - 1;
+        else
+            return;
+        e.preventDefault();
+        setActive(items[next]?.id);
+        // 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) => {
+                    const selected = t.id === activeId;
+                    return (_jsx("button", { ref: (el) => {
+                            tabRefs.current[idx] = el;
+                        }, type: "button", role: "tab", id: `${base}-tab-${t.id}`, "aria-selected": selected, "aria-controls": `${base}-panel-${t.id}`, tabIndex: selected ? 0 : -1, className: cx("rb-tab", selected && "rb-tab--active"), onClick: () => setActive(t.id), onKeyDown: onKeyDown, children: t.label }, t.id));
+                }) }), items.map((t) => {
+                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));
+            })] }));
+}

package/dist/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/cx.js

@@ -0,0 +1,3 @@
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}

package/dist/feedback.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ProgressHTMLAttributes, ReactNode } from "react";
+export type SemanticVariant = "info" | "success" | "warning" | "danger";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: SemanticVariant;
+}
+export declare function Badge({ variant, className, ...rest }: BadgeProps): import("react").JSX.Element;
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    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;

package/dist/feedback.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }));
+}

package/dist/form.d.ts

@@ -0,0 +1,17 @@
+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"> {
+    /** 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;

package/dist/form.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 });
+}
+/** 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 }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+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 { Dialog, type DialogProps } from "./Dialog.js";
+export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
+export { LinksIndex, type LinksIndexProps, type LinkItem, type LinkCategory, type LinkUrl, } from "./LinksIndex.js";
+export { cx } from "./cx.js";

package/dist/index.js

@@ -0,0 +1,9 @@
+export { Button } from "./Button.js";
+export { Card } from "./Card.js";
+export { NavLink } from "./NavLink.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 { LinksIndex, } from "./LinksIndex.js";
+export { cx } from "./cx.js";

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@rackbops/ui-react",
+  "version": "0.1.0",
+  "description": "React components styled by @rackbops/styles rackbops themes.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/roshne/rackbops-ui-ux-std-lib.git",
+    "directory": "components/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "tsc -p tsconfig.json --noEmit && node --import tsx --test \"src/**/*.test.tsx\""
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  }
+}