@neo-design/mui 1.0.0-rc.4

package/ui/ChipsGroup.mjs

@@ -0,0 +1,53 @@
+'use client';
+// packages/mui/ui/ChipsGroup.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { FormGroup, RadioGroup, Chip, useRadioGroup } from '@mui/material';
+import { NeoChips } from './Chips.mjs';
+import { warn, hasAccessibleName } from './_warn.mjs';
+import { reveal } from './_reveal.mjs';
+const h = React.createElement;
+
+const one = (x) => (Array.isArray(x) ? x[0] : x);
+const many = (x) => (x === undefined ? undefined : Array.isArray(x) ? x : [x]);
+
+function RadioChip({ value, label, disabled }) {
+  const group = useRadioGroup();
+  const checked = group != null && String(group.value) === String(value);
+  return h(Chip, {
+    component: 'label', variant: checked ? 'filled' : 'outlined', disabled,
+    'data-selected': checked ? 'true' : undefined,
+    label: h(React.Fragment, null,
+      h('input', { type: 'radio', name: group?.name, value, checked, disabled, onChange: group?.onChange }),
+      label),
+  });
+}
+
+export const NeoChipsGroup = React.forwardRef(function NeoChipsGroup({ selection = 'single', options = [], value, defaultValue, disabled = false, onChange, ...rest }, ref) {
+  hasAccessibleName('NeoChipsGroup', undefined, rest);
+  const unlabeled = options.filter((o) => o && (o.label === undefined || String(o.label).trim() === ''));
+  if (unlabeled.length) warn(`NeoChipsGroup: ${unlabeled.length} option(s) without \`label\` — the chip has no accessible name.`);
+  const [own, setOwn] = React.useState(many(defaultValue) || []);
+  const className = ['chips-group', rest.className].filter(Boolean).join(' ');
+
+  if (selection === 'single') {
+    return h(RadioGroup, {
+      row: true, value: one(value), defaultValue: one(defaultValue),
+      onChange: (e, v) => { reveal(e.target, '.MuiChip-root', { inline: 'center' }); onChange?.(e, v); },
+      ...rest, className, ref,
+    }, options.map((o) => h(RadioChip, { key: o.value, value: o.value, label: o.label, disabled: o.disabled || disabled })));
+  }
+
+  const chosen = many(value) || own;
+  const toggle = (e, v) => {
+    const next = chosen.includes(v) ? chosen.filter((x) => x !== v) : [...chosen, v];
+    if (value === undefined) setOwn(next);
+    if (next.includes(v)) reveal(e.currentTarget, '.MuiChip-root', { inline: 'center' });
+    onChange?.(e, next);
+  };
+  return h(FormGroup, { row: true, role: 'group', ...rest, className, ref },
+    options.map((o) => h(NeoChips, {
+      key: o.value, label: o.label, selected: chosen.includes(o.value),
+      disabled: o.disabled || disabled, onClick: (e) => toggle(e, o.value),
+      onDelete: chosen.includes(o.value) ? (e) => toggle(e, o.value) : undefined,
+    })));
+});

package/ui/Combobox.mjs

