@spark-web/text-input 4.0.0-rc.0 → 4.0.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @spark-web/text-input
 
+## 4.0.0-rc.2
+
+### Major Changes
+
+- add parser
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.2
+  - @spark-web/theme@4.0.0-rc.2
+  - @spark-web/utils@2.0.0-rc.2
+  - @spark-web/a11y@2.0.0-rc.2
+  - @spark-web/text@2.0.0-rc.2
+  - @spark-web/box@2.0.0-rc.2
+
+## 4.0.0-rc.1
+
+### Major Changes
+
+- rc
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@4.0.0-rc.1
+  - @spark-web/theme@4.0.0-rc.1
+  - @spark-web/utils@2.0.0-rc.1
+  - @spark-web/a11y@2.0.0-rc.1
+  - @spark-web/text@2.0.0-rc.1
+  - @spark-web/box@2.0.0-rc.1
+
 ## 4.0.0-rc.0
 
 ### Major Changes

package/dist/declarations/src/children-to-adornments.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import type { InputAdornmentProps } from "./input-adornment.js";
+export declare type AdornmentChild = ReactElement<InputAdornmentProps> | null | undefined;
+export declare type AdornmentsAsChildren = AdornmentChild | [AdornmentChild, AdornmentChild];
+/**
+ * Map children for placement within the `TextInput` flex container. Ensures that
+ * placeholders are provided for unused placements.
+ */
+export declare const childrenToAdornments: (children?: AdornmentsAsChildren) => {
+    startAdornment: ReactElement<InputAdornmentProps> | null;
+    endAdornment: ReactElement<InputAdornmentProps> | null;
+};

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,6 @@
+export { InputAdornment } from "./input-adornment.js";
+export { InputContainer } from "./input-container.js";
+export { TextInput, useInputStyles } from "./text-input.js";
+export type { AdornmentChild } from "./children-to-adornments.js";
+export type { InputContainerProps } from "./input-container.js";
+export type { TextInputProps, UseInputStylesProps } from "./text-input.js";

package/dist/declarations/src/input-adornment.d.ts

