@rackbops/ui-react 0.2.42 → 0.2.44

package/dist/Tabs.js

@@ -47,10 +47,10 @@ export const Tabs = forwardRef(function Tabs({ items, defaultId, activeId: activ
                     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: () => select(t.id), onKeyDown: onKeyDown, children: t.label }, t.id));
-                }) }), items.map((t) => {
+                        }, type: "button", role: "tab", id: `${base}-tab-${idx}`, "aria-selected": selected, "aria-controls": `${base}-panel-${idx}`, tabIndex: selected ? 0 : -1, className: cx("rb-tab", selected && "rb-tab--active"), onClick: () => select(t.id), onKeyDown: onKeyDown, children: t.label }, t.id));
+                }) }), items.map((t, idx) => {
                 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));
+                return (_jsx("div", { className: "rb-tabpanel", role: "tabpanel", id: `${base}-panel-${idx}`, "aria-labelledby": `${base}-tab-${idx}`, hidden: !selected, tabIndex: 0, children: t.content }, t.id));
             })] }));
 });
 Tabs.displayName = "Tabs";

package/dist/Tabstrip.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export interface TabstripTab {
     /** Unique among this strip's tabs; what `onSelect` reports and `selected` matches. */
     id: string;

package/dist/Tabstrip.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { cx } from "./cx.js";
 /**
  * A controlled tab strip on the `rb-tabstrip` contract -- the design system's existing
@@ -18,8 +19,15 @@ import { cx } from "./cx.js";
  * relationship that does not exist would mislead a screen-reader user.
  */
 export function Tabstrip({ tabs, selected, onSelect, label }) {
+    const tabRefs = useRef([]);
     function onKeyDown(event) {
-        const index = tabs.findIndex((t) => t.id === selected);
+        // Index from the tab that received the key when there is one: a controlled parent that
+        // commits `selected` late (a router transition, a debounce) would otherwise leave `selected`
+        // stale between presses, and focus (which has already moved) and the next "from" index
+        // would disagree. Fall back to `selected` when the event came from the strip itself.
+        const focused = event.target.closest?.('[role="tab"]');
+        const focusedIndex = focused ? tabRefs.current.indexOf(focused) : -1;
+        const index = focusedIndex !== -1 ? focusedIndex : tabs.findIndex((t) => t.id === selected);
         if (index === -1) {
             return;
         }
@@ -44,6 +52,8 @@ export function Tabstrip({ tabs, selected, onSelect, label }) {
         if (target) {
             event.preventDefault();
             onSelect(target.id);
+            // Roving tabindex: focus follows the selection, so Enter/Space acts on the new tab.
+            tabRefs.current[next]?.focus();
         }
     }
     // When `selected` matches no tab (a caller mid-reload passing a stale id), every tab would
@@ -54,7 +64,9 @@ export function Tabstrip({ tabs, selected, onSelect, label }) {
     return (_jsx("div", { role: "tablist", "aria-label": label, className: "rb-tabstrip", onKeyDown: onKeyDown, children: tabs.map((tab, index) => {
             const isSelected = tab.id === selected;
             const isTabStop = hasSelected ? isSelected : index === 0;
-            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isSelected, 
+            return (_jsxs("button", { ref: (el) => {
+                    tabRefs.current[index] = el;
+                }, type: "button", role: "tab", "aria-selected": isSelected, 
                 // Roving tabIndex: exactly one tab is reachable by Tab, so the whole strip is one
                 // stop and the arrow keys above do the moving within it.
                 tabIndex: isTabStop ? 0 : -1, className: cx("rb-tabstrip__tab", isSelected && "rb-tabstrip__tab--active"), onClick: () => onSelect(tab.id), children: [tab.label, tab.badge !== undefined && _jsx("span", { className: "rb-tabstrip__badge", children: tab.badge })] }, tab.id));

package/dist/feedback.d.ts

@@ -1,4 +1,8 @@
 import { type HTMLAttributes, type ProgressHTMLAttributes, type ReactNode, type RefAttributes } from "react";
+/** A forwardRef DOM wrapper that adds a base rb-* class and any fixed static attributes. */
+export declare function styled<E extends HTMLElement, P extends {
+    className?: string;
+}>(tag: string, cls: string, attrs?: Record<string, unknown>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & RefAttributes<E>>;
 export type SemanticVariant = "info" | "success" | "warning" | "danger";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
     variant?: SemanticVariant;

package/dist/feedback.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, forwardRef, } from "react";
 import { cx } from "./cx.js";
 /** A forwardRef DOM wrapper that adds a base rb-* class and any fixed static attributes. */
-function styled(tag, cls, attrs = {}) {
+export function styled(tag, cls, attrs = {}) {
     return forwardRef(function Styled({ className, ...rest }, ref) {
         return createElement(tag, { ref, ...attrs, className: cx(cls, className), ...rest });
     });

package/dist/form.js

@@ -1,12 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef, } from "react";
+import { forwardRef, } from "react";
 import { cx } from "./cx.js";
-/** A forwardRef DOM wrapper that only adds a base rb-* class -- Input, Textarea, Select, Label, Field. */
-function styled(tag, cls) {
-    return forwardRef(function Styled({ className, ...rest }, ref) {
-        return createElement(tag, { ref, className: cx(cls, className), ...rest });
-    });
-}
+import { styled } from "./feedback.js";
 export const Input = styled("input", "rb-input");
 Input.displayName = "Input";
 export const Textarea = styled("textarea", "rb-textarea");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {
@@ -12,6 +12,7 @@
     "access": "public"
   },
   "type": "module",
+  "sideEffects": false,
   "files": [
     "dist",
     "LICENSE",
@@ -26,17 +27,19 @@
     }
   },
   "peerDependencies": {
+    "@rackbops/styles": "^0.2.44",
     "react": ">=18"
   },
   "devDependencies": {
+    "@rackbops/styles": "^0.2.44",
     "@types/jsdom": "^30.0.0",
-    "@types/node": "^26.0.0",
+    "@types/node": "^26.6.3",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "jsdom": "^30.0.1",
+    "jsdom": "^30.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tsx": "^4.19.0",
+    "tsx": "^4.23.15",
     "typescript": "^7.0.0"
   },
   "scripts": {