@tale-ui/react 0.0.3

package/esm/floating-ui-react/utils/markOthers.js

@@ -0,0 +1,121 @@
+// Modified to add conditional `aria-hidden` support:
+// https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
+import { getNodeName } from '@floating-ui/utils/dom';
+import { ownerDocument } from '@tale-ui/utils/owner';
+const counters = {
+  inert: new WeakMap(),
+  'aria-hidden': new WeakMap(),
+  none: new WeakMap()
+};
+function getCounterMap(control) {
+  if (control === 'inert') {
+    return counters.inert;
+  }
+  if (control === 'aria-hidden') {
+    return counters['aria-hidden'];
+  }
+  return counters.none;
+}
+let uncontrolledElementsSet = new WeakSet();
+let markerMap = {};
+let lockCount = 0;
+export const supportsInert = () => typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
+const unwrapHost = node => node && (node.host || unwrapHost(node.parentNode));
+const correctElements = (parent, targets) => targets.map(target => {
+  if (parent.contains(target)) {
+    return target;
+  }
+  const correctedTarget = unwrapHost(target);
+  if (parent.contains(correctedTarget)) {
+    return correctedTarget;
+  }
+  return null;
+}).filter(x => x != null);
+function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
+  const markerName = 'data-tale-ui-inert';
+  // eslint-disable-next-line no-nested-ternary
+  const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
+  const avoidElements = correctElements(body, uncorrectedAvoidElements);
+  const elementsToKeep = new Set();
+  const elementsToStop = new Set(avoidElements);
+  const hiddenElements = [];
+  if (!markerMap[markerName]) {
+    markerMap[markerName] = new WeakMap();
+  }
+  const markerCounter = markerMap[markerName];
+  avoidElements.forEach(keep);
+  deep(body);
+  elementsToKeep.clear();
+  function keep(el) {
+    if (!el || elementsToKeep.has(el)) {
+      return;
+    }
+    elementsToKeep.add(el);
+    if (el.parentNode) {
+      keep(el.parentNode);
+    }
+  }
+  function deep(parent) {
+    if (!parent || elementsToStop.has(parent)) {
+      return;
+    }
+    [].forEach.call(parent.children, node => {
+      if (getNodeName(node) === 'script') {
+        return;
+      }
+      if (elementsToKeep.has(node)) {
+        deep(node);
+      } else {
+        const attr = controlAttribute ? node.getAttribute(controlAttribute) : null;
+        const alreadyHidden = attr !== null && attr !== 'false';
+        const counterMap = getCounterMap(controlAttribute);
+        const counterValue = (counterMap.get(node) || 0) + 1;
+        const markerValue = (markerCounter.get(node) || 0) + 1;
+        counterMap.set(node, counterValue);
+        markerCounter.set(node, markerValue);
+        hiddenElements.push(node);
+        if (counterValue === 1 && alreadyHidden) {
+          uncontrolledElementsSet.add(node);
+        }
+        if (markerValue === 1) {
+          node.setAttribute(markerName, '');
+        }
+        if (!alreadyHidden && controlAttribute) {
+          node.setAttribute(controlAttribute, controlAttribute === 'inert' ? '' : 'true');
+        }
+      }
+    });
+  }
+  lockCount += 1;
+  return () => {
+    hiddenElements.forEach(element => {
+      const counterMap = getCounterMap(controlAttribute);
+      const currentCounterValue = counterMap.get(element) || 0;
+      const counterValue = currentCounterValue - 1;
+      const markerValue = (markerCounter.get(element) || 0) - 1;
+      counterMap.set(element, counterValue);
+      markerCounter.set(element, markerValue);
+      if (!counterValue) {
+        if (!uncontrolledElementsSet.has(element) && controlAttribute) {
+          element.removeAttribute(controlAttribute);
+        }
+        uncontrolledElementsSet.delete(element);
+      }
+      if (!markerValue) {
+        element.removeAttribute(markerName);
+      }
+    });
+    lockCount -= 1;
+    if (!lockCount) {
+      counters.inert = new WeakMap();
+      counters['aria-hidden'] = new WeakMap();
+      counters.none = new WeakMap();
+      uncontrolledElementsSet = new WeakSet();
+      markerMap = {};
+    }
+  };
+}
+export function markOthers(avoidElements, ariaHidden = false, inert = false) {
+  const body = ownerDocument(avoidElements[0]).body;
+  return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
+}