@@ -0,0 +1,46 @@
+import type { ReactElement } from 'react';
+declare type InputAdornmentContextType = {
+    placement: PlacementType;
+};
+export declare const useInputAdornmentContext: () => InputAdornmentContextType | null;
+declare const placementToPadding: {
+    readonly start: {
+        readonly paddingLeft: "medium";
+        readonly paddingRight: "xsmall";
+    };
+    readonly end: {
+        readonly paddingLeft: "xsmall";
+        readonly paddingRight: "medium";
+    };
+};
+declare type PlacementType = keyof typeof placementToPadding;
+export declare type InputAdornmentProps = {
+    children: ReactElement;
+    /**
+     * When using another input component as an adornment, you may optionally
+     * override the parent field label.
+     */
+    fieldLabel?: string;
+    /** Where to place the adornment. */
+    placement: PlacementType;
+    /**
+     * By default, the adornment element will be wrapped to provide alignment and
+     * spacing, use the "raw" property to opt-out of this behaviour.
+     */
+    raw?: boolean;
+};
+/**
+ * Places an element at the "start" or "end" of the input, only one adornment
+ * may be provided for each placement. By default, the adornment element will be
+ * wrapped to provide alignment and spacing, use the "raw" property to opt-out
+ * of this behaviour.
+ *
+ * @example
+ * <TextInput>
+ *   <InputAdornment placement="start">
+ *     <Text tone="placeholder">$</Text>
+ *   </InputAdornment>
+ * </TextInput>
+ */
+export declare const InputAdornment: ({ children, fieldLabel, placement, raw, }: InputAdornmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/declarations/src/input-container.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps } from '@spark-web/box';
+import type { ReactElement } from 'react';
+import type { InputAdornmentProps } from "./input-adornment.js";
+export declare type InputContainerProps = {
+    /** Slot to start render adornment. */
+    startAdornment?: ReactElement<InputAdornmentProps> | null;
+    /** Slot to end render adornment. */
+    endAdornment?: ReactElement<InputAdornmentProps> | null;
+} & Omit<BoxProps, 'background' | 'position'>;
+export declare const InputContainer: ({ children, startAdornment, endAdornment, ...boxProps }: InputContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/declarations/src/text-input.d.ts

@@ -0,0 +1,62 @@
+import type { FieldState } from '@spark-web/field';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { InputHTMLAttributes } from 'react';
+import type { AdornmentsAsChildren } from "./children-to-adornments.js";
+declare type ValidTypes = 'text' | 'password' | 'email' | 'search' | 'number' | 'tel' | 'url';
+declare type ValidModes = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'value' | 'required'>;
+export declare type TextInputProps = {
+    /** Sets data attributes for the element. */
+    data?: DataAttributeMap;
+    /**
+     * How an input behaves varies considerably depending on the value of its type
+     * attribute. If this attribute is not specified, the default type "text".
+     */
+    type?: ValidTypes;
+    /** Sets the input mode attribute for the component. */
+    inputMode?: ValidModes;
+    /**
+     * Adorn the input with ornamental element(s) to aid user input, or
+     * interactive element(s) to augment user input. Each child **must** be
+     * wrapped with the `InputAdornment` component to ensure proper layout,
+     * otherwise it will not be rendered.
+     */
+    children?: AdornmentsAsChildren;
+} & NativeInputProps;
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+export declare const TextInput: import("react").ForwardRefExoticComponent<{
+    /** Sets data attributes for the element. */
+    data?: DataAttributeMap | undefined;
+    /**
+     * How an input behaves varies considerably depending on the value of its type
+     * attribute. If this attribute is not specified, the default type "text".
+     */
+    type?: ValidTypes | undefined;
+    /** Sets the input mode attribute for the component. */
+    inputMode?: ValidModes | undefined;
+    /**
+     * Adorn the input with ornamental element(s) to aid user input, or
+     * interactive element(s) to augment user input. Each child **must** be
+     * wrapped with the `InputAdornment` component to ensure proper layout,
+     * otherwise it will not be rendered.
+     */
+    children?: AdornmentsAsChildren;
+} & NativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare type UseInputStylesProps = FieldState & {
+    startAdornment?: boolean;
+    endAdornment?: boolean;
+};
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+export declare const useInputStyles: ({ disabled, startAdornment, endAdornment, }: UseInputStylesProps) => readonly [{
+    readonly flex: 1;
+    readonly position: "relative";
+    readonly height: "medium";
+    readonly paddingLeft: "medium" | "none";
+    readonly paddingRight: "medium" | "none";
+    readonly width: "full";
+}, any];
+export {};

package/dist/spark-web-text-input.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQtaW5wdXQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
+export * from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQtaW5wdXQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/spark-web-text-input.cjs.dev.js

@@ -0,0 +1,270 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var box = require('@spark-web/box');
+var field = require('@spark-web/field');
+var theme = require('@spark-web/theme');
+var react = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@emotion/react');
+var a11y = require('@spark-web/a11y');
+var text = require('@spark-web/text');
+
+/**
+ * Components like the `SelectInput` may subscribe to the adornment context and
+ * change their appearance or behaviour.
+ */
+var InputAdornmentContext = /*#__PURE__*/react.createContext(null);
+var placementToPadding = {
+  start: {
+    paddingLeft: 'medium',
+    paddingRight: 'xsmall'
+  },
+  end: {
+    paddingLeft: 'xsmall',
+    paddingRight: 'medium'
+  }
+};
+/**
+ * Places an element at the "start" or "end" of the input, only one adornment
+ * may be provided for each placement. By default, the adornment element will be
+ * wrapped to provide alignment and spacing, use the "raw" property to opt-out
+ * of this behaviour.
+ *
+ * @example
+ * <TextInput>
+ *   <InputAdornment placement="start">
+ *     <Text tone="placeholder">$</Text>
+ *   </InputAdornment>
+ * </TextInput>
+ */
+var InputAdornment = function InputAdornment(_ref) {
+  var children = _ref.children,
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
+  var theme$1 = theme.useTheme();
+  var adornmentContext = react.useMemo(function () {
+    return {
+      placement: placement
+    };
+  }, [placement]);
+  var _placementToPadding$p = placementToPadding[placement],
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
+  var content = children;
+  if (!raw) {
+    content = jsxRuntime.jsx(box.Box, {
+      paddingLeft: paddingLeft,
+      paddingRight: paddingRight,
+      children: jsxRuntime.jsx(box.Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        style: {
+          minWidth: theme$1.sizing.xxsmall
+        },
+        children: children
+      })
+    });
+  }
+  var wrappedContent = jsxRuntime.jsx(InputAdornmentContext.Provider, {
+    value: adornmentContext,
+    children: content
+  });
+  if (fieldLabel) {
+    return jsxRuntime.jsx(FieldAdornment, {
+      fieldLabel: fieldLabel,
+      children: wrappedContent
+    });
+  }
+  return wrappedContent;
+};
+
+/**
+ * Wrap the element with a field provider to override the parent field label.
+ * Only split-out from `InputAdornment` to avoid the conditional hook rule.
+ */
+var FieldAdornment = function FieldAdornment(_ref2) {
+  var children = _ref2.children,
+    fieldLabel = _ref2.fieldLabel;
+  var parentFieldContext = field.useFieldContext();
+  var fieldContext = react.useMemo(function () {
+    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
+      accessibilityLabel: fieldLabel
+    });
+  }, [fieldLabel, parentFieldContext]);
+  return jsxRuntime.jsx(field.FieldContextProvider, {
+    value: fieldContext,
+    children: children
+  });
+};
+
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+    startAdornment = _ref.startAdornment,
+    endAdornment = _ref.endAdornment,
+    boxProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _useFieldContext = field.useFieldContext(),
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
+  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
+    borderRadius: "small",
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return jsxRuntime.jsx(box.Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    }
+    // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    shadow: "small",
+    css: react$1.css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
+// NOTE: `null | undefined` allow consumers to conditionally render adornments
+
+/**
+ * Map children for placement within the `TextInput` flex container. Ensures that
+ * placeholders are provided for unused placements.
+ */
+var childrenToAdornments = function childrenToAdornments(children) {
+  var startAdornment = null;
+  var endAdornment = null;
+  if (!children) {
+    return {
+      startAdornment: startAdornment,
+      endAdornment: endAdornment
+    };
+  }
+  react.Children.forEach(children, function (child) {
+    if ( /*#__PURE__*/react.isValidElement(child)) {
+      if (child.props.placement === 'end') {
+        endAdornment = child;
+      }
+      if (child.props.placement === 'start') {
+        startAdornment = child;
+      }
+    }
+  });
+  return {
+    startAdornment: startAdornment,
+    endAdornment: endAdornment
+  };
+};
+
+var _excluded = ["children", "data"];
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFieldContext = field.useFieldContext(),
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid,
+    a11yProps = _useFieldContext2[1];
+  var _childrenToAdornments = childrenToAdornments(children),
+    startAdornment = _childrenToAdornments.startAdornment,
+    endAdornment = _childrenToAdornments.endAdornment;
+  var _useInputStyles = useInputStyles({
+      disabled: disabled,
+      invalid: invalid,
+      startAdornment: Boolean(startAdornment),
+      endAdornment: Boolean(endAdornment)
+    }),
+    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+    boxProps = _useInputStyles2[0],
+    inputStyles = _useInputStyles2[1];
+  return jsxRuntime.jsx(InputContainer, {
+    display: "inline-flex",
+    alignItems: "center",
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
+      as: "input",
+      css: react$1.css(inputStyles),
+      data: data,
+      disabled: disabled,
+      ref: forwardedRef
+    }))
+  });
+});
+TextInput.displayName = 'TextInput';
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
+  var disabled = _ref2.disabled,
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
+  var theme$1 = theme.useTheme();
+  var overflowStyles = text.useOverflowStrategy('truncate');
+  var focusRingStyles = a11y.useFocusRing({
+    always: true
+  });
+  var textStyles = text.useText({
+    baseline: false,
+    tone: disabled ? 'disabled' : 'neutral',
+    size: 'standard',
+    weight: 'regular'
+  });
+  var _textStyles = _slicedToArray(textStyles, 2),
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
+    ':enabled': {
+      ':focus + [data-focus-indicator]': _objectSpread({
+        borderColor: theme$1.border.color.fieldAccent
+      }, focusRingStyles)
+    },
+    ':focus': {
+      outline: 'none'
+    },
+    '&[aria-invalid=true]': {
+      color: theme$1.color.foreground.muted
+    }
+  })];
+};
+
+exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
+exports.TextInput = TextInput;
+exports.useInputStyles = useInputStyles;

