ui-foundations 0.4.1 → 0.7.0

package/dist/react/accordion.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+/**
+ * Accordion — expandable/collapsible content sections using native details/summary.
+ *
+ * @param {object} props
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Accordion({ className = "", children, ...props }) {
+  const classes = ["accordion"];
+  if (className) classes.push(className);
+
+  return React.createElement("div", { className: classes.join(" "), ...props }, children);
+}
+
+/**
+ * AccordionItem — single expandable section.
+ *
+ * @param {object} props
+ * @param {string} props.title - Summary/trigger text
+ * @param {boolean} [props.open=false] - Whether expanded
+ * @param {boolean} [props.disabled=false] - Whether disabled
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function AccordionItem({ title, open = false, disabled = false, className = "", children, ...props }) {
+  const classes = ["accordion-item"];
+  if (disabled) classes.push("is-disabled");
+  if (className) classes.push(className);
+
+  return React.createElement(
+    "details",
+    { className: classes.join(" "), open, ...props },
+    React.createElement("summary", null, title),
+    React.createElement("div", { className: "accordion-item__content" }, children)
+  );
+}

package/dist/react/avatar.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+/**
+ * Avatar — thumbnail representation of a user or entity.
+ *
+ * @param {object} props
+ * @param {string} [props.src] - Image URL
+ * @param {string} [props.alt=""] - Alt text for image
+ * @param {string} [props.initials=""] - Fallback initials when no image
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} [props.size="md"] - Size variant
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Avatar({
+  src,
+  alt = "",
+  initials = "",
+  size = "md",
+  className = "",
+  ...props
+}) {
+  const classes = ["avatar"];
+  if (size && size !== "md") classes.push(size);
+  if (className) classes.push(className);
+
+  const children = src
+    ? React.createElement("img", { src, alt })
+    : React.createElement("span", { className: "avatar__initials" }, initials);
+
+  return React.createElement(
+    "span",
+    { className: classes.join(" "), role: "img", "aria-label": alt || initials, ...props },
+    children
+  );
+}

package/dist/react/button.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { LabelContent, hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 function normalizeOrientation(value) {
   return value === "vertical" ? "vertical" : "horizontal";
@@ -9,18 +10,6 @@ function normalizeJustify(value) {
   return value === "stretch" ? "stretch" : "start";
 }
 
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
-
 export function Button({
   variant = "solid",
   className = "",

package/dist/react/checkbox.js

@@ -1,23 +1,6 @@
 import React from "react";
-
-function hasLabelContent(value) {
-  if (value === null || value === undefined || value === false) return false;
-  if (typeof value === "string") return value.trim().length > 0;
-  if (Array.isArray(value)) return value.some(hasLabelContent);
-  return true;
-}
-
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Checkbox({
   className = "",
@@ -32,7 +15,7 @@ export function Checkbox({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasLabel = hasLabelContent(content);
+  const hasLabel = hasTextContent(content);
   const disabled = Boolean(props.disabled);
   const inputRef = React.useRef(null);
 

package/dist/react/divider.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+/**
+ * Divider — visual separator between content sections.
+ *
+ * @param {object} props
+ * @param {"horizontal"|"vertical"} [props.orientation="horizontal"] - Orientation
+ * @param {"subtle"|""} [props.variant=""] - Color variant
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Divider({
+  orientation = "horizontal",
+  variant = "",
+  className = "",
+  ...props
+}) {
+  const classes = ["divider"];
+  if (variant) classes.push(variant);
+  if (className) classes.push(className);
+
+  const elementProps = {
+    className: classes.join(" "),
+    ...props,
+  };
+
+  if (orientation === "vertical") {
+    elementProps["aria-orientation"] = "vertical";
+  }
+
+  return React.createElement("hr", elementProps);
+}

package/dist/react/form.js

@@ -0,0 +1,111 @@
+import React from "react";
+
+/**
+ * Form — layout container for form fields.
+ *
+ * @param {object} props
+ * @param {boolean} [props.borderless=false] - Remove border and background
+ * @param {string} [props.className=""] - Additional class names
+ * @param {React.ReactNode} props.children - Form content
+ */
+export function Form({
+  borderless = false,
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = ["form"];
+  if (borderless) classes.push("borderless");
+  if (className) classes.push(className);
+
+  return React.createElement(
+    "form",
+    { className: classes.join(" "), noValidate: true, ...props },
+    children,
+  );
+}
+
+/**
+ * FormGroup — groups related fields with an optional title.
+ *
+ * @param {object} props
+ * @param {string} [props.title=""] - Group legend
+ * @param {string} [props.className=""] - Additional class names
+ * @param {React.ReactNode} props.children - Grouped fields
+ */
+export function FormGroup({ title = "", className = "", children, ...props }) {
+  const classes = ["form-group"];
+  if (className) classes.push(className);
+
+  return React.createElement(
+    "fieldset",
+    { className: classes.join(" "), ...props },
+    title
+      ? React.createElement("legend", { className: "form-group__title" }, title)
+      : null,
+    children,
+  );
+}
+
+/**
+ * FormField — single field wrapper with optional side label layout.
+ *
+ * @param {object} props
+ * @param {"top"|"side"} [props.labelPosition="top"] - Label placement
+ * @param {boolean} [props.invalid=false] - Show invalid state
+ * @param {string} [props.className=""] - Additional class names
+ * @param {React.ReactNode} props.children - Label + input + helper
+ */
+export function FormField({
+  labelPosition = "top",
+  invalid = false,
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = ["form-field"];
+  if (invalid) classes.push("is-invalid");
+  if (className) classes.push(className);
+
+  const attrs = { className: classes.join(" "), ...props };
+  if (labelPosition === "side") attrs["data-label-position"] = "side";
+
+  return React.createElement("div", attrs, children);
+}
+
+/**
+ * FormHelper — helper or error text below a field.
+ *
+ * @param {object} props
+ * @param {string} props.text - Helper message
+ */
+export function FormHelper({ text, ...props }) {
+  return React.createElement(
+    "p",
+    { className: "form-field__helper", ...props },
+    text,
+  );
+}
+
+/**
+ * FormActions — button area at the bottom of a form.
+ *
+ * @param {object} props
+ * @param {"start"|"end"|"stretch"} [props.align="end"] - Button alignment
+ * @param {string} [props.className=""] - Additional class names
+ * @param {React.ReactNode} props.children - Action buttons
+ */
+export function FormActions({
+  align = "end",
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = ["form-actions"];
+  if (className) classes.push(className);
+
+  const attrs = { className: classes.join(" "), ...props };
+  if (align !== "end") attrs["data-align"] = align;
+
+  return React.createElement("div", attrs, children);
+}

package/dist/react/icon.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { warnDev } from "./warn-dev.js";
 
 function resolveIconUrl(name, folder, src) {
   if (src) return src;
@@ -11,18 +12,6 @@ function humanizeName(name) {
     .trim();
 }
 
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
-
 export function Icon({
   name,
   src,

package/dist/react/index.js

@@ -6,3 +6,10 @@ export { LabelContent, FieldLabel } from "./label.js";
 export { Radio } from "./radio.js";
 export { Switch } from "./switch.js";
 export { Badge } from "./badge.js";
+export { Divider } from "./divider.js";
+export { TextArea } from "./textarea.js";
+export { Avatar } from "./avatar.js";
+export { Accordion, AccordionItem } from "./accordion.js";
+export { TabList, Tab, TabPanel } from "./tabs.js";
+export { Tooltip } from "./tooltip.js";
+export { Form, FormGroup, FormField, FormHelper, FormActions } from "./form.js";

package/dist/react/input.js

@@ -1,9 +1,16 @@
 import React from "react";
+import { warnDev } from "./warn-dev.js";
 
 export function Input({ className = "", type = "text", ...props }) {
   const classes = ["input"];
   if (className) classes.push(className);
 
+  if (!props["aria-label"] && !props["aria-labelledby"] && !props.id) {
+    warnDev(
+      "[ui-foundations] Input should be associated with a label via `id`, or include `aria-label`/`aria-labelledby`.",
+    );
+  }
+
   return React.createElement("input", {
     type,
     className: classes.join(" "),

package/dist/react/radio.js

@@ -1,23 +1,6 @@
 import React from "react";
-
-function hasLabelContent(value) {
-  if (value === null || value === undefined || value === false) return false;
-  if (typeof value === "string") return value.trim().length > 0;
-  if (Array.isArray(value)) return value.some(hasLabelContent);
-  return true;
-}
-
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Radio({
   className = "",
@@ -30,7 +13,7 @@ export function Radio({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasLabel = hasLabelContent(content);
+  const hasLabel = hasTextContent(content);
   const disabled = Boolean(props.disabled);
 
   const input = React.createElement("input", {

package/dist/react/switch.js

@@ -1,23 +1,6 @@
 import React from "react";
-
-function hasLabelContent(value) {
-  if (value === null || value === undefined || value === false) return false;
-  if (typeof value === "string") return value.trim().length > 0;
-  if (Array.isArray(value)) return value.some(hasLabelContent);
-  return true;
-}
-
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Switch({
   className = "",
@@ -31,7 +14,7 @@ export function Switch({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasLabel = hasLabelContent(content);
+  const hasLabel = hasTextContent(content);
   const disabled = Boolean(props.disabled);
   const input = React.createElement("input", {
     type: "checkbox",

package/dist/react/tabs.js

@@ -0,0 +1,72 @@
+import React from "react";
+
+/**
+ * TabList — container for tab buttons.
+ *
+ * @param {object} props
+ * @param {"horizontal"|"vertical"} [props.orientation="horizontal"]
+ * @param {string} [props.ariaLabel=""] - Accessible label
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function TabList({ orientation = "horizontal", ariaLabel = "", className = "", children, ...props }) {
+  const classes = ["tab-list"];
+  if (className) classes.push(className);
+
+  const elementProps = {
+    className: classes.join(" "),
+    role: "tablist",
+    "aria-orientation": orientation,
+    ...props,
+  };
+  if (ariaLabel) elementProps["aria-label"] = ariaLabel;
+
+  return React.createElement("div", elementProps, children);
+}
+
+/**
+ * Tab — individual tab button.
+ *
+ * @param {object} props
+ * @param {string} props.label - Tab label text
+ * @param {boolean} [props.selected=false] - Whether active
+ * @param {boolean} [props.disabled=false] - Whether disabled
+ * @param {string} [props.controls=""] - ID of controlled panel
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Tab({ label, selected = false, disabled = false, controls = "", className = "", ...props }) {
+  const classes = ["tab"];
+  if (className) classes.push(className);
+
+  return React.createElement("button", {
+    className: classes.join(" "),
+    role: "tab",
+    type: "button",
+    "aria-selected": String(selected),
+    "aria-controls": controls || undefined,
+    disabled,
+    tabIndex: selected ? 0 : -1,
+    ...props,
+  }, label);
+}
+
+/**
+ * TabPanel — content panel associated with a tab.
+ *
+ * @param {object} props
+ * @param {string} [props.id=""] - Panel ID (referenced by tab's aria-controls)
+ * @param {boolean} [props.hidden=false] - Whether hidden
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function TabPanel({ id = "", hidden = false, className = "", children, ...props }) {
+  const classes = ["tab-panel"];
+  if (className) classes.push(className);
+
+  return React.createElement("div", {
+    className: classes.join(" "),
+    role: "tabpanel",
+    id: id || undefined,
+    hidden,
+    tabIndex: 0,
+    ...props,
+  }, children);
+}

package/dist/react/textarea.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { warnDev } from "./warn-dev.js";
+
+/**
+ * TextArea — multi-line text input.
+ *
+ * @param {object} props
+ * @param {string} [props.placeholder=""] - Placeholder text
+ * @param {string} [props.value] - Controlled value
+ * @param {boolean} [props.disabled=false] - Disabled state
+ * @param {boolean} [props.readonly=false] - Readonly state
+ * @param {number} [props.rows] - Visible rows
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function TextArea({
+  placeholder = "",
+  value,
+  disabled = false,
+  readonly = false,
+  rows,
+  className = "",
+  ...props
+}) {
+  const classes = ["textarea"];
+  if (className) classes.push(className);
+
+  if (!props["aria-label"] && !props["aria-labelledby"] && !props.id) {
+    warnDev(
+      "[ui-foundations] TextArea should be associated with a label via `id`, or include `aria-label`/`aria-labelledby`.",
+    );
+  }
+
+  const elementProps = {
+    className: classes.join(" "),
+    placeholder,
+    disabled,
+    readOnly: readonly,
+    ...props,
+  };
+
+  if (value !== undefined) elementProps.value = value;
+  if (rows) elementProps.rows = rows;
+
+  return React.createElement("textarea", elementProps);
+}

package/dist/react/tooltip.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+/**
+ * Tooltip — contextual help text on hover/focus.
+ *
+ * @param {object} props
+ * @param {string} props.text - Tooltip content
+ * @param {"top"|"bottom"|"left"|"right"} [props.placement="top"] - Position
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Tooltip({ text, placement = "top", className = "", children, ...props }) {
+  const triggerClasses = ["tooltip-trigger"];
+  if (className) triggerClasses.push(className);
+
+  return React.createElement(
+    "span",
+    { className: triggerClasses.join(" "), ...props },
+    children,
+    React.createElement(
+      "span",
+      { className: "tooltip", role: "tooltip", "data-placement": placement },
+      text
+    )
+  );
+}

package/dist/react/warn-dev.js

@@ -0,0 +1,15 @@
+/**
+ * Log a warning in non-production environments.
+ * Shared across React wrappers to avoid copy-pasting the same guard.
+ */
+export function warnDev(message) {
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "production"
+  ) {
+    return;
+  }
+
+  console.warn(message);
+}

package/dist/tokens/css/appearance-modes.tokens.mode-dark.css

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.554Z */
+/* Generated on 2026-06-06T14:29:01.170Z */
 
 :root[data-mode="dark"] {
   --color-text-default: var(--color-neutral-800);
@@ -10,9 +10,15 @@
   --color-text-strong: var(--color-neutral-1000);
   --color-text-danger: var(--brand-color-functional-danger);
   --color-text-success: var(--brand-color-functional-success);
+  --color-text-on-brand: var(--color-neutral-000);
+  --color-text-on-danger: var(--color-neutral-000);
+  --color-text-on-success: var(--color-neutral-000);
+  --color-text-on-subtle: var(--brand-color-primary-dark);
+  --color-text-on-active: var(--color-neutral-000);
+  --color-text-on-disabled: var(--color-neutral-800);
   --color-fill-surface: var(--color-neutral-1000);
   --color-fill-disabled: var(--color-neutral-300);
-  --color-fill-hover: var(--color-neutral-alpha-500);
+  --color-fill-hover: var(--color-neutral-alpha-inverse-100);
   --color-fill-brand: var(--brand-color-primary);
   --color-fill-subtle: var(--brand-color-subtle);
   --color-fill-active: var(--brand-color-accent);
@@ -24,9 +30,9 @@
   --color-border-brand: var(--brand-color-primary);
   --color-border-disabled: var(--color-neutral-500);
   --color-border-danger: var(--brand-color-functional-danger);
-  --color-overlay-backdrop: var(--color-neutral-alpha-400);
-  --color-overlay-hover: var(--color-neutral-alpha-200);
-  --color-overlay-active: var(--color-neutral-alpha-400);
-  --color-overlay-selected: var(--color-neutral-alpha-600);
+  --color-overlay-backdrop: var(--color-neutral-alpha-inverse-400);
+  --color-overlay-hover: var(--color-neutral-alpha-inverse-100);
+  --color-overlay-active: var(--color-neutral-alpha-inverse-200);
+  --color-overlay-selected: var(--color-neutral-alpha-inverse-300);
   --color-focus: var(--brand-color-primary-dark);
 }

package/dist/tokens/css/appearance-modes.tokens.mode-light.css

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.552Z */
+/* Generated on 2026-06-06T14:29:01.166Z */
 
 :root {
   --color-text-default: var(--color-neutral-800);
@@ -10,6 +10,12 @@
   --color-text-strong: var(--color-neutral-1000);
   --color-text-danger: var(--brand-color-functional-danger);
   --color-text-success: var(--brand-color-functional-success);
+  --color-text-on-brand: var(--color-neutral-000);
+  --color-text-on-danger: var(--color-neutral-000);
+  --color-text-on-success: var(--color-neutral-000);
+  --color-text-on-subtle: var(--brand-color-primary);
+  --color-text-on-active: var(--color-neutral-000);
+  --color-text-on-disabled: var(--color-neutral-800);
   --color-fill-surface: var(--color-neutral-000);
   --color-fill-disabled: var(--color-neutral-300);
   --color-fill-hover: var(--color-neutral-alpha-500);