@@ -0,0 +1,41 @@
+'use client';
+// packages/mui/ui/Combobox.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { FormControl, FormLabel, Autocomplete, TextField, FormHelperText, InputAdornment } from '@mui/material';
+import { renderIcon } from './_icon.mjs';
+import { helpIcon } from './_help.mjs';
+import { useKeyboardFocus } from './_keyboard-focus.mjs';
+import { hasAccessibleName } from './_warn.mjs';
+const h = React.createElement;
+
+export const NeoCombobox = React.forwardRef(function NeoCombobox({ label, required = false, helperText, error = false, readOnly = false, disabled = false, tooltip, iconLeft, iconRight, tooltipLabel, id, placeholder, options = [], onChange, ...rest }, ref) {
+  const autoId = React.useId();
+  const fieldId = id || autoId;
+  const helpId = helperText ? `${fieldId}-helper` : undefined;
+  const labelId = label ? `${fieldId}-label` : undefined;
+  hasAccessibleName('NeoCombobox', label, rest);
+  const keyboardFocus = useKeyboardFocus();
+  const helpNode = helpIcon({ text: tooltip, name: tooltipLabel, label, comp: 'Combobox', prefix: 'combobox' });
+  const labelNode = label ? h(FormLabel, { id: labelId, htmlFor: fieldId, required }, label) : null;
+  return h(FormControl, { error, disabled, fullWidth: true, variant: 'outlined', onFocus: keyboardFocus.onFocus, onBlur: keyboardFocus.onBlur, onPointerDown: keyboardFocus.onPointerDown, ref },
+    label && helpNode ? h('div', { className: 'combobox__label-row' }, labelNode, helpNode) : labelNode,
+    h(Autocomplete, {
+      id: fieldId, fullWidth: true, blurOnSelect: true, options, disabled, readOnly,
+      clearIcon: renderIcon('system-error'),
+      onChange,
+      renderInput: (params) => h(TextField, {
+        ...params, placeholder, error, disabled,
+        inputProps: { ...params.inputProps, 'aria-describedby': helpId },
+        InputProps: {
+          ...params.InputProps,
+          className: [params.InputProps.className, keyboardFocus.active ? 'field--focus' : null].filter(Boolean).join(' '),
+          readOnly,
+          startAdornment: iconLeft ? h(React.Fragment, null, h(InputAdornment, { position: 'start' }, renderIcon(iconLeft, 'combobox__icon')), params.InputProps.startAdornment) : params.InputProps.startAdornment,
+          endAdornment: iconRight ? h(React.Fragment, null, h(InputAdornment, { position: 'end' }, renderIcon(iconRight, 'combobox__icon')), params.InputProps.endAdornment) : params.InputProps.endAdornment,
+        },
+      }),
+      ...rest,
+    }),
+    helperText ? h(FormHelperText, { id: helpId, key: error ? 'error' : 'helper', role: error ? 'alert' : undefined }, helperText) : null,
+  );
+});

package/ui/EmptyState.mjs

@@ -0,0 +1,31 @@
+'use client';
+// packages/mui/ui/EmptyState.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+const h = React.createElement;
+
+const LEVELS = ['h2', 'h3', 'h4'];
+
+export const NeoEmptyState = React.forwardRef(function NeoEmptyState({
+  icon, title, description, actions, headingLevel = 'h2', className, ...rest
+}, ref) {
+  const warn = (m) => {
+    if (process.env.NODE_ENV !== 'production') console.warn(`[Neo] EmptyState: ${m}`);
+  };
+  if (!title) warn('without a title the block does not say what is missing.');
+  if (!description) warn('the description is required: a title only says WHAT is missing, not what to do.');
+  if (!LEVELS.includes(headingLevel)) warn(`headingLevel '${headingLevel}' is not in the system: ${LEVELS.join(', ')}`);
+
+  return h('div', { className: 'empty-state-shell', ref }, h('div', {
+    className: ['empty-state', className].filter(Boolean).join(' '),
+    role: 'status',
+    'aria-live': 'polite',
+    ...rest,
+  },
+    h('div', { className: 'empty-state__body' },
+      icon ? h('div', { className: 'empty-state__icon-box' },
+        h('div', { className: 'empty-state__icon', 'aria-hidden': 'true' }, icon)) : null,
+      h('div', { className: 'empty-state__content' },
+        title ? h(LEVELS.includes(headingLevel) ? headingLevel : 'h2', { className: 'empty-state__title' }, title) : null,
+        description ? h('p', { className: 'empty-state__description' }, description) : null)),
+    actions ? h('div', { className: 'empty-state__actions' }, actions) : null));
+});

package/ui/Link.mjs

@@ -0,0 +1,11 @@
+'use client';
+// packages/mui/ui/Link.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { Link } from '@mui/material';
+const h = React.createElement;
+
+export const NeoLink = React.forwardRef(function NeoLink({ label, disabled, ...rest }, ref) {
+  const mui = {};
+  if (disabled) { delete rest.href; mui.role = 'link'; mui["aria-disabled"] = 'true'; }
+  return h(Link, { ...mui, ...rest, ref }, ...(label !== undefined ? [label] : []));
+});

package/ui/Menu.mjs

