@textui/widgets 0.1.0

package/src/form/form-actions.ts

@@ -0,0 +1,35 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+import { defineComponent, h, useTheme } from '@textui/core';
+import { Button } from '../control/index.js';
+import { useFormContext } from './shared.js';
+
+export interface FormActionsProps extends BoxProps {
+  submitLabel?: string;
+  cancelLabel?: string;
+  onCancel?(): void;
+  tone?: SemanticVariant;
+  /** Disable submit until something changed. */
+  requireDirty?: boolean;
+}
+
+export const FormActions = defineComponent<FormActionsProps>('FormActions', (props) => {
+  const theme = useTheme();
+  const form = useFormContext();
+  const {
+    submitLabel = 'Submit', cancelLabel = 'Cancel', onCancel,
+    tone = 'primary', requireDirty = false, ...rest
+  } = props;
+
+  const blocked = form.submitting || (requireDirty && !form.dirty);
+
+  return h('box', { direction: 'row', gap: 1, justify: 'end', ...rest },
+    onCancel ? h(Button, { label: cancelLabel, onPress: onCancel }) : null,
+    h(Button, {
+      label: form.submitting ? `${submitLabel}${theme.glyphs.ellipsis}` : submitLabel,
+      tone,
+      variant: 'solid',
+      disabled: blocked,
+      onPress: () => void form.submit(),
+    }),
+  );
+});

package/src/form/form-section.ts

@@ -0,0 +1,16 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+
+export interface FormSectionProps extends BoxProps {
+  title: string;
+  description?: string;
+}
+
+export const FormSection = defineComponent<FormSectionProps>('FormSection', (props) => {
+  const { title, description, children, ...rest } = props;
+  return h('box', { direction: 'column', ...rest },
+    h('text', { content: title, bold: true }),
+    description ? h('text', { content: description, fg: 'muted', wrap: 'word' }) : null,
+    h('box', { direction: 'column' }, children),
+  );
+});

package/src/form/form.ts

@@ -0,0 +1,13 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+import type { FormApi } from './shared.js';
+import { FormContext } from './shared.js';
+
+export interface FormProps extends BoxProps {
+  form: FormApi<Record<string, unknown>>;
+}
+
+export const Form = defineComponent<FormProps>('Form', ({ form, children, ...rest }) =>
+  h(FormContext.Provider, { value: form },
+    h('box', { role: 'form', direction: 'column', ...rest }, children)),
+);

package/src/form/index.ts