package/dist/spark-web-text-input.cjs.js

@@ -1,16 +1,7 @@
-"use strict";
-// this file might look strange and you might be wondering what it's for
-// it's lets you import your source files by importing this entrypoint
-// as you would import it if it was built with preconstruct build
-// this file is slightly different to some others though
-// it has a require hook which compiles your code with Babel
-// this means that you don't have to set up @babel/register or anything like that
-// but you can still require this module and it'll be compiled
+'use strict';
 
-// this bit of code imports the require hook and registers it
-let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
-
-// this re-exports the source file
-module.exports = require("../src/index.ts");
-
-unregister();
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-text-input.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-text-input.cjs.dev.js");
+}

package/dist/spark-web-text-input.cjs.prod.js

@@ -0,0 +1,270 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var box = require('@spark-web/box');
+var field = require('@spark-web/field');
+var theme = require('@spark-web/theme');
+var react = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@emotion/react');
+var a11y = require('@spark-web/a11y');
+var text = require('@spark-web/text');
+
+/**
+ * Components like the `SelectInput` may subscribe to the adornment context and
+ * change their appearance or behaviour.
+ */
+var InputAdornmentContext = /*#__PURE__*/react.createContext(null);
+var placementToPadding = {
+  start: {
+    paddingLeft: 'medium',
+    paddingRight: 'xsmall'
+  },
+  end: {
+    paddingLeft: 'xsmall',
+    paddingRight: 'medium'
+  }
+};
+/**
+ * Places an element at the "start" or "end" of the input, only one adornment
+ * may be provided for each placement. By default, the adornment element will be
+ * wrapped to provide alignment and spacing, use the "raw" property to opt-out
+ * of this behaviour.
+ *
+ * @example
+ * <TextInput>
+ *   <InputAdornment placement="start">
+ *     <Text tone="placeholder">$</Text>
+ *   </InputAdornment>
+ * </TextInput>
+ */
+var InputAdornment = function InputAdornment(_ref) {
+  var children = _ref.children,
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
+  var theme$1 = theme.useTheme();
+  var adornmentContext = react.useMemo(function () {
+    return {
+      placement: placement
+    };
+  }, [placement]);
+  var _placementToPadding$p = placementToPadding[placement],
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
+  var content = children;
+  if (!raw) {
+    content = jsxRuntime.jsx(box.Box, {
+      paddingLeft: paddingLeft,
+      paddingRight: paddingRight,
+      children: jsxRuntime.jsx(box.Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        style: {
+          minWidth: theme$1.sizing.xxsmall
+        },
+        children: children
+      })
+    });
+  }
+  var wrappedContent = jsxRuntime.jsx(InputAdornmentContext.Provider, {
+    value: adornmentContext,
+    children: content
+  });
+  if (fieldLabel) {
+    return jsxRuntime.jsx(FieldAdornment, {
+      fieldLabel: fieldLabel,
+      children: wrappedContent
+    });
+  }
+  return wrappedContent;
+};
+
+/**
+ * Wrap the element with a field provider to override the parent field label.
+ * Only split-out from `InputAdornment` to avoid the conditional hook rule.
+ */
+var FieldAdornment = function FieldAdornment(_ref2) {
+  var children = _ref2.children,
+    fieldLabel = _ref2.fieldLabel;
+  var parentFieldContext = field.useFieldContext();
+  var fieldContext = react.useMemo(function () {
+    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
+      accessibilityLabel: fieldLabel
+    });
+  }, [fieldLabel, parentFieldContext]);
+  return jsxRuntime.jsx(field.FieldContextProvider, {
+    value: fieldContext,
+    children: children
+  });
+};
+
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+    startAdornment = _ref.startAdornment,
+    endAdornment = _ref.endAdornment,
+    boxProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _useFieldContext = field.useFieldContext(),
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
+  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
+    borderRadius: "small",
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return jsxRuntime.jsx(box.Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    }
+    // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    shadow: "small",
+    css: react$1.css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
+// NOTE: `null | undefined` allow consumers to conditionally render adornments
+
+/**
+ * Map children for placement within the `TextInput` flex container. Ensures that
+ * placeholders are provided for unused placements.
+ */
+var childrenToAdornments = function childrenToAdornments(children) {
+  var startAdornment = null;
+  var endAdornment = null;
+  if (!children) {
+    return {
+      startAdornment: startAdornment,
+      endAdornment: endAdornment
+    };
+  }
+  react.Children.forEach(children, function (child) {
+    if ( /*#__PURE__*/react.isValidElement(child)) {
+      if (child.props.placement === 'end') {
+        endAdornment = child;
+      }
+      if (child.props.placement === 'start') {
+        startAdornment = child;
+      }
+    }
+  });
+  return {
+    startAdornment: startAdornment,
+    endAdornment: endAdornment
+  };
+};
+
+var _excluded = ["children", "data"];
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFieldContext = field.useFieldContext(),
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid,
+    a11yProps = _useFieldContext2[1];
+  var _childrenToAdornments = childrenToAdornments(children),
+    startAdornment = _childrenToAdornments.startAdornment,
+    endAdornment = _childrenToAdornments.endAdornment;
+  var _useInputStyles = useInputStyles({
+      disabled: disabled,
+      invalid: invalid,
+      startAdornment: Boolean(startAdornment),
+      endAdornment: Boolean(endAdornment)
+    }),
+    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+    boxProps = _useInputStyles2[0],
+    inputStyles = _useInputStyles2[1];
+  return jsxRuntime.jsx(InputContainer, {
+    display: "inline-flex",
+    alignItems: "center",
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
+      as: "input",
+      css: react$1.css(inputStyles),
+      data: data,
+      disabled: disabled,
+      ref: forwardedRef
+    }))
+  });
+});
+TextInput.displayName = 'TextInput';
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
+  var disabled = _ref2.disabled,
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
+  var theme$1 = theme.useTheme();
+  var overflowStyles = text.useOverflowStrategy('truncate');
+  var focusRingStyles = a11y.useFocusRing({
+    always: true
+  });
+  var textStyles = text.useText({
+    baseline: false,
+    tone: disabled ? 'disabled' : 'neutral',
+    size: 'standard',
+    weight: 'regular'
+  });
+  var _textStyles = _slicedToArray(textStyles, 2),
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
+    ':enabled': {
+      ':focus + [data-focus-indicator]': _objectSpread({
+        borderColor: theme$1.border.color.fieldAccent
+      }, focusRingStyles)
+    },
+    ':focus': {
+      outline: 'none'
+    },
+    '&[aria-invalid=true]': {
+      color: theme$1.color.foreground.muted
+    }
+  })];
+};
+
+exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
+exports.TextInput = TextInput;
+exports.useInputStyles = useInputStyles;