@@ -0,0 +1,73 @@
+'use client';
+// packages/mui/ui/Menu.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { withAliases } from './_alias-props.mjs';
+import { Menu, MenuItem, Divider, ListItemIcon } from '@mui/material';
+import { renderIcon } from './_icon.mjs';
+const h = React.createElement;
+
+function mergeRefs(a, b) {
+  return React.useMemo(() => {
+    if (a == null && b == null) return null;
+    return (node) => {
+      for (const r of [a, b]) {
+        if (typeof r === 'function') r(node);
+        else if (r) r.current = node;
+      }
+    };
+  }, [a, b]);
+}
+
+export const NeoMenu = React.forwardRef(function NeoMenu(rawProps, ref) {
+  const { trigger, items = [], 'aria-label': ariaLabel, defaultOpen = false, ...rest } = withAliases('NeoMenu', rawProps);
+  const role = 'menu';
+  const auto = React.useId();
+  const [anchor, setAnchor] = React.useState(null);
+  const isOpen = Boolean(anchor);
+  const panelId = `neo-menu-${auto}`;
+  const idTrigger = `neo-menu-${auto}-trigger`;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!trigger) console.warn('[Neo] Menu: `trigger` is missing — without a trigger the panel does not open.');
+    if (!ariaLabel) console.warn('[Neo] Menu: `aria-label` is missing — the screen reader does not say what the menu is for.');
+  }
+
+  const triggerRef = mergeRefs(trigger?.ref ?? null, ref);
+  const triggerNode = React.useRef(null);
+  const storeNode = React.useCallback((n) => {
+    triggerNode.current = n;
+    if (typeof triggerRef === 'function') triggerRef(n);
+    else if (triggerRef) triggerRef.current = n;
+  }, [triggerRef]);
+  React.useEffect(() => {
+    if (defaultOpen && triggerNode.current) setAnchor(triggerNode.current);
+  }, [defaultOpen]);
+
+  const triggerElement = trigger && React.cloneElement(trigger, {
+    ref: storeNode,
+    id: idTrigger,
+    'aria-haspopup': role,
+    'aria-expanded': isOpen ? 'true' : undefined,
+    'aria-controls': isOpen ? panelId : undefined,
+    onClick: (e) => { setAnchor(e.currentTarget); trigger.props.onClick?.(e); },
+  });
+
+  return h(React.Fragment, null,
+    triggerElement,
+    h(Menu, {
+      id: panelId, anchorEl: anchor, open: isOpen, onClose: () => setAnchor(null),
+      MenuListProps: { role, 'aria-labelledby': idTrigger, 'aria-label': ariaLabel, disabledItemsFocusable: true },
+      ...rest,
+    }, ...items.flatMap((it, i) => (
+      it.divider
+        ? [h(Divider, { key: `d${i}` })]
+        : [h(MenuItem, {
+            key: it.value ?? i,
+            disabled: it.disabled,
+            onClick: () => { setAnchor(null); it.onSelect?.(it.value); },
+          },
+          it.icon ? h(ListItemIcon, { key: 'i', 'aria-hidden': 'true' }, renderIcon(it.icon, 'menu-item__icon')) : null,
+          h('span', { key: 'l', className: 'NeoMenu-label' }, it.label))]
+    ))),
+  );
+});

package/ui/ModalDialog.mjs

@@ -0,0 +1,14 @@
+'use client';
+// packages/mui/ui/ModalDialog.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { withAliases } from './_alias-props.mjs';
+import { ModalDialogBase } from './_modal-base.mjs';
+const h = React.createElement;
+
+export const NeoModalDialog = React.forwardRef(function NeoModalDialog(rawProps, ref) {
+  const { open, onClose, title, description, size = 'xs', type = 'default', closable = true, actions, children, ...rest } = withAliases('NeoModalDialog', rawProps);
+  return h(ModalDialogBase, {
+    open, onClose, title, description, size, type, closable, actions,
+    ...rest, ref,
+  }, children);
+});

package/ui/ModalFullscreen.mjs

@@ -0,0 +1,20 @@
+'use client';
+// packages/mui/ui/ModalFullscreen.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { withAliases } from './_alias-props.mjs';
+import { NeoButtonIcon } from './ButtonIcon.mjs';
+import { renderIcon } from './_icon.mjs';
+import { ModalDialogBase } from './_modal-base.mjs';
+const h = React.createElement;
+
+export const NeoModalFullscreen = React.forwardRef(function NeoModalFullscreen(rawProps, ref) {
+  const { open, onClose, onBack, title, actions, children, ...rest } = withAliases('NeoModalFullscreen', rawProps);
+  return h(ModalDialogBase, {
+    open, onClose, title, actions, fullScreen: true, closable: true,
+    back: onBack
+        ? h(NeoButtonIcon, { onClick: onBack, 'aria-label': 'Volver', variant: 'tertiary', className: 'NeoModalFullscreen-back' },
+            renderIcon('system-nav-left'))
+        : null,
+    ...rest, ref,
+  }, children);
+});

package/ui/RadioButton.mjs