@@ -0,0 +1,191 @@
+import type { ComponentDefinition } from '@textui/core';
+import { useCallback, useMemo, useState } from '@textui/core';
+import { DangerZone } from './danger-zone.js';
+import { Field } from './field.js';
+import { FormActions } from './form-actions.js';
+import { FormSection } from './form-section.js';
+import { Form } from './form.js';
+import type { FormApi, FormErrors } from './shared.js';
+
+/**
+ * Forms and validation.
+ *
+ * Validation runs on a whole values object rather than per field, because the
+ * rules people actually need are cross-field - "confirm must match password",
+ * "end must be after start" - and a per-field validator cannot see its
+ * siblings. Fields subscribe to the errors that name them.
+ */
+export * from './danger-zone.js';
+export * from './field.js';
+export * from './form.js';
+export * from './form-actions.js';
+export * from './form-section.js';
+export type { FormApi, FormErrors, FormState } from './shared.js';
+export { useFormContext } from './shared.js';
+
+export type Validator<T> = (values: T) => FormErrors<T> | null;
+
+export interface UseFormOptions<T extends Record<string, unknown>> {
+  initialValues: T;
+  validate?: Validator<T>;
+  onSubmit?(values: T): void | Promise<void>;
+}
+
+export function useForm<T extends Record<string, unknown>>(
+  options: UseFormOptions<T>,
+): FormApi<T> {
+  const [values, setValuesState] = useState<T>(options.initialValues);
+  // Validate the initial values immediately: a form whose required fields are
+  // empty is not valid, and reporting it as valid until the first keystroke
+  // makes `form.valid` useless for enabling a submit button.
+  const [errors, setErrors] = useState<FormErrors<T>>(
+    () => options.validate?.(options.initialValues) ?? {},
+  );
+  const [touched, setTouched] = useState<Partial<Record<keyof T & string, boolean>>>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [initial] = useState(options.initialValues);
+
+  const runValidation = useCallback(
+    (next: T): FormErrors<T> => options.validate?.(next) ?? {},
+    [options.validate],
+  );
+
+  const setValue = <K extends keyof T & string>(field: K, value: T[K]): void => {
+    const next = { ...values, [field]: value } as T;
+    setValuesState(next);
+    // Re-validate as they type, but only surface what they have touched.
+    setErrors(runValidation(next));
+  };
+
+  const dirty = useMemo(
+    () => JSON.stringify(values) !== JSON.stringify(initial),
+    [values, initial],
+  );
+
+  const api: FormApi<T> = {
+    values,
+    errors,
+    touched,
+    submitting,
+    submitted,
+    valid: Object.keys(errors).length === 0,
+    dirty,
+
+    setValue,
+    setValues(patch) {
+      const next = { ...values, ...patch } as T;
+      setValuesState(next);
+      setErrors(runValidation(next));
+    },
+    setError(field, message) {
+      setErrors({ ...errors, [field]: message } as FormErrors<T>);
+    },
+    touch(field) {
+      if (touched[field]) return;
+      setTouched({ ...touched, [field]: true });
+    },
+    reset(next) {
+      setValuesState(next ?? initial);
+      setErrors({});
+      setTouched({});
+      setSubmitted(false);
+    },
+    validate() {
+      const found = runValidation(values);
+      setErrors(found);
+      return Object.keys(found).length === 0;
+    },
+    async submit() {
+      const found = runValidation(values);
+      setErrors(found);
+      // Submitting reveals every error, touched or not.
+      setTouched(
+        Object.keys(values).reduce(
+          (acc, key) => ({ ...acc, [key]: true }),
+          {} as Partial<Record<keyof T & string, boolean>>,
+        ),
+      );
+      if (Object.keys(found).length > 0) return;
+
+      setSubmitting(true);
+      try {
+        await options.onSubmit?.(values);
+        setSubmitted(true);
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    errorFor(field) {
+      return touched[field] || submitted ? errors[field] : undefined;
+    },
+  };
+
+  return api;
+}
+
+// ------------------------------------------------------------- validators
+
+/** Small composable validators, because every form needs the same four. */
+export const validators = {
+  required: (message = 'Required') =>
+    (value: unknown): string | undefined =>
+      value === undefined || value === null || value === '' ? message : undefined,
+
+  minLength: (n: number, message?: string) =>
+    (value: unknown): string | undefined =>
+      typeof value === 'string' && value.length < n
+        ? message ?? `Must be at least ${n} characters`
+        : undefined,
+
+  maxLength: (n: number, message?: string) =>
+    (value: unknown): string | undefined =>
+      typeof value === 'string' && value.length > n
+        ? message ?? `Must be at most ${n} characters`
+        : undefined,
+
+  pattern: (re: RegExp, message = 'Invalid format') =>
+    (value: unknown): string | undefined =>
+      typeof value === 'string' && value !== '' && !re.test(value) ? message : undefined,
+
+  range: (min: number, max: number, message?: string) =>
+    (value: unknown): string | undefined => {
+      const n = Number(value);
+      return Number.isNaN(n) || n < min || n > max
+        ? message ?? `Must be between ${min} and ${max}`
+        : undefined;
+    },
+};
+
+/**
+ * Build a whole-form validator from per-field rules.
+ *
+ * Returns the error map rather than `FormErrors | null`, so it composes: a
+ * caller can take the result, add a cross-field rule, and hand the whole thing
+ * to `useForm` without a null check in between.
+ */
+export function fieldValidators<T extends Record<string, unknown>>(
+  rules: Partial<Record<keyof T & string, ((value: unknown) => string | undefined)[]>>,
+): (values: T) => FormErrors<T> {
+  return (values) => {
+    const errors: FormErrors<T> = {};
+    for (const [field, checks] of Object.entries(rules) as [keyof T & string, ((value: unknown) => string | undefined)[]][]) {
+      for (const check of checks ?? []) {
+        const message = check(values[field]);
+        if (message) {
+          errors[field] = message;
+          break;
+        }
+      }
+    }
+    return errors;
+  };
+}
+
+export const FORM_COMPONENTS: ComponentDefinition[] = [
+  { component: 'Form', category: 'form', renderer: { kind: 'function', render: Form }, role: 'form', description: 'Provides form state to its fields.' },
+  { component: 'Field', category: 'form', renderer: { kind: 'function', render: Field }, description: 'Label, control and error, aligned.' },
+  { component: 'FormSection', category: 'form', renderer: { kind: 'function', render: FormSection }, description: 'A titled group of fields.' },
+  { component: 'FormActions', category: 'form', renderer: { kind: 'function', render: FormActions }, description: 'Submit and cancel.' },
+  { component: 'DangerZone', category: 'form', renderer: { kind: 'function', render: DangerZone }, description: 'Destructive action, fenced off.' },
+];

package/src/form/shared.ts

@@ -0,0 +1,36 @@
+import { createContext, useContext } from '@textui/core';
+
+export type FormErrors<T> = Partial<Record<keyof T & string, string>>;
+
+export interface FormState<T extends Record<string, unknown>> {
+  values: T;
+  errors: FormErrors<T>;
+  /** Fields the user has interacted with. Errors show only for these. */
+  touched: Partial<Record<keyof T & string, boolean>>;
+  submitting: boolean;
+  submitted: boolean;
+  valid: boolean;
+  dirty: boolean;
+}
+
+export interface FormApi<T extends Record<string, unknown>> extends FormState<T> {
+  setValue<K extends keyof T & string>(field: K, value: T[K]): void;
+  setValues(values: Partial<T>): void;
+  setError(field: keyof T & string, message: string | undefined): void;
+  touch(field: keyof T & string): void;
+  reset(values?: T): void;
+  validate(): boolean;
+  submit(): Promise<void>;
+  /** The error to show for a field: only after it has been touched. */
+  errorFor(field: keyof T & string): string | undefined;
+}
+
+export const FormContext = createContext<FormApi<Record<string, unknown>> | null>('Form', null);
+
+export function useFormContext<T extends Record<string, unknown>>(): FormApi<T> {
+  const form = useContext(FormContext);
+  if (!form) {
+    throw new Error('[textui] a Field must be rendered inside a Form');
+  }
+  return form as unknown as FormApi<T>;
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+import type { ComponentDefinition, TextUIApp, Disposable } from '@textui/core';
+import { createBag, PRIMITIVES } from '@textui/core';
+import { LAYOUT_COMPONENTS } from './layout/index.js';
+import { DISPLAY_COMPONENTS } from './display/index.js';
+import { CONTROL_COMPONENTS } from './control/index.js';
+import { FORM_COMPONENTS } from './form/index.js';
+import { DATA_COMPONENTS } from './data/index.js';
+import { NAVIGATION_COMPONENTS } from './navigation/index.js';
+import { OVERLAY_COMPONENTS } from './overlay/index.js';
+import { CHART_COMPONENTS } from './chart/index.js';
+import { SURFACE_COMPONENTS, BUILTIN_LAYOUTS } from './surface/index.js';
+import { SHELL_COMPONENTS, BUILTIN_SHELLS } from './shells/index.js';
+import { PANEL_COMPONENTS, panelCommands } from './panel/index.js';
+
+export * from './layout/index.js';
+export * from './display/index.js';
+export * from './control/index.js';
+export * from './form/index.js';
+export * from './data/index.js';
+export * from './navigation/index.js';
+export * from './overlay/index.js';
+export * from './chart/index.js';
+export * from './surface/index.js';
+export * from './shells/index.js';
+export * from './panel/index.js';
+export * from './decorations.js';
+export * from './find.js';
+export * from './viewport.js';
+export * from './tone.js';
+
+/** Every component the library ships, in one list. */
+export const CATALOG: ComponentDefinition[] = [
+  ...PRIMITIVES,
+  ...LAYOUT_COMPONENTS,
+  ...DISPLAY_COMPONENTS,
+  ...CONTROL_COMPONENTS,
+  ...FORM_COMPONENTS,
+  ...DATA_COMPONENTS,
+  ...NAVIGATION_COMPONENTS,
+  ...OVERLAY_COMPONENTS,
+  ...CHART_COMPONENTS,
+  ...SURFACE_COMPONENTS,
+  ...SHELL_COMPONENTS,
+  ...PANEL_COMPONENTS,
+];
+
+/**
+ * Register the catalog, the surface layouts and the built-in shells.
+ *
+ * One call, because a half-registered catalog fails at mount time rather than
+ * at boot - and a runtime miss is much harder to read than a boot error.
+ */
+export function registerBuiltins(app: TextUIApp): Disposable {
+  const bag = createBag();
+  bag.add(app.components.registerMany(CATALOG));
+  for (const layout of BUILTIN_LAYOUTS) bag.add(app.layouts.register(layout));
+  for (const shell of BUILTIN_SHELLS) bag.add(app.shells.register(shell));
+  // The panel commands come with the panel: what they offer is read off the
+  // resource registry, so a host that mounts a panel has already said
+  // everything "open with" needs. Keys stay the host's choice.
+  for (const command of panelCommands(app)) bag.add(app.commands.register(command));
+  return bag;
+}

package/src/layout/center.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+
+export interface CenterProps extends BoxProps {
+  /** Centre horizontally, vertically, or both. */
+  axis?: 'both' | 'horizontal' | 'vertical';
+}
+
+export const Center = defineComponent<CenterProps>('Center', ({ axis = 'both', ...props }) =>
+  h('box', {
+    flex: props.flex ?? 1,
+    direction: 'column',
+    justify: axis === 'horizontal' ? 'start' : 'center',
+    align: axis === 'vertical' ? 'stretch' : 'center',
+    ...props,
+  }),
+);

package/src/layout/column.ts

@@ -0,0 +1,6 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+
+export const Column = defineComponent<BoxProps>('Column', (props) =>
+  h('box', { direction: 'column', ...props }),
+);

package/src/layout/divider.ts

@@ -0,0 +1,31 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h, useTheme } from '@textui/core';
+
+export interface DividerProps extends Omit<BoxProps, 'direction'> {
+  /** A divider runs across the flow, so it names its own axis. */
+  direction?: 'horizontal' | 'vertical';
+  /** Text set into the rule. */
+  label?: string;
+  labelAlign?: 'left' | 'center' | 'right';
+  char?: string;
+}
+
+export const Divider = defineComponent<DividerProps>('Divider', (props) => {
+  const theme = useTheme();
+  const { direction = 'horizontal', label, labelAlign = 'left', char, ...rest } = props;
+  const chars = theme.borderChars();
+
+  if (direction === 'vertical') {
+    return h('box', { role: 'separator', width: 1, fill: char ?? chars.left, fg: 'border', ...rest });
+  }
+
+  if (!label) {
+    return h('box', { role: 'separator', height: 1, fill: char ?? chars.top, fg: 'border', ...rest });
+  }
+
+  return h('box', { direction: 'row', gap: 1, height: 1, ...rest },
+    labelAlign !== 'left' ? h('box', { flex: 1, fill: char ?? chars.top, fg: 'border' }) : null,
+    h('text', { content: label, fg: 'muted' }),
+    labelAlign !== 'right' ? h('box', { flex: 1, fill: char ?? chars.top, fg: 'border' }) : null,
+  );
+});

package/src/layout/grid.ts

@@ -0,0 +1,34 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+
+export interface GridProps extends BoxProps {
+  columns: number;
+}
+
+/**
+ * A grid is rows of equal-flex cells. Terminals have no sub-cell measurement,
+ * so an even split is the honest primitive; anything else is a Row with widths.
+ */
+export const Grid = defineComponent<GridProps>('Grid', ({ columns, columnGap, rowGap, children, ...props }) => {
+  const items = Array.isArray(children) ? children : children === undefined ? [] : [children];
+  const rows: unknown[][] = [];
+  for (let i = 0; i < items.length; i += columns) rows.push(items.slice(i, i + columns));
+
+  return h('box', { direction: 'column', gap: rowGap ?? props.gap ?? 0, ...props },
+    ...rows.map((row, i) =>
+      h('box', { key: i, direction: 'row', gap: columnGap ?? props.gap ?? 1 },
+        // `basis: 0` is what makes the columns *equal* rather than merely
+        // flexible. Without it a cell starts at the width its content asked
+        // for and only the space left over is shared - so a pane holding one
+        // long unwrapped line takes two thirds of the row and the one beside
+        // it is squeezed to a column of single words. Equal columns is what
+        // this component says it is for; anything that wants to be sized by
+        // its content wants a `Row`.
+        ...row.map((cell, j) => h('box', { key: j, flex: 1, basis: 0, minWidth: 0 }, cell)),
+        // Pad the last row so its cells keep the same width as the others.
+        ...Array.from({ length: columns - row.length }, (_, k) =>
+          h('box', { key: `pad${k}`, flex: 1, basis: 0 })),
+      ),
+    ),
+  );
+});

package/src/layout/index.ts

@@ -0,0 +1,39 @@
+import type { ComponentDefinition } from '@textui/core';
+import { Center } from './center.js';
+import { Column } from './column.js';
+import { Divider } from './divider.js';
+import { Grid } from './grid.js';
+import { Panel } from './panel.js';
+import { Row } from './row.js';
+import { ScrollView } from './scroll-view.js';
+import { Splitter } from './splitter.js';
+import { Stack } from './stack.js';
+
+/**
+ * Layout and containers.
+ *
+ * Every one of these is `box` with an opinion. That is the point: the layout
+ * engine only ever sees the primitive, so a new container costs a function
+ * rather than a new case in the engine.
+ */
+export * from './center.js';
+export * from './column.js';
+export * from './divider.js';
+export * from './grid.js';
+export * from './panel.js';
+export * from './row.js';
+export * from './scroll-view.js';
+export * from './splitter.js';
+export * from './stack.js';
+
+export const LAYOUT_COMPONENTS: ComponentDefinition[] = [
+  { component: 'Row', category: 'layout', renderer: { kind: 'function', render: Row }, description: 'Horizontal flex container.' },
+  { component: 'Column', category: 'layout', renderer: { kind: 'function', render: Column }, description: 'Vertical flex container.' },
+  { component: 'Center', category: 'layout', renderer: { kind: 'function', render: Center }, description: 'Centres its children.' },
+  { component: 'Grid', category: 'layout', renderer: { kind: 'function', render: Grid }, description: 'Equal-width columns, wrapping into rows.' },
+  { component: 'Panel', category: 'layout', renderer: { kind: 'function', render: Panel }, description: 'Titled region. Bordered or airy, following the theme.', variants: ['bordered', 'plain'], role: 'region' },
+  { component: 'Divider', category: 'layout', renderer: { kind: 'function', render: Divider }, description: 'A rule, optionally labelled.', role: 'separator' },
+  { component: 'Stack', category: 'layout', renderer: { kind: 'function', render: Stack }, description: 'Column with themed spacing.' },
+  { component: 'ScrollView', category: 'layout', renderer: { kind: 'function', render: ScrollView }, description: 'Scrolling viewport with keyboard and wheel support.' },
+  { component: 'Splitter', category: 'layout', renderer: { kind: 'function', render: Splitter }, description: 'Two panes with a divider.' },
+];

package/src/layout/panel.ts

@@ -0,0 +1,114 @@
+import type { BorderSpec, BoxProps, StyleColor } from '@textui/core';
+import { defineComponent, h, resolveEdges, useTheme } from '@textui/core';
+
+export interface PanelProps extends BoxProps {
+  /** Section heading drawn into the border, or above a borderless panel. */
+  title?: string;
+  subtitle?: string;
+  /** Accent colour for the title. */
+  tone?: StyleColor;
+  /** Overrides the theme's default border. `'none'` gives an airy panel. */
+  border?: BorderSpec;
+  /**
+   * Right-aligned text beside the title, on the same row.
+   *
+   * The short thing that belongs next to a heading rather than under it: a
+   * count, a state, the shortcut that opens it. Optional, and most panels do
+   * not have one.
+   */
+  rightTitle?: string;
+  /**
+   * Right-aligned text on the *bottom* rule, where there is one.
+   *
+   * Not the title row - which is what this said for a long time while doing
+   * something else. A bordered panel put it in the footer and a borderless one
+   * put it beside the title, so the same prop meant two places depending on a
+   * different prop. `rightTitle` is the title row, in both; this is the
+   * bottom, and on a borderless panel there is no bottom to put it on.
+   */
+  meta?: string;
+}
+
+/**
+ * The workhorse container.
+ *
+ * A panel is the one component that has to look right in all three house
+ * styles, so it renders its title into the border when it has one and as a
+ * heading row when it does not - rather than forcing a border to have a title.
+ */
+export const Panel = defineComponent<PanelProps>('Panel', (props) => {
+  const theme = useTheme();
+  const { title, subtitle, tone, meta, rightTitle, children, padding, ...rest } = props;
+
+  /*
+   * Padding is about the *body*, and a subtitle is not the body.
+   *
+   * It used to be one box: the border or the heading row, then the subtitle
+   * and the children together inside whatever padding the caller asked for. So
+   * `padding={1}` put a blank row between the title and its own caption and
+   * left the caption sitting directly on top of the content it was not part
+   * of - the subtitle read as the first line of the body. On a borderless
+   * panel it pushed the title down as well.
+   *
+   * Split, then: the horizontal padding stays outside and applies to
+   * everything, because a subtitle indented differently from the body under it
+   * is worse than either; the vertical padding wraps the children alone.
+   *
+   * Only when there is a subtitle to protect. Without one there is nothing to
+   * separate the padding from, and a panel that gained a box would be a panel
+   * whose layout changed for no reason.
+   */
+  const pad = resolveEdges(padding);
+  const split = subtitle !== undefined && (pad.top > 0 || pad.bottom > 0);
+  const outerPad = split ? { left: pad.left, right: pad.right } : padding;
+  const body = split
+    ? h('box', { direction: 'column', padding: { top: pad.top, bottom: pad.bottom } }, children)
+    : children;
+  const border = props.border ?? theme.border;
+  const borderless = border === 'none' || (typeof border === 'object' && border.style === 'none');
+
+  // A panel is a pane, so it fills its row rather than floating in the middle
+  // of it. `Row` centres its children by default, which is right for a row of
+  // labels and wrong for a row of panels sitting next to a taller one.
+  const fill = { alignSelf: 'stretch' as const };
+
+  if (!borderless) {
+    // Two rules, two labels: `rightTitle` on the top one beside the title, and
+    // `meta` on the bottom one. The border painter gives the right label its
+    // width first, so a long title truncates rather than running into it.
+    return h('box', {
+      role: 'region',
+      border,
+      title,
+      ...(rightTitle !== undefined ? { rightTitle } : {}),
+      footer: meta,
+      footerAlign: 'right',
+      ...fill,
+      ...(outerPad === undefined ? {} : { padding: outerPad }),
+      ...rest,
+    },
+      subtitle !== undefined ? h('text', { content: subtitle, fg: 'muted' }) : null,
+      body,
+    );
+  }
+
+  return h('box', {
+    role: 'region',
+    direction: 'column',
+    ...fill,
+    ...(outerPad === undefined ? {} : { padding: outerPad }),
+    ...rest,
+    border: 'none',
+  },
+    title
+      ? h('box', { direction: 'row', gap: 1 },
+          h('text', { content: title, bold: true, fg: tone ?? 'text', flex: 1, truncate: 'end' }),
+          // No border to write on, so the same two labels share the heading
+          // row - `rightTitle` first, because it is the one that must survive.
+          rightTitle ? h('text', { content: rightTitle, fg: 'muted' }) : null,
+          meta ? h('text', { content: meta, fg: 'muted' }) : null)
+      : null,
+    subtitle !== undefined ? h('text', { content: subtitle, fg: 'muted' }) : null,
+    body,
+  );
+});

package/src/layout/row.ts

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+
+export interface RowProps extends BoxProps {
+  /** Shorthand for `align`, which reads better on a row. */
+  vAlign?: BoxProps['align'];
+}
+
+export const Row = defineComponent<RowProps>('Row', ({ vAlign, ...props }) =>
+  h('box', { direction: 'row', align: vAlign ?? props.align ?? 'center', ...props }),
+);