package/dist/spark-web-text-input.esm.js

@@ -0,0 +1,263 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import { Box } from '@spark-web/box';
+import { useFieldContext, FieldContextProvider } from '@spark-web/field';
+import { useTheme } from '@spark-web/theme';
+import { useMemo, createContext, Children, isValidElement, forwardRef } from 'react';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { css } from '@emotion/react';
+import { useFocusRing } from '@spark-web/a11y';
+import { useOverflowStrategy, useText } from '@spark-web/text';
+
+/**
+ * Components like the `SelectInput` may subscribe to the adornment context and
+ * change their appearance or behaviour.
+ */
+var InputAdornmentContext = /*#__PURE__*/createContext(null);
+var placementToPadding = {
+  start: {
+    paddingLeft: 'medium',
+    paddingRight: 'xsmall'
+  },
+  end: {
+    paddingLeft: 'xsmall',
+    paddingRight: 'medium'
+  }
+};
+/**
+ * Places an element at the "start" or "end" of the input, only one adornment
+ * may be provided for each placement. By default, the adornment element will be
+ * wrapped to provide alignment and spacing, use the "raw" property to opt-out
+ * of this behaviour.
+ *
+ * @example
+ * <TextInput>
+ *   <InputAdornment placement="start">
+ *     <Text tone="placeholder">$</Text>
+ *   </InputAdornment>
+ * </TextInput>
+ */
+var InputAdornment = function InputAdornment(_ref) {
+  var children = _ref.children,
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
+  var theme = useTheme();
+  var adornmentContext = useMemo(function () {
+    return {
+      placement: placement
+    };
+  }, [placement]);
+  var _placementToPadding$p = placementToPadding[placement],
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
+  var content = children;
+  if (!raw) {
+    content = jsx(Box, {
+      paddingLeft: paddingLeft,
+      paddingRight: paddingRight,
+      children: jsx(Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        style: {
+          minWidth: theme.sizing.xxsmall
+        },
+        children: children
+      })
+    });
+  }
+  var wrappedContent = jsx(InputAdornmentContext.Provider, {
+    value: adornmentContext,
+    children: content
+  });
+  if (fieldLabel) {
+    return jsx(FieldAdornment, {
+      fieldLabel: fieldLabel,
+      children: wrappedContent
+    });
+  }
+  return wrappedContent;
+};
+
+/**
+ * Wrap the element with a field provider to override the parent field label.
+ * Only split-out from `InputAdornment` to avoid the conditional hook rule.
+ */
+var FieldAdornment = function FieldAdornment(_ref2) {
+  var children = _ref2.children,
+    fieldLabel = _ref2.fieldLabel;
+  var parentFieldContext = useFieldContext();
+  var fieldContext = useMemo(function () {
+    return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
+      accessibilityLabel: fieldLabel
+    });
+  }, [fieldLabel, parentFieldContext]);
+  return jsx(FieldContextProvider, {
+    value: fieldContext,
+    children: children
+  });
+};
+
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+    startAdornment = _ref.startAdornment,
+    endAdornment = _ref.endAdornment,
+    boxProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _useFieldContext = useFieldContext(),
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
+  return jsxs(Box, _objectSpread(_objectSpread({
+    borderRadius: "small",
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return jsx(Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    }
+    // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    shadow: "small",
+    css: css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
+// NOTE: `null | undefined` allow consumers to conditionally render adornments
+
+/**
+ * Map children for placement within the `TextInput` flex container. Ensures that
+ * placeholders are provided for unused placements.
+ */
+var childrenToAdornments = function childrenToAdornments(children) {
+  var startAdornment = null;
+  var endAdornment = null;
+  if (!children) {
+    return {
+      startAdornment: startAdornment,
+      endAdornment: endAdornment
+    };
+  }
+  Children.forEach(children, function (child) {
+    if ( /*#__PURE__*/isValidElement(child)) {
+      if (child.props.placement === 'end') {
+        endAdornment = child;
+      }
+      if (child.props.placement === 'start') {
+        startAdornment = child;
+      }
+    }
+  });
+  return {
+    startAdornment: startAdornment,
+    endAdornment: endAdornment
+  };
+};
+
+var _excluded = ["children", "data"];
+/** Organize and emphasize information quickly and effectively in a list of text elements. */
+var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFieldContext = useFieldContext(),
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid,
+    a11yProps = _useFieldContext2[1];
+  var _childrenToAdornments = childrenToAdornments(children),
+    startAdornment = _childrenToAdornments.startAdornment,
+    endAdornment = _childrenToAdornments.endAdornment;
+  var _useInputStyles = useInputStyles({
+      disabled: disabled,
+      invalid: invalid,
+      startAdornment: Boolean(startAdornment),
+      endAdornment: Boolean(endAdornment)
+    }),
+    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+    boxProps = _useInputStyles2[0],
+    inputStyles = _useInputStyles2[1];
+  return jsx(InputContainer, {
+    display: "inline-flex",
+    alignItems: "center",
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
+      as: "input",
+      css: css(inputStyles),
+      data: data,
+      disabled: disabled,
+      ref: forwardedRef
+    }))
+  });
+});
+TextInput.displayName = 'TextInput';
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
+  var disabled = _ref2.disabled,
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
+  var theme = useTheme();
+  var overflowStyles = useOverflowStrategy('truncate');
+  var focusRingStyles = useFocusRing({
+    always: true
+  });
+  var textStyles = useText({
+    baseline: false,
+    tone: disabled ? 'disabled' : 'neutral',
+    size: 'standard',
+    weight: 'regular'
+  });
+  var _textStyles = _slicedToArray(textStyles, 2),
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
+    ':enabled': {
+      ':focus + [data-focus-indicator]': _objectSpread({
+        borderColor: theme.border.color.fieldAccent
+      }, focusRingStyles)
+    },
+    ':focus': {
+      outline: 'none'
+    },
+    '&[aria-invalid=true]': {
+      color: theme.color.foreground.muted
+    }
+  })];
+};
+
+export { InputAdornment, InputContainer, TextInput, useInputStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "4.0.0-rc.0",
+  "version": "4.0.0-rc.2",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.13.5",
-    "@spark-web/a11y": "^2.0.0-rc.0",
-    "@spark-web/box": "^2.0.0-rc.0",
-    "@spark-web/text": "^2.0.0-rc.0",
-    "@spark-web/theme": "^4.0.0-rc.0",
-    "@spark-web/utils": "^2.0.0-rc.0"
+    "@spark-web/a11y": "^2.0.0-rc.2",
+    "@spark-web/box": "^2.0.0-rc.2",
+    "@spark-web/text": "^2.0.0-rc.2",
+    "@spark-web/theme": "^4.0.0-rc.2",
+    "@spark-web/utils": "^2.0.0-rc.2"
   },
   "devDependencies": {
-    "@spark-web/field": "^4.0.0-rc.0",
+    "@spark-web/field": "^4.0.0-rc.2",
     "@types/react": "^18.2.0",
     "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^4.0.0-rc.0",
+    "@spark-web/field": "^4.0.0-rc.2",
     "react": ">=17.0.2"
   },
   "engines": {