@@ -0,0 +1,23 @@
+'use client';
+// packages/mui/ui/RadioButton.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { FormControlLabel, Radio } from '@mui/material';
+import { hasAccessibleName } from './_warn.mjs';
+const h = React.createElement;
+
+export const NeoRadioButton = React.forwardRef(function NeoRadioButton({ label, checked, defaultChecked, disabled, onChange, id, hideLabel = false, ...rest }, ref) {
+  const autoId = React.useId();
+  const fieldId = id || autoId;
+  hasAccessibleName('NeoRadioButton', label, rest);
+  return h(FormControlLabel, {
+    ref,
+    htmlFor: fieldId, label, className: hideLabel ? 'neo-label-hidden' : undefined,
+    control: h(Radio, {
+      id: fieldId, disabled,
+      ...(checked !== undefined ? { checked } : {}),
+      ...(defaultChecked !== undefined ? { defaultChecked } : {}),
+      onChange,
+      ...rest,
+    }),
+  });
+});

package/ui/RadioGroup.mjs

@@ -0,0 +1,16 @@
+'use client';
+// packages/mui/ui/RadioGroup.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { FormControl, FormLabel, RadioGroup } from '@mui/material';
+import { warn, hasAccessibleName } from './_warn.mjs';
+const h = React.createElement;
+
+export const NeoRadioGroup = React.forwardRef(function NeoRadioGroup({ name, legend, value, defaultValue, direction = 'vertical', disabled = false, onChange, children, ...rest }, ref) {
+  hasAccessibleName('NeoRadioGroup', legend, rest);
+  if (!name) warn("NeoRadioGroup: without a `name`, two radios do NOT exclude each other even when they look like one group.");
+  const legendId = `neo-radio-${React.useId()}-legend`;
+  return h(FormControl, { component: 'fieldset', disabled, ref },
+    h(FormLabel, { component: 'legend', id: legendId }, legend),
+    h(RadioGroup, { 'aria-labelledby': legendId, name, value, defaultValue, row: direction === 'horizontal', onChange, ...rest }, children),
+  );
+});

package/ui/Select.mjs

@@ -0,0 +1,35 @@
+'use client';
+// packages/mui/ui/Select.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { FormControl, FormLabel, Select, OutlinedInput, FormHelperText } from '@mui/material';
+import { helpIcon } from './_help.mjs';
+import { selectValueProps } from './_select-value.mjs';
+import { hasAccessibleName } from './_warn.mjs';
+const h = React.createElement;
+
+export const NeoSelect = React.forwardRef(function NeoSelect({ label, required = false, helperText, error = false, readOnly = false, disabled = false, tooltip, tooltipLabel, id, placeholder, renderValue, children, ...rest }, ref) {
+  const autoId = React.useId();
+  const fieldId = id || autoId;
+  const helpId = helperText ? `${fieldId}-helper` : undefined;
+  const [openOwn, setOpenOwn] = React.useState(Boolean(rest.defaultOpen));
+  const open = rest.open ?? openOwn;
+  const labelId = label ? `${fieldId}-label` : undefined;
+  hasAccessibleName('NeoSelect', label, rest);
+  const helpNode = helpIcon({ text: tooltip, name: tooltipLabel, label, comp: 'Select', prefix: 'select' });
+  const labelNode = label ? h(FormLabel, { id: labelId, htmlFor: fieldId, required }, label) : null;
+  return h(FormControl, { error, disabled, fullWidth: true, variant: 'outlined', ref },
+    label && helpNode ? h('div', { className: 'select__label-row' }, labelNode, helpNode) : labelNode,
+    h(Select, {
+      id: fieldId, readOnly,
+      labelId,
+      SelectDisplayProps: { 'aria-invalid': error ? 'true' : undefined, 'aria-readonly': readOnly ? 'true' : undefined, ...(open ? null : { 'aria-controls': undefined }) },
+      ...selectValueProps({ placeholder, renderValue, children, value: rest.value, defaultValue: rest.defaultValue }),
+      input: h(OutlinedInput, { notched: false }),
+      'aria-describedby': helpId,
+      ...rest,
+      MenuProps: { ...rest.MenuProps, MenuListProps: { disabledItemsFocusable: true, ...(rest.MenuProps || {}).MenuListProps } },
+      onOpen: (e) => { setOpenOwn(true); rest.onOpen?.(e); }, onClose: (e) => { setOpenOwn(false); rest.onClose?.(e); },
+    }, children),
+    helperText ? h(FormHelperText, { id: helpId, key: error ? 'error' : 'helper', role: error ? 'alert' : undefined }, helperText) : null,
+  );
+});