package/esm/floating-ui-react/utils/nodes.d.ts

@@ -0,0 +1,4 @@
+import type { FloatingNodeType } from "../types.js";
+export declare function getNodeChildren(nodes: Array<FloatingNodeType>, id: string | undefined, onlyOpenChildren?: boolean): Array<FloatingNodeType>;
+export declare function getDeepestNode(nodes: Array<FloatingNodeType>, id: string | undefined): FloatingNodeType | undefined;
+export declare function getNodeAncestors(nodes: Array<FloatingNodeType>, id: string | undefined): FloatingNodeType[];

package/esm/floating-ui-react/utils/nodes.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-loop-func */
+
+export function getNodeChildren(nodes, id, onlyOpenChildren = true) {
+  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
+  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
+}
+export function getDeepestNode(nodes, id) {
+  let deepestNodeId;
+  let maxDepth = -1;
+  function findDeepest(nodeId, depth) {
+    if (depth > maxDepth) {
+      deepestNodeId = nodeId;
+      maxDepth = depth;
+    }
+    const children = getNodeChildren(nodes, nodeId);
+    children.forEach(child => {
+      findDeepest(child.id, depth + 1);
+    });
+  }
+  findDeepest(id, 0);
+  return nodes.find(node => node.id === deepestNodeId);
+}
+export function getNodeAncestors(nodes, id) {
+  let allAncestors = [];
+  let currentParentId = nodes.find(node => node.id === id)?.parentId;
+  while (currentParentId) {
+    const currentNode = nodes.find(node => node.id === currentParentId);
+    currentParentId = currentNode?.parentId;
+    if (currentNode) {
+      allAncestors = allAncestors.concat(currentNode);
+    }
+  }
+  return allAncestors;
+}

package/esm/floating-ui-react/utils/tabbable.d.ts

@@ -0,0 +1,12 @@
+import { type FocusableElement } from 'tabbable';
+export declare const getTabbableOptions: () => {
+  readonly getShadowRoot: true;
+  readonly displayCheck: "none" | "full";
+};
+export declare function getNextTabbable(referenceElement: Element | null): FocusableElement | null;
+export declare function getPreviousTabbable(referenceElement: Element | null): FocusableElement | null;
+export declare function getTabbableAfterElement(referenceElement: Element | null): FocusableElement | null;
+export declare function getTabbableBeforeElement(referenceElement: Element | null): FocusableElement | null;
+export declare function isOutsideEvent(event: FocusEvent | React.FocusEvent, container?: Element): boolean;
+export declare function disableFocusInside(container: HTMLElement): void;
+export declare function enableFocusInside(container: HTMLElement): void;

package/esm/floating-ui-react/utils/tabbable.js

