@rackbops/ui-react 0.2.41 → 0.2.43

package/dist/form.d.ts

@@ -9,6 +9,11 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement>, Re
 }
 export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & RefAttributes<HTMLSelectElement>>;
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement>, RefAttributes<HTMLLabelElement> {
+    /** Renders a visible `.rb-label__required` marker after the label's children --
+     *  an `aria-hidden` glyph, text not colour (#210). The control's own native
+     *  `required` attribute is what carries the programmatic state to assistive
+     *  tech; set it on the control, not here. */
+    required?: boolean;
 }
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & RefAttributes<HTMLLabelElement>>;
 export interface FieldProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
@@ -25,3 +30,17 @@ export interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 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>>;
+/** Supporting text below a field -- `--rb-text-soft` in every theme (#210). Presentational: the
+ *  consumer sets `id` and wires it into the control's `aria-describedby`. Not a live region --
+ *  it renders with the field, it does not announce a change. */
+export interface FieldHelpProps extends HTMLAttributes<HTMLParagraphElement>, RefAttributes<HTMLParagraphElement> {
+}
+export declare const FieldHelp: import("react").ForwardRefExoticComponent<Omit<FieldHelpProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
+/** A field's error message -- ink text with a `--rb-danger` left bar in every theme, never
+ *  coloured small text (#210, STANDARD.md 9). Presentational: the consumer sets `id`, wires it
+ *  into the control's `aria-describedby`, and sets `aria-invalid="true"` on the control. Not a
+ *  live region -- a live container mounted before its content changes is what reliable dynamic
+ *  announcement needs, which this wrapper alone cannot guarantee. */
+export interface FieldErrorProps extends HTMLAttributes<HTMLParagraphElement>, RefAttributes<HTMLParagraphElement> {
+}
+export declare const FieldError: import("react").ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & RefAttributes<HTMLParagraphElement>>;

package/dist/form.js

@@ -13,7 +13,9 @@ export const Textarea = styled("textarea", "rb-textarea");
 Textarea.displayName = "Textarea";
 export const Select = styled("select", "rb-select");
 Select.displayName = "Select";
-export const Label = styled("label", "rb-label");
+export const Label = forwardRef(function Label({ className, required, children, ...rest }, ref) {
+    return (_jsxs("label", { ref: ref, className: cx("rb-label", className), ...rest, children: [children, required && (_jsx("span", { className: "rb-label__required", "aria-hidden": "true", children: "*" }))] }));
+});
 Label.displayName = "Label";
 export const Field = styled("div", "rb-field");
 Field.displayName = "Field";
@@ -34,3 +36,7 @@ function choiceControl(displayName, cls, attrs) {
 export const Checkbox = choiceControl("Checkbox", "rb-checkbox", { type: "checkbox" });
 export const Radio = choiceControl("Radio", "rb-radio", { type: "radio" });
 export const Switch = choiceControl("Switch", "rb-switch", { type: "checkbox", role: "switch" });
+export const FieldHelp = styled("p", "rb-field__help");
+FieldHelp.displayName = "FieldHelp";
+export const FieldError = styled("p", "rb-field__error");
+FieldError.displayName = "FieldError";

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { Card, type CardProps } from "./Card.js";
 export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
 export { NavLink, type NavLinkProps } from "./NavLink.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 { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, FieldHelp, FieldError, type InputProps, type TextareaProps, type SelectProps, type LabelProps, type FieldProps, type ChoiceProps, type FieldHelpProps, type FieldErrorProps, } 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 { Toast, ToastRegion, type ToastProps, type ToastRegionProps } from "./Toast.js";

package/dist/index.js

@@ -3,7 +3,7 @@ export { Card } from "./Card.js";
 export { EmptyState } from "./EmptyState.js";
 export { NavLink } from "./NavLink.js";
 export { NavRail } from "./NavRail.js";
-export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, } from "./form.js";
+export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, FieldHelp, FieldError, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
 export { Dialog } from "./Dialog.js";
 export { Toast, ToastRegion } from "./Toast.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {
@@ -30,13 +30,13 @@
   },
   "devDependencies": {
     "@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": {