ui-foundations 0.3.2 → 0.6.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/badge.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Icon } from "./icon.js";
+
+export function Badge({
+  children,
+  text,
+  variant = "default",
+  size = "md",
+  startIcon,
+  className = "",
+  ...props
+}) {
+  const content = children ?? text;
+  const classes = ["badge"];
+
+  if (variant && variant !== "default") classes.push(variant);
+  if (size === "sm") classes.push("sm");
+  if (className) classes.push(className);
+
+  const iconElement =
+    startIcon && typeof startIcon === "string"
+      ? React.createElement(Icon, {
+          name: startIcon,
+          decorative: true,
+        })
+      : startIcon && React.isValidElement(startIcon)
+        ? startIcon
+        : null;
+
+  return React.createElement(
+    "span",
+    {
+      className: classes.join(" "),
+      ...props,
+    },
+    iconElement,
+    content != null
+      ? React.createElement("span", { className: "badge__text" }, content)
+      : null,
+  );
+}

package/dist/react/button.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { LabelContent } from "./label.js";
+import { LabelContent, hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 function normalizeOrientation(value) {
   return value === "vertical" ? "vertical" : "horizontal";
@@ -28,10 +29,7 @@ export function Button({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasReadableLabel =
-    typeof content === "string"
-      ? content.trim().length > 0
-      : content !== null && content !== undefined && content !== false;
+  const hasReadableLabel = hasTextContent(content);
   const resolvedIconOnly = iconOnly ?? !hasReadableLabel;
   const iconStart = resolvedIconOnly ? startIcon || endIcon : startIcon;
   const iconEnd = resolvedIconOnly ? undefined : endIcon;
@@ -49,7 +47,7 @@ export function Button({
   }
 
   if (resolvedIconOnly && !buttonProps["aria-label"]) {
-    console.warn(
+    warnDev(
       "[ui-foundations] iconOnly Button should include `ariaLabel` or `aria-label`.",
     );
   }

package/dist/react/checkbox.js

@@ -1,31 +1,44 @@
 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;
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Checkbox({
   className = "",
   wrapperClassName = "",
   label,
   children,
+  indeterminate = false,
   ...props
 }) {
   const classes = ["checkbox"];
+  if (indeterminate) classes.push("is-indeterminate");
   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);
+
+  React.useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+
   const input = React.createElement("input", {
     type: "checkbox",
     className: classes.join(" "),
+    "aria-checked":
+      props["aria-checked"] ?? (indeterminate ? "mixed" : undefined),
+    ref: inputRef,
     ...props,
   });
 
+  if (!hasLabel && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnDev(
+      "[ui-foundations] Checkbox should include visible label content or `aria-label`/`aria-labelledby`.",
+    );
+  }
+
   if (!hasLabel) return input;
 
   const wrapperClasses = ["checkbox-field"];

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/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;
@@ -37,8 +38,14 @@ export function Icon({
   if (isDecorative) {
     accessibilityProps["aria-hidden"] = true;
   } else {
+    const accessibleLabel = label || humanizeName(name);
+    if (!accessibleLabel) {
+      warnDev(
+        "[ui-foundations] Non-decorative Icon should include a readable `label` or `name`.",
+      );
+    }
     accessibilityProps.role = "img";
-    accessibilityProps["aria-label"] = label || humanizeName(name);
+    accessibilityProps["aria-label"] = accessibleLabel;
   }
 
   return React.createElement("span", {

package/dist/react/index.js

@@ -3,4 +3,12 @@ export { Checkbox } from "./checkbox.js";
 export { Icon } from "./icon.js";
 export { Input } from "./input.js";
 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";

package/dist/react/label.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "./icon.js";
 
-function hasTextContent(value) {
+export function hasTextContent(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(hasTextContent);

package/dist/react/radio.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
+
+export function Radio({
+  className = "",
+  wrapperClassName = "",
+  label,
+  children,
+  ...props
+}) {
+  const classes = ["radio"];
+  if (className) classes.push(className);
+
+  const content = children ?? label;
+  const hasLabel = hasTextContent(content);
+  const disabled = Boolean(props.disabled);
+
+  const input = React.createElement("input", {
+    type: "radio",
+    className: classes.join(" "),
+    ...props,
+  });
+
+  if (!hasLabel && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnDev(
+      "[ui-foundations] Radio should include visible label content or `aria-label`/`aria-labelledby`.",
+    );
+  }
+
+  if (!hasLabel) return input;
+
+  const wrapperClasses = ["radio-field"];
+  if (disabled) wrapperClasses.push("is-disabled");
+  if (wrapperClassName) wrapperClasses.push(wrapperClassName);
+
+  return React.createElement(
+    "label",
+    {
+      className: wrapperClasses.join(" "),
+    },
+    input,
+    React.createElement("span", { className: "radio-field__text" }, content),
+  );
+}

package/dist/react/switch.js

@@ -1,11 +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;
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Switch({
   className = "",
@@ -19,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",
@@ -28,6 +23,12 @@ export function Switch({
     ...props,
   });
 
+  if (!hasLabel && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnDev(
+      "[ui-foundations] Switch should include visible label content or `aria-label`/`aria-labelledby`.",
+    );
+  }
+
   if (!hasLabel) return input;
 
   const wrapperClasses = ["switch-field"];

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,38 @@
+import React from "react";
+
+/**
+ * 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);
+
+  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 → appearance-modes.tokens.mode-dark.css}

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.721Z */
+/* Generated on 2026-05-22T09:23:10.603Z */
 
 :root[data-mode="dark"] {
   --color-text-default: var(--color-neutral-800);
@@ -12,7 +12,7 @@
   --color-text-success: var(--brand-color-functional-success);
   --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 +24,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 → appearance-modes.tokens.mode-light.css}

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.718Z */
+/* Generated on 2026-05-22T09:23:10.601Z */
 
 :root {
   --color-text-default: var(--color-neutral-800);