@@ -0,0 +1,75 @@
+import { tabbable } from 'tabbable';
+import { ownerDocument } from '@tale-ui/utils/owner';
+import { activeElement, contains } from "./element.js";
+export const getTabbableOptions = () => ({
+  getShadowRoot: true,
+  displayCheck:
+  // JSDOM does not support the `tabbable` library. To solve this we can
+  // check if `ResizeObserver` is a real function (not polyfilled), which
+  // determines if the current environment is JSDOM-like.
+  typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
+});
+function getTabbableIn(container, dir) {
+  const list = tabbable(container, getTabbableOptions());
+  const len = list.length;
+  if (len === 0) {
+    return undefined;
+  }
+  const active = activeElement(ownerDocument(container));
+  const index = list.indexOf(active);
+  // eslint-disable-next-line no-nested-ternary
+  const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
+  return list[nextIndex];
+}
+export function getNextTabbable(referenceElement) {
+  return getTabbableIn(ownerDocument(referenceElement).body, 1) || referenceElement;
+}
+export function getPreviousTabbable(referenceElement) {
+  return getTabbableIn(ownerDocument(referenceElement).body, -1) || referenceElement;
+}
+function getTabbableNearElement(referenceElement, dir) {
+  if (!referenceElement) {
+    return null;
+  }
+  const list = tabbable(ownerDocument(referenceElement).body, getTabbableOptions());
+  const elementCount = list.length;
+  if (elementCount === 0) {
+    return null;
+  }
+  const index = list.indexOf(referenceElement);
+  if (index === -1) {
+    return null;
+  }
+  const nextIndex = (index + dir + elementCount) % elementCount;
+  return list[nextIndex];
+}
+export function getTabbableAfterElement(referenceElement) {
+  return getTabbableNearElement(referenceElement, 1);
+}
+export function getTabbableBeforeElement(referenceElement) {
+  return getTabbableNearElement(referenceElement, -1);
+}
+export function isOutsideEvent(event, container) {
+  const containerElement = container || event.currentTarget;
+  const relatedTarget = event.relatedTarget;
+  return !relatedTarget || !contains(containerElement, relatedTarget);
+}
+export function disableFocusInside(container) {
+  const tabbableElements = tabbable(container, getTabbableOptions());
+  tabbableElements.forEach(element => {
+    element.dataset.tabindex = element.getAttribute('tabindex') || '';
+    element.setAttribute('tabindex', '-1');
+  });
+}
+export function enableFocusInside(container) {
+  const elements = container.querySelectorAll('[data-tabindex]');
+  elements.forEach(element => {
+    const tabindex = element.dataset.tabindex;
+    delete element.dataset.tabindex;
+    if (tabindex) {
+      element.setAttribute('tabindex', tabindex);
+    } else {
+      element.removeAttribute('tabindex');
+    }
+  });
+}

package/esm/floating-ui-react/utils.d.ts

@@ -0,0 +1,5 @@
+export * from "./utils/element.js";
+export * from "./utils/nodes.js";
+export * from "./utils/event.js";
+export * from "./utils/composite.js";
+export * from "./utils/tabbable.js";

package/esm/floating-ui-react/utils.js

@@ -0,0 +1,5 @@
+export * from "./utils/element.js";
+export * from "./utils/nodes.js";
+export * from "./utils/event.js";
+export * from "./utils/composite.js";
+export * from "./utils/tabbable.js";