package/ui/Snackbar.mjs

@@ -0,0 +1,29 @@
+'use client';
+// packages/mui/ui/Snackbar.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { Snackbar, SnackbarContent } from '@mui/material';
+import { NeoButtonIcon } from './ButtonIcon.mjs';
+import { renderIcon } from './_icon.mjs';
+const h = React.createElement;
+
+const ACCION = { variant: 'secondary', size: 'small', surface: 'inverse' };
+const conVariante = (node) => (React.isValidElement(node) && typeof node.type !== 'string'
+  ? React.cloneElement(node, Object.fromEntries(Object.entries(ACCION).filter(([k]) => node.props[k] === undefined)))
+  : node);
+
+export const NeoSnackbar = React.forwardRef(function NeoSnackbar({ open, onClose, message, actions, closable = true, ...rest }, ref) {
+  if (!message && process.env.NODE_ENV !== 'production') {
+    console.warn('[Neo] Snackbar: the message is missing — a snackbar without text communicates nothing.');
+  }
+  const acciones = actions ? h('span', { className: 'NeoSnackbar-action', key: 'a' }, React.Children.map(actions, conVariante)) : null;
+  const equis = closable ? h(NeoButtonIcon, { variant: 'tertiary', size: 'small', surface: 'inverse', className: 'NeoSnackbar-close', key: 'c', onClick: (e) => onClose && onClose(e, 'closeButton'), 'aria-label': 'Cerrar aviso' }, renderIcon('system-close')) : null;
+  return h(Snackbar, { ref, open, onClose, ...rest },
+    h(SnackbarContent, {
+      role: 'status',
+      'aria-live': 'polite',
+      message: h('span', { className: 'NeoSnackbar-message' },
+        h('span', { className: 'NeoSnackbar-icon', key: 'i' }, renderIcon('semantic-info-inverse')),
+        h('span', { className: 'NeoSnackbar-text', key: 't' }, message)),
+      action: acciones || equis ? [acciones, equis] : undefined,
+    }));
+});

package/ui/Spinner.mjs

@@ -0,0 +1,12 @@
+'use client';
+// packages/mui/ui/Spinner.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { CircularProgress } from '@mui/material';
+const h = React.createElement;
+
+export const NeoSpinner = React.forwardRef(function NeoSpinner({ size = 'small', ...rest }, ref) {
+  const mui = {};
+  if (size === 'small') { mui.size = 'sm'; }
+  if (size === 'large') { mui.size = 'lg'; }
+  return h(CircularProgress, { ...mui, ...rest, ref });
+});

package/ui/Tabs.mjs

@@ -0,0 +1,46 @@
+'use client';
+// packages/mui/ui/Tabs.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { Tabs, Tab } from '@mui/material';
+import { renderIcon } from './_icon.mjs';
+import { reveal } from './_reveal.mjs';
+import { watchOverflow } from './_overflow.mjs';
+const h = React.createElement;
+
+export const NeoTabs = React.forwardRef(function NeoTabs({ items = [], value, defaultValue, onChange, 'aria-label': ariaLabel, ...rest }, ref) {
+  const auto = React.useId();
+  const [internal, setInternal] = React.useState(defaultValue ?? items[0]?.value);
+  const activeValue = value !== undefined ? value : internal;
+  const rowRef = React.useRef(null);
+  React.useEffect(() => watchOverflow(rowRef.current, '[role="tab"]'), [items.length]);
+  const setRef = React.useCallback((n) => { rowRef.current = n; if (typeof ref === 'function') ref(n); else if (ref) ref.current = n; }, [ref]);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!ariaLabel) console.warn('[Neo] Tabs: `aria-label` is missing — without it the screen reader does not say what the list is for.');
+    if (items.length < 2) console.warn('[Neo] Tabs: with fewer than two sections there is nothing to navigate between.');
+  }
+
+  const id = (v, part) => `neo-tabs-${auto}-${part}-${v}`;
+  const handleChange = (e, v) => { reveal(e.target, '[role="tab"]', { inline: 'center', settle: true }); if (value === undefined) setInternal(v); onChange?.(e, v); };
+
+  return h(React.Fragment, null,
+    h(Tabs, { value: activeValue, onChange: handleChange, 'aria-label': ariaLabel, ...rest, ref: setRef },
+      ...items.map((it) => h(Tab, {
+        key: it.value,
+        value: it.value,
+        label: it.label,
+        icon: renderIcon(it.icon),
+        disabled: it.disabled,
+        id: id(it.value, 'tab'),
+        'aria-controls': id(it.value, 'panel'),
+      }))),
+    ...items.map((it) => h('div', {
+      key: it.value,
+      role: 'tabpanel',
+      id: id(it.value, 'panel'),
+      'aria-labelledby': id(it.value, 'tab'),
+      tabIndex: 0,
+      hidden: it.value !== activeValue,
+    }, it.value === activeValue ? it.content : null)),
+  );
+});

