@spark-web/text-input 6.0.0-rc.0 → 6.0.0

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

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

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

@@ -114,11 +114,12 @@ var InputContainer = function InputContainer(_ref) {
     _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid;
+    invalid = _useFieldContext2$.invalid,
+    readOnly = _useFieldContext2$.readOnly;
   return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
+    background: disabled || readOnly ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
     children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
       invalid: invalid
@@ -126,7 +127,9 @@ var InputContainer = function InputContainer(_ref) {
   }));
 };
 var FocusIndicator = function FocusIndicator(_ref2) {
+  var _theme$components$tex, _theme$components$tex2, _theme$components$tex3;
   var invalid = _ref2.invalid;
+  var theme$1 = theme.useTheme();
   return jsxRuntime.jsx(box.Box, {
     "aria-hidden": "true",
     as: "span",
@@ -135,14 +138,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+    border: invalid ? 'critical' : (_theme$components$tex = theme$1.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderColor,
+    borderRadius: (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.borderRadius,
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
-    shadow: "small",
+    shadow: (_theme$components$tex3 = theme$1.components.textInput) === null || _theme$components$tex3 === void 0 ? void 0 : _theme$components$tex3.boxShadow,
     css: react$1.css({
       pointerEvents: 'none'
     })
@@ -165,7 +168,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
     };
   }
   react.Children.forEach(children, function (child) {
-    if ( /*#__PURE__*/react.isValidElement(child)) {
+    if (/*#__PURE__*/react.isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
@@ -180,17 +183,19 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"];
+var _excluded = ["children", "data", "overflowStrategy"];
 /** 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,
+    overflowStrategy = _ref.overflowStrategy,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = field.useFieldContext(),
     _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
     invalid = _useFieldContext2$.invalid,
+    readOnly = _useFieldContext2$.readOnly,
     a11yProps = _useFieldContext2[1];
   var _childrenToAdornments = childrenToAdornments(children),
     startAdornment = _childrenToAdornments.startAdornment,
@@ -199,7 +204,9 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
+      endAdornment: Boolean(endAdornment),
+      readOnly: readOnly,
+      overflowStrategy: overflowStrategy
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -214,6 +221,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -225,17 +233,21 @@ TextInput.displayName = 'TextInput';
  * item is a CSS object to be passed to Emotion's `css` function
  **/
 var useInputStyles = function useInputStyles(_ref2) {
+  var _theme$components$tex, _theme$components$tex2;
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
+    endAdornment = _ref2.endAdornment,
+    readOnly = _ref2.readOnly,
+    _ref2$overflowStrateg = _ref2.overflowStrategy,
+    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
   var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
+  var overflowStyles = text.useOverflowStrategy(overflowStrategy);
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
   var textStyles = text.useText({
     baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
+    tone: disabled || readOnly ? 'field' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });
@@ -251,7 +263,7 @@ var useInputStyles = function useInputStyles(_ref2) {
     width: 'full'
   }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
+      ':focus + [data-focus-indicator]': (_theme$components$tex = (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
       }, focusRingStyles)
     },

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

@@ -114,11 +114,12 @@ var InputContainer = function InputContainer(_ref) {
     _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid;
+    invalid = _useFieldContext2$.invalid,
+    readOnly = _useFieldContext2$.readOnly;
   return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
+    background: disabled || readOnly ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
     children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
       invalid: invalid
@@ -126,7 +127,9 @@ var InputContainer = function InputContainer(_ref) {
   }));
 };
 var FocusIndicator = function FocusIndicator(_ref2) {
+  var _theme$components$tex, _theme$components$tex2, _theme$components$tex3;
   var invalid = _ref2.invalid;
+  var theme$1 = theme.useTheme();
   return jsxRuntime.jsx(box.Box, {
     "aria-hidden": "true",
     as: "span",
@@ -135,14 +138,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+    border: invalid ? 'critical' : (_theme$components$tex = theme$1.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderColor,
+    borderRadius: (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.borderRadius,
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
-    shadow: "small",
+    shadow: (_theme$components$tex3 = theme$1.components.textInput) === null || _theme$components$tex3 === void 0 ? void 0 : _theme$components$tex3.boxShadow,
     css: react$1.css({
       pointerEvents: 'none'
     })
@@ -165,7 +168,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
     };
   }
   react.Children.forEach(children, function (child) {
-    if ( /*#__PURE__*/react.isValidElement(child)) {
+    if (/*#__PURE__*/react.isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
@@ -180,17 +183,19 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"];
+var _excluded = ["children", "data", "overflowStrategy"];
 /** 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,
+    overflowStrategy = _ref.overflowStrategy,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = field.useFieldContext(),
     _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
     invalid = _useFieldContext2$.invalid,
+    readOnly = _useFieldContext2$.readOnly,
     a11yProps = _useFieldContext2[1];
   var _childrenToAdornments = childrenToAdornments(children),
     startAdornment = _childrenToAdornments.startAdornment,
@@ -199,7 +204,9 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
+      endAdornment: Boolean(endAdornment),
+      readOnly: readOnly,
+      overflowStrategy: overflowStrategy
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -214,6 +221,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -225,17 +233,21 @@ TextInput.displayName = 'TextInput';
  * item is a CSS object to be passed to Emotion's `css` function
  **/
 var useInputStyles = function useInputStyles(_ref2) {
+  var _theme$components$tex, _theme$components$tex2;
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
+    endAdornment = _ref2.endAdornment,
+    readOnly = _ref2.readOnly,
+    _ref2$overflowStrateg = _ref2.overflowStrategy,
+    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
   var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
+  var overflowStyles = text.useOverflowStrategy(overflowStrategy);
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
   var textStyles = text.useText({
     baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
+    tone: disabled || readOnly ? 'field' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });
@@ -251,7 +263,7 @@ var useInputStyles = function useInputStyles(_ref2) {
     width: 'full'
   }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
+      ':focus + [data-focus-indicator]': (_theme$components$tex = (_theme$components$tex2 = theme$1.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
       }, focusRingStyles)
     },

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

@@ -110,11 +110,12 @@ var InputContainer = function InputContainer(_ref) {
     _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid;
+    invalid = _useFieldContext2$.invalid,
+    readOnly = _useFieldContext2$.readOnly;
   return jsxs(Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
-    background: disabled ? 'inputDisabled' : 'input'
+    background: disabled || readOnly ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
     children: [startAdornment, children, jsx(FocusIndicator, {
       invalid: invalid
@@ -122,7 +123,9 @@ var InputContainer = function InputContainer(_ref) {
   }));
 };
 var FocusIndicator = function FocusIndicator(_ref2) {
+  var _theme$components$tex, _theme$components$tex2, _theme$components$tex3;
   var invalid = _ref2.invalid;
+  var theme = useTheme();
   return jsx(Box, {
     "aria-hidden": "true",
     as: "span",
@@ -131,14 +134,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+    border: invalid ? 'critical' : (_theme$components$tex = theme.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderColor,
+    borderRadius: (_theme$components$tex2 = theme.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.borderRadius,
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
-    shadow: "small",
+    shadow: (_theme$components$tex3 = theme.components.textInput) === null || _theme$components$tex3 === void 0 ? void 0 : _theme$components$tex3.boxShadow,
     css: css({
       pointerEvents: 'none'
     })
@@ -161,7 +164,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
     };
   }
   Children.forEach(children, function (child) {
-    if ( /*#__PURE__*/isValidElement(child)) {
+    if (/*#__PURE__*/isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
@@ -176,17 +179,19 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"];
+var _excluded = ["children", "data", "overflowStrategy"];
 /** 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,
+    overflowStrategy = _ref.overflowStrategy,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = useFieldContext(),
     _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
     invalid = _useFieldContext2$.invalid,
+    readOnly = _useFieldContext2$.readOnly,
     a11yProps = _useFieldContext2[1];
   var _childrenToAdornments = childrenToAdornments(children),
     startAdornment = _childrenToAdornments.startAdornment,
@@ -195,7 +200,9 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
+      endAdornment: Boolean(endAdornment),
+      readOnly: readOnly,
+      overflowStrategy: overflowStrategy
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -210,6 +217,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       css: css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -221,17 +229,21 @@ TextInput.displayName = 'TextInput';
  * item is a CSS object to be passed to Emotion's `css` function
  **/
 var useInputStyles = function useInputStyles(_ref2) {
+  var _theme$components$tex, _theme$components$tex2;
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
+    endAdornment = _ref2.endAdornment,
+    readOnly = _ref2.readOnly,
+    _ref2$overflowStrateg = _ref2.overflowStrategy,
+    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
   var theme = useTheme();
-  var overflowStyles = useOverflowStrategy('truncate');
+  var overflowStyles = useOverflowStrategy(overflowStrategy);
   var focusRingStyles = useFocusRing({
     always: true
   });
   var textStyles = useText({
     baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
+    tone: disabled || readOnly ? 'field' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });
@@ -247,7 +259,7 @@ var useInputStyles = function useInputStyles(_ref2) {
     width: 'full'
   }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      ':focus + [data-focus-indicator]': _objectSpread({
+      ':focus + [data-focus-indicator]': (_theme$components$tex = (_theme$components$tex2 = theme.components.textInput) === null || _theme$components$tex2 === void 0 ? void 0 : _theme$components$tex2.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
         borderColor: theme.border.color.fieldAccent
       }, focusRingStyles)
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "6.0.0-rc.0",
+  "version": "6.0.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,21 +17,21 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^5.3.0-rc.0",
-    "@spark-web/box": "^6.0.0-rc.0",
-    "@spark-web/text": "^5.3.0-rc.0",
-    "@spark-web/utils": "^5.1.0-rc.0"
+    "@spark-web/a11y": "^5.3.0",
+    "@spark-web/box": "^6.0.0",
+    "@spark-web/text": "^5.3.0",
+    "@spark-web/utils": "^5.1.0"
   },
   "devDependencies": {
-    "@spark-web/field": "^5.2.0-rc.0",
-    "@spark-web/theme": "^5.12.0-rc.0",
+    "@spark-web/field": "^5.3.0",
+    "@spark-web/theme": "^5.13.0",
     "@types/react": "^19.1.0",
     "react": "^19.1.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^5.2.0-rc.0",
-    "@spark-web/theme": "^5.12.0-rc.0",
-    "react": ">=19.1.0"
+    "@spark-web/field": "^5.3.0",
+    "@spark-web/theme": "^5.13.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=14"