package/esm/form/Form.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { type TaleUIGenericEventDetails } from "../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../utils/reasons.js";
+import type { TaleUIComponentProps } from "../utils/types.js";
+import { FormContext } from "./FormContext.js";
+/**
+ * A native form element with consolidated error handling.
+ * Renders a `<form>` element.
+ *
+ * Documentation: [Tale UI Form](https://base-ui.com/react/components/form)
+ */
+export declare const Form: {
+  <FormValues extends Record<string, any> = Record<string, any>>(props: Form.Props<FormValues> & {
+    ref?: React.Ref<HTMLFormElement> | undefined;
+  }): React.JSX.Element;
+};
+export type FormSubmitEventReason = typeof REASONS.none;
+export type FormSubmitEventDetails = TaleUIGenericEventDetails<Form.SubmitEventReason>;
+export type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+export interface FormActions {
+  validate: (fieldName?: string | undefined) => void;
+}
+export interface FormState {}
+export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends TaleUIComponentProps<'form', Form.State> {
+  /**
+   * Determines when the form should be validated.
+   * The `validationMode` prop on `<Field.Root>` takes precedence over this.
+   *
+   * - `onSubmit` (default): validates the field when the form is submitted, afterwards fields will re-validate on change.
+   * - `onBlur`: validates a field when it loses focus.
+   * - `onChange`: validates the field on every change to its value.
+   *
+   * @default 'onSubmit'
+   */
+  validationMode?: FormValidationMode | undefined;
+  /**
+   * Validation errors returned externally, typically after submission by a server or a form action.
+   * This should be an object where keys correspond to the `name` attribute on `<Field.Root>`,
+   * and values correspond to error(s) related to that field.
+   */
+  errors?: FormContext['errors'] | undefined;
+  /**
+   * Event handler called when the form is submitted.
+   * `preventDefault()` is called on the native submit event when used.
+   */
+  onFormSubmit?: ((formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void) | undefined;
+  /**
+   * A ref to imperative actions.
+   * - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
+   * @example
+   * ```tsx
+   * // validate all fields
+   * actionsRef.current.validate();
+   *
+   * // validate one field
+   * actionsRef.current.validate('email');
+   * ```
+   */
+  actionsRef?: React.RefObject<Form.Actions | null> | undefined;
+}
+export declare namespace Form {
+  type Props<FormValues extends Record<string, any> = Record<string, any>> = FormProps<FormValues>;
+  type State = FormState;
+  type Actions = FormActions;
+  type ValidationMode = FormValidationMode;
+  type SubmitEventReason = FormSubmitEventReason;
+  type SubmitEventDetails = FormSubmitEventDetails;
+  type Values<FormValues extends Record<string, any> = Record<string, any>> = FormValues;
+}

package/esm/form/Form.js

@@ -0,0 +1,129 @@
+'use client';
+
+import * as React from 'react';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { createGenericEventDetails } from "../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../utils/reasons.js";
+import { FormContext } from "./FormContext.js";
+import { useRenderElement } from "../utils/useRenderElement.js";
+import { EMPTY_OBJECT } from "../utils/constants.js";
+import { useValueChanged } from "../utils/useValueChanged.js";
+
+/**
+ * A native form element with consolidated error handling.
+ * Renders a `<form>` element.
+ *
+ * Documentation: [Tale UI Form](https://base-ui.com/react/components/form)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    validationMode = 'onSubmit',
+    errors: externalErrors,
+    onSubmit,
+    onFormSubmit,
+    actionsRef,
+    ...elementProps
+  } = componentProps;
+  const formRef = React.useRef({
+    fields: new Map()
+  });
+  const submittedRef = React.useRef(false);
+  const submitAttemptedRef = React.useRef(false);
+  const focusControl = useStableCallback(control => {
+    if (!control) {
+      return;
+    }
+    control.focus();
+    if (control.tagName === 'INPUT') {
+      control.select();
+    }
+  });
+  const [errors, setErrors] = React.useState(externalErrors);
+  useValueChanged(externalErrors, () => {
+    setErrors(externalErrors);
+  });
+  React.useEffect(() => {
+    if (!submittedRef.current) {
+      return;
+    }
+    submittedRef.current = false;
+    const invalidFields = Array.from(formRef.current.fields.values()).filter(field => field.validityData.state.valid === false);
+    if (invalidFields.length) {
+      focusControl(invalidFields[0].controlRef.current);
+    }
+  }, [errors, focusControl]);
+  const handleImperativeValidate = React.useCallback(fieldName => {
+    const values = Array.from(formRef.current.fields.values());
+    if (fieldName) {
+      const namedField = values.find(field => field.name === fieldName);
+      if (namedField) {
+        namedField.validate(false);
+      }
+    } else {
+      values.forEach(field => {
+        field.validate(false);
+      });
+    }
+  }, []);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate: handleImperativeValidate
+  }), [handleImperativeValidate]);
+  const element = useRenderElement('form', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      noValidate: true,
+      onSubmit(event) {
+        submitAttemptedRef.current = true;
+        let values = Array.from(formRef.current.fields.values());
+
+        // Async validation isn't supported to stop the submit event.
+        values.forEach(field => {
+          field.validate();
+        });
+        values = Array.from(formRef.current.fields.values());
+        const invalidFields = values.filter(field => !field.validityData.state.valid);
+        if (invalidFields.length) {
+          event.preventDefault();
+          focusControl(invalidFields[0].controlRef.current);
+        } else {
+          submittedRef.current = true;
+          onSubmit?.(event);
+          if (onFormSubmit) {
+            event.preventDefault();
+            const formValues = values.reduce((acc, field) => {
+              if (field.name) {
+                acc[field.name] = field.getValue();
+              }
+              return acc;
+            }, {});
+            onFormSubmit(formValues, createGenericEventDetails(REASONS.none, event.nativeEvent));
+          }
+        }
+      }
+    }, elementProps]
+  });
+  const clearErrors = useStableCallback(name => {
+    if (name && errors && EMPTY_OBJECT.hasOwnProperty.call(errors, name)) {
+      const nextErrors = {
+        ...errors
+      };
+      delete nextErrors[name];
+      setErrors(nextErrors);
+    }
+  });
+  const contextValue = React.useMemo(() => ({
+    formRef,
+    validationMode,
+    errors: errors ?? EMPTY_OBJECT,
+    clearErrors,
+    submitAttemptedRef
+  }), [formRef, validationMode, errors, clearErrors]);
+  return /*#__PURE__*/_jsx(FormContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") Form.displayName = "Form";

package/esm/form/FormContext.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { FieldValidityData } from "../field/root/FieldRoot.js";
+import type { Form } from "./Form.js";
+export type Errors = Record<string, string | string[]>;
+export interface FormContext {
+  errors: Errors;
+  clearErrors: (name: string | undefined) => void;
+  formRef: React.RefObject<{
+    fields: Map<string, {
+      name: string | undefined;
+      validate: (flushSync?: boolean | undefined) => void;
+      validityData: FieldValidityData;
+      controlRef: React.RefObject<HTMLElement | null>;
+      getValue: () => unknown;
+    }>;
+  }>;
+  validationMode: Form.ValidationMode;
+  submitAttemptedRef: React.RefObject<boolean>;
+}
+export declare const FormContext: React.Context<FormContext>;
+export declare function useFormContext(): FormContext;

package/esm/form/FormContext.js

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+import { NOOP } from "../utils/noop.js";
+export const FormContext = /*#__PURE__*/React.createContext({
+  formRef: {
+    current: {
+      fields: new Map()
+    }
+  },
+  errors: {},
+  clearErrors: NOOP,
+  validationMode: 'onSubmit',
+  submitAttemptedRef: {
+    current: false
+  }
+});
+if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
+export function useFormContext() {
+  return React.useContext(FormContext);
+}

package/esm/form/index.d.ts

@@ -0,0 +1,2 @@
+export { Form } from "./Form.js";
+export type * from "./Form.js";

package/esm/form/index.js

@@ -0,0 +1 @@
+export { Form } from "./Form.js";

package/esm/global.d.ts

@@ -0,0 +1,8 @@
+declare global {
+  /**
+   * When `true`, disables animation-related code, even if supported by the runtime enviroment.
+   */
+  // eslint-disable-next-line vars-on-top
+  var TALE_UI_ANIMATIONS_DISABLED: boolean;
+}
+export type {};

package/esm/index.d.ts

@@ -0,0 +1,42 @@
+export * from "./accordion/index.js";
+export * from "./alert-dialog/index.js";
+export * from "./autocomplete/index.js";
+export * from "./avatar/index.js";
+export * from "./button/index.js";
+export * from "./checkbox/index.js";
+export * from "./checkbox-group/index.js";
+export * from "./collapsible/index.js";
+export * from "./combobox/index.js";
+export * from "./context-menu/index.js";
+export * from "./csp-provider/index.js";
+export * from "./dialog/index.js";
+export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
+export * from "./field/index.js";
+export * from "./fieldset/index.js";
+export * from "./form/index.js";
+export * from "./input/index.js";
+export * from "./menu/index.js";
+export * from "./menubar/index.js";
+export * from "./merge-props/index.js";
+export * from "./meter/index.js";
+export * from "./navigation-menu/index.js";
+export * from "./number-field/index.js";
+export * from "./popover/index.js";
+export * from "./preview-card/index.js";
+export * from "./progress/index.js";
+export * from "./radio/index.js";
+export * from "./radio-group/index.js";
+export * from "./scroll-area/index.js";
+export * from "./select/index.js";
+export * from "./separator/index.js";
+export * from "./slider/index.js";
+export * from "./switch/index.js";
+export * from "./tabs/index.js";
+export * from "./toast/index.js";
+export * from "./toggle/index.js";
+export * from "./toggle-group/index.js";
+export * from "./toolbar/index.js";
+export * from "./tooltip/index.js";
+export * from "./use-render/index.js";
+export type * from "./types/index.js";

package/esm/index.js

@@ -0,0 +1,48 @@
+/**
+ * @tale-ui/react v0.0.3
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from "./accordion/index.js";
+export * from "./alert-dialog/index.js";
+export * from "./autocomplete/index.js";
+export * from "./avatar/index.js";
+export * from "./button/index.js";
+export * from "./checkbox/index.js";
+export * from "./checkbox-group/index.js";
+export * from "./collapsible/index.js";
+export * from "./combobox/index.js";
+export * from "./context-menu/index.js";
+export * from "./csp-provider/index.js";
+export * from "./dialog/index.js";
+export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
+export * from "./field/index.js";
+export * from "./fieldset/index.js";
+export * from "./form/index.js";
+export * from "./input/index.js";
+export * from "./menu/index.js";
+export * from "./menubar/index.js";
+export * from "./merge-props/index.js";
+export * from "./meter/index.js";
+export * from "./navigation-menu/index.js";
+export * from "./number-field/index.js";
+export * from "./popover/index.js";
+export * from "./preview-card/index.js";
+export * from "./progress/index.js";
+export * from "./radio/index.js";
+export * from "./radio-group/index.js";
+export * from "./scroll-area/index.js";
+export * from "./select/index.js";
+export * from "./separator/index.js";
+export * from "./slider/index.js";
+export * from "./switch/index.js";
+export * from "./tabs/index.js";
+export * from "./toast/index.js";
+export * from "./toggle/index.js";
+export * from "./toggle-group/index.js";
+export * from "./toolbar/index.js";
+export * from "./tooltip/index.js";
+export * from "./use-render/index.js";

package/esm/input/Input.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { TaleUIComponentProps } from "../utils/types.js";
+import { Field } from "../field/index.js";
+/**
+ * A native input element that automatically works with [Field](https://base-ui.com/react/components/field).
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Tale UI Input](https://base-ui.com/react/components/input)
+ */
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface InputProps extends TaleUIComponentProps<'input', Input.State> {
+  /**
+   * Callback fired when the `value` changes. Use when controlled.
+   */
+  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  /**
+   * The default value of the input. Use when uncontrolled.
+   */
+  defaultValue?: Field.Control.Props['defaultValue'] | undefined;
+  /**
+   * The value of the input. Use when controlled.
+   */
+  value?: React.ComponentProps<'input'>['value'] | undefined;
+}
+export interface InputState extends Field.Control.State {}
+export type InputChangeEventReason = Field.Control.ChangeEventReason;
+export type InputChangeEventDetails = Field.Control.ChangeEventDetails;
+export declare namespace Input {
+  type Props = InputProps;
+  type State = InputState;
+  type ChangeEventReason = InputChangeEventReason;
+  type ChangeEventDetails = InputChangeEventDetails;
+}

package/esm/input/Input.js

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+import { Field } from "../field/index.js";
+
+/**
+ * A native input element that automatically works with [Field](https://base-ui.com/react/components/field).
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Tale UI Input](https://base-ui.com/react/components/input)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Input = /*#__PURE__*/React.forwardRef(function Input(props, forwardedRef) {
+  return /*#__PURE__*/_jsx(Field.Control, {
+    ref: forwardedRef,
+    ...props
+  });
+});
+if (process.env.NODE_ENV !== "production") Input.displayName = "Input";