package/ui/Tag.mjs

@@ -0,0 +1,16 @@
+'use client';
+// packages/mui/ui/Tag.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { Chip } from '@mui/material';
+import { renderIcon } from './_icon.mjs';
+const h = React.createElement;
+
+export const NeoTag = React.forwardRef(function NeoTag({ tone = 'soft', label, icon, iconRight, ...rest }, ref) {
+  const mui = {};
+  mui.variant = 'tag';
+  mui.clickable = false;
+  if (tone === 'solid') { mui["data-tone"] = 'solid'; }
+  mui.label = iconRight ? [h(React.Fragment, { key: 'l' }, label), h(React.Fragment, { key: 'i' }, renderIcon(iconRight))] : label;
+  if (icon) mui.icon = renderIcon(icon);
+  return h(Chip, { ...mui, ...rest, ref });
+});

package/ui/TextArea.mjs

@@ -0,0 +1,45 @@
+'use client';
+// packages/mui/ui/TextArea.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { FormControl, FormLabel, OutlinedInput, FormHelperText } from '@mui/material';
+import { helpIcon } from './_help.mjs';
+import { useKeyboardFocus } from './_keyboard-focus.mjs';
+import { warn, hasAccessibleName } from './_warn.mjs';
+const h = React.createElement;
+
+export const NeoTextArea = React.forwardRef(function NeoTextArea({ label, required = false, helperText, error = false, readOnly = false, disabled = false, tooltip, counter, tooltipLabel, id, inputMode, maxLength, inputProps: consumerInputProps, value, defaultValue, onChange, minRows = 3, maxRows, rows, ...rest }, ref) {
+  const inputAttrs = { ...(inputMode != null ? { inputMode } : {}), ...(maxLength != null ? { maxLength } : {}), ...(consumerInputProps || {}) };
+  {
+    const extras = ['iconLeft', 'iconRight', 'prefix', 'suffix'].filter((k) => rest[k] != null && rest[k] !== false && rest[k] !== '');
+    if (extras.length) warn(`text-field: with type=text-area the master does not draw ${extras.join(', ')} — the contract omits them`);
+    delete rest.iconLeft; delete rest.iconRight; delete rest.prefix; delete rest.suffix;
+  }
+  if (rest.type === 'input') warn('text-field: type=input is NeoTextField, not NeoTextArea');
+  if (['input', 'text-area'].includes(rest.type)) delete rest.type;
+  const autoId = React.useId();
+  const fieldId = id || autoId;
+  const helpId = helperText ? `${fieldId}-helper` : undefined;
+  const [typed, setTyped] = React.useState(String(defaultValue ?? '').length);
+  const count = counter ?? (maxLength != null ? `${value != null ? String(value).length : typed}/${maxLength}` : undefined);
+  hasAccessibleName('NeoTextArea', label, rest);
+  const keyboardFocus = useKeyboardFocus();
+  const helpNode = helpIcon({ text: tooltip, name: tooltipLabel, label, comp: 'TextArea', prefix: 'field' });
+  const labelNode = label ? h(FormLabel, { htmlFor: fieldId, required }, label) : null;
+  return h(FormControl, { error, disabled, fullWidth: true, variant: 'outlined', onFocus: keyboardFocus.onFocus, onBlur: keyboardFocus.onBlur, onPointerDown: keyboardFocus.onPointerDown, ref },
+    label && helpNode ? h('div', { className: 'field__label-row' }, labelNode, helpNode) : labelNode,
+    h(OutlinedInput, {
+      id: fieldId, notched: false, readOnly,
+      multiline: true, ...(rows != null ? { rows } : { minRows, ...(maxRows != null ? { maxRows } : {}) }),
+      ...(Object.keys(inputAttrs).length ? { inputProps: inputAttrs } : {}),
+      'aria-describedby': helpId,
+      value, defaultValue, onChange: (e) => { setTyped(e.target.value.length); onChange?.(e); },
+      ...rest,
+      className: [keyboardFocus.active ? 'field--focus' : null, rest.className].filter(Boolean).join(' ') || undefined,
+    }),
+    (error ? helperText : (helperText || count))
+      ? h('span', { className: 'field__footer' },
+        helperText ? h(FormHelperText, { id: helpId, key: error ? 'error' : 'helper', role: error ? 'alert' : undefined }, helperText) : h('span'),
+        count ? h('span', { className: 'field__counter' + (disabled ? ' Mui-disabled' : ''), 'aria-hidden': 'true' }, count) : null)
+      : null,
+  );
+});

package/ui/TextField.mjs

@@ -0,0 +1,47 @@
+'use client';
+// packages/mui/ui/TextField.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { FormControl, FormLabel, OutlinedInput, FormHelperText, InputAdornment } from '@mui/material';
+import { renderIcon } from './_icon.mjs';
+import { helpIcon } from './_help.mjs';
+import { useKeyboardFocus } from './_keyboard-focus.mjs';
+import { warn, hasAccessibleName } from './_warn.mjs';
+const h = React.createElement;
+
+export const NeoTextField = React.forwardRef(function NeoTextField({ label, required = false, helperText, error = false, readOnly = false, disabled = false, prefix, suffix, tooltip, iconLeft, iconRight, counter, tooltipLabel, startAdornment, endAdornment, id, inputMode, maxLength, inputProps: consumerInputProps, value, defaultValue, onChange, ...rest }, ref) {
+  const inputAttrs = { ...(inputMode != null ? { inputMode } : {}), ...(maxLength != null ? { maxLength } : {}), ...(consumerInputProps || {}), onKeyDown: (e) => { rest.onKeyDown?.(e); consumerInputProps?.onKeyDown?.(e); if (e.key === 'Enter' && !e.defaultPrevented && !e.nativeEvent.isComposing && e.keyCode !== 229) e.currentTarget.blur(); } };
+  if (rest.type === 'text-area') warn('text-field: type=text-area is NeoTextArea, not NeoTextField');
+  if (['input', 'text-area'].includes(rest.type)) delete rest.type;
+  const autoId = React.useId();
+  const fieldId = id || autoId;
+  const helpId = helperText ? `${fieldId}-helper` : undefined;
+  const [typed, setTyped] = React.useState(String(defaultValue ?? '').length);
+  const count = counter ?? (maxLength != null ? `${value != null ? String(value).length : typed}/${maxLength}` : undefined);
+  hasAccessibleName('NeoTextField', label, rest);
+  const keyboardFocus = useKeyboardFocus();
+  const helpNode = helpIcon({ text: tooltip, name: tooltipLabel, label, comp: 'TextField', prefix: 'field' });
+  const adornment = (pos, ...pieces) => {
+    const present = pieces.filter(([, n]) => n).map(([k, n]) => h(InputAdornment, { key: k, position: pos }, n));
+    if (!present.length) return undefined;
+    return present.length === 1 ? present[0] : h(React.Fragment, null, ...present);
+  };
+  const labelNode = label ? h(FormLabel, { htmlFor: fieldId, required }, label) : null;
+  return h(FormControl, { error, disabled, fullWidth: true, variant: 'outlined', onFocus: keyboardFocus.onFocus, onBlur: keyboardFocus.onBlur, onPointerDown: keyboardFocus.onPointerDown, ref },
+    label && helpNode ? h('div', { className: 'field__label-row' }, labelNode, helpNode) : labelNode,
+    h(OutlinedInput, {
+      id: fieldId, notched: false, readOnly,
+      startAdornment: startAdornment ?? adornment('start', ['i', iconLeft ? renderIcon(iconLeft, 'field__icon') : null], ['t', prefix ? h('span', { className: 'field__prefix' }, prefix) : null]),
+      endAdornment: endAdornment ?? adornment('end', ['t', suffix ? h('span', { className: 'field__suffix' }, suffix) : null], ['i', iconRight ? renderIcon(iconRight, 'field__icon') : null]),
+      ...(Object.keys(inputAttrs).length ? { inputProps: inputAttrs } : {}),
+      'aria-describedby': helpId,
+      value, defaultValue, onChange: (e) => { setTyped(e.target.value.length); onChange?.(e); },
+      ...rest,
+      className: [keyboardFocus.active ? 'field--focus' : null, rest.className].filter(Boolean).join(' ') || undefined,
+    }),
+    (error ? helperText : (helperText || count))
+      ? h('span', { className: 'field__footer' },
+        helperText ? h(FormHelperText, { id: helpId, key: error ? 'error' : 'helper', role: error ? 'alert' : undefined }, helperText) : h('span'),
+        count ? h('span', { className: 'field__counter' + (disabled ? ' Mui-disabled' : ''), 'aria-hidden': 'true' }, count) : null)
+      : null,
+  );
+});

package/ui/Toggle.mjs

@@ -0,0 +1,27 @@
+'use client';
+// packages/mui/ui/Toggle.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { Switch } from '@mui/material';
+import { hasAccessibleName } from './_warn.mjs';
+import { innerInputProps } from './_inner-input.mjs';
+const h = React.createElement;
+
+export const NeoToggle = React.forwardRef(function NeoToggle({ label, checked, defaultChecked, disabled = false, onChange, id, 'aria-label': ariaLabel, ...rest }, ref) {
+  const autoId = React.useId();
+  const fieldId = id || autoId;
+  const labelId = `${fieldId}-label`;
+  const hasText = label !== undefined && label !== null && String(label).trim() !== '';
+  const inputAria = hasText ? { 'aria-labelledby': labelId } : ariaLabel ? { 'aria-label': ariaLabel } : {};
+  hasAccessibleName('NeoToggle', label, { ...rest, 'aria-label': ariaLabel });
+  return h('span', { className: 'neo-toggle-field', ref },
+    hasText ? h('span', { id: labelId }, label) : null,
+    h(Switch, {
+      id: fieldId, disabled,
+      ...(checked !== undefined ? { checked } : {}),
+      ...(defaultChecked !== undefined ? { defaultChecked } : {}),
+      ...innerInputProps({ role: 'switch', ...inputAria }),
+      onChange,
+      ...rest,
+    }),
+  );
+});

package/ui/Tooltip.mjs

@@ -0,0 +1,20 @@
+'use client';
+// packages/mui/ui/Tooltip.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { Tooltip } from '@mui/material';
+const h = React.createElement;
+
+export const NeoTooltip = React.forwardRef(function NeoTooltip({ placement = 'top', label, ...rest }, ref) {
+  const mui = {};
+  if (placement === 'none') { mui.arrow = false; }
+  if (placement === 'top') { mui.placement = 'top'; }
+  if (placement === 'bottom') { mui.placement = 'bottom'; }
+  if (placement === 'left') { mui.placement = 'left'; }
+  if (placement === 'right') { mui.placement = 'right'; }
+  if (placement === 'top-start') { mui.placement = 'top-start'; }
+  if (placement === 'top-end') { mui.placement = 'top-end'; }
+  if (placement === 'bottom-start') { mui.placement = 'bottom-start'; }
+  if (placement === 'bottom-end') { mui.placement = 'bottom-end'; }
+  mui.title = label;
+  return h(Tooltip, { ...mui, ...rest, ref });
+});

package/ui/_alias-props.mjs

@@ -0,0 +1,26 @@
+// packages/mui/ui/_alias-props.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+
+export const ALIAS_PROPS = {
+  acciones: 'actions',
+  cerrar: 'closable',
+  onVolver: 'onBack',
+};
+
+const alreadyWarned = new Set();
+
+export function withAliases(component, props) {
+  let result = props;
+  for (const [oldName, newName] of Object.entries(ALIAS_PROPS)) {
+    if (!(oldName in props)) continue;
+    if (result === props) result = { ...props };
+    if (!(newName in result)) result[newName] = result[oldName];
+    delete result[oldName];
+    const key = `${component}.${oldName}`;
+    if (process.env.NODE_ENV !== 'production' && !alreadyWarned.has(key)) {
+      alreadyWarned.add(key);
+      console.warn(`[Neo] ${component}: the prop \`${oldName}\` is now called \`${newName}\`, since the move to English. `
+        + 'It still works in this version and stops working in the next one.');
+    }
+  }
+  return result;
+}

package/ui/_css-layers.mjs

@@ -0,0 +1,15 @@
+// packages/mui/ui/_css-layers.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+
+export const TOKENS = [
+  'packages/foundations/tokens/neo-color.css',
+  'packages/foundations/tokens/neo-foundations.css',
+];
+
+export const PLAIN_FOR_NOW = [];
+
+export const SPRITE = 'packages/foundations/icons/icons.svg';
+
+export const REACT_LAYERS = [...TOKENS, ...PLAIN_FOR_NOW];
+
+export const CLASSES_WITHOUT_RULE = [
+];