@spark-web/text-input 5.1.1 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/declarations/src/text-input.d.ts +36 -24
  3. package/dist/spark-web-text-input.cjs.dev.js +8 -6
  4. package/dist/spark-web-text-input.cjs.prod.js +8 -6
  5. package/dist/spark-web-text-input.esm.js +8 -6
  6. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @spark-web/text-input
2
2
 
3
+ ## 5.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#632](https://github.com/brighte-labs/spark-web/pull/632)
8
+ [`ecb2391`](https://github.com/brighte-labs/spark-web/commit/ecb23918e5994e174bb9b48accd52db940dbcbf0)
9
+ Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Introduce
10
+ component-level theming to TextInput component
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+ [[`ecb2391`](https://github.com/brighte-labs/spark-web/commit/ecb23918e5994e174bb9b48accd52db940dbcbf0)]:
16
+ - @spark-web/box@5.2.0
17
+
18
+ ## 5.1.2
19
+
20
+ ### Patch Changes
21
+
22
+ - [#627](https://github.com/brighte-labs/spark-web/pull/627)
23
+ [`80504dc`](https://github.com/brighte-labs/spark-web/commit/80504dc3f57aa1f7ed8235c8fb4ca61587d17977)
24
+ Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Update readonly text
25
+ color to meet min contrast requirement
26
+
27
+ - Updated dependencies
28
+ [[`80504dc`](https://github.com/brighte-labs/spark-web/commit/80504dc3f57aa1f7ed8235c8fb4ca61587d17977)]:
29
+ - @spark-web/field@5.1.1
30
+ - @spark-web/theme@5.10.6
31
+
3
32
  ## 5.1.1
4
33
 
5
34
  ### Patch Changes
package/dist/declarations/src/text-input.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
45
45
  */
46
46
  children?: AdornmentsAsChildren;
47
47
  /** Manage how text behaves with regard to overflow. */
48
- overflowStrategy?: "nowrap" | "truncate" | "breakword" | undefined;
48
+ overflowStrategy?: "truncate" | "nowrap" | "breakword" | undefined;
49
49
  } & NativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
50
50
  export declare type UseInputStylesProps = FieldState & {
51
51
  startAdornment?: boolean;
@@ -62,20 +62,24 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
62
62
  readonly flex: 1;
63
63
  readonly position: "relative";
64
64
  readonly height: "medium";
65
- readonly paddingLeft: "medium" | "none";
66
- readonly paddingRight: "medium" | "none";
65
+ readonly paddingLeft: "none" | "medium";
66
+ readonly paddingRight: "none" | "medium";
67
67
  readonly width: "full";
68
68
  }, {
69
69
  readonly ':enabled': {
70
70
  readonly ':focus + [data-focus-indicator]': {
71
- readonly boxShadow: string;
72
- readonly outline: string;
73
- readonly outlineOffset: string;
74
- readonly borderColor: string;
71
+ boxShadow?: string | undefined;
72
+ outline?: string | undefined;
73
+ outlineOffset?: string | undefined;
75
74
  } | {
76
- readonly outline: string;
77
- readonly outlineOffset: string;
78
- readonly borderColor: string;
75
+ boxShadow: string;
76
+ outline: string;
77
+ outlineOffset: string;
78
+ borderColor: string;
79
+ } | {
80
+ outline: string;
81
+ outlineOffset: string;
82
+ borderColor: string;
79
83
  };
80
84
  };
81
85
  readonly ':focus': {
@@ -1042,14 +1046,18 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
1042
1046
  } | {
1043
1047
  readonly ':enabled': {
1044
1048
  readonly ':focus + [data-focus-indicator]': {
1045
- readonly boxShadow: string;
1046
- readonly outline: string;
1047
- readonly outlineOffset: string;
1048
- readonly borderColor: string;
1049
+ boxShadow?: string | undefined;
1050
+ outline?: string | undefined;
1051
+ outlineOffset?: string | undefined;
1052
+ } | {
1053
+ boxShadow: string;
1054
+ outline: string;
1055
+ outlineOffset: string;
1056
+ borderColor: string;
1049
1057
  } | {
1050
- readonly outline: string;
1051
- readonly outlineOffset: string;
1052
- readonly borderColor: string;
1058
+ outline: string;
1059
+ outlineOffset: string;
1060
+ borderColor: string;
1053
1061
  };
1054
1062
  };
1055
1063
  readonly ':focus': {
@@ -2016,14 +2024,18 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
2016
2024
  } | {
2017
2025
  readonly ':enabled': {
2018
2026
  readonly ':focus + [data-focus-indicator]': {
2019
- readonly boxShadow: string;
2020
- readonly outline: string;
2021
- readonly outlineOffset: string;
2022
- readonly borderColor: string;
2027
+ boxShadow?: string | undefined;
2028
+ outline?: string | undefined;
2029
+ outlineOffset?: string | undefined;
2030
+ } | {
2031
+ boxShadow: string;
2032
+ outline: string;
2033
+ outlineOffset: string;
2034
+ borderColor: string;
2023
2035
  } | {
2024
- readonly outline: string;
2025
- readonly outlineOffset: string;
2026
- readonly borderColor: string;
2036
+ outline: string;
2037
+ outlineOffset: string;
2038
+ borderColor: string;
2027
2039
  };
2028
2040
  };
2029
2041
  readonly ':focus': {
package/dist/spark-web-text-input.cjs.dev.js CHANGED
@@ -114,11 +114,12 @@ var InputContainer = function InputContainer(_ref) {
114
114
  _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
115
115
  _useFieldContext2$ = _useFieldContext2[0],
116
116
  disabled = _useFieldContext2$.disabled,
117
- invalid = _useFieldContext2$.invalid;
117
+ invalid = _useFieldContext2$.invalid,
118
+ readOnly = _useFieldContext2$.readOnly;
118
119
  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
119
120
  borderRadius: "small",
120
121
  position: "relative",
121
- background: disabled ? 'inputDisabled' : 'input'
122
+ background: disabled || readOnly ? 'inputDisabled' : 'input'
122
123
  }, boxProps), {}, {
123
124
  children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
124
125
  invalid: invalid
@@ -137,13 +138,13 @@ var FocusIndicator = function FocusIndicator(_ref2) {
137
138
  // Styles
138
139
  ,
139
140
  border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
140
- borderRadius: "small",
141
+ borderRadius: theme$1.components.textInput.borderRadius,
141
142
  position: "absolute",
142
143
  bottom: 0,
143
144
  left: 0,
144
145
  right: 0,
145
146
  top: 0,
146
- shadow: "small",
147
+ shadow: theme$1.components.textInput.boxShadow,
147
148
  css: react$1.css({
148
149
  pointerEvents: 'none'
149
150
  })
@@ -231,6 +232,7 @@ TextInput.displayName = 'TextInput';
231
232
  * item is a CSS object to be passed to Emotion's `css` function
232
233
  **/
233
234
  var useInputStyles = function useInputStyles(_ref2) {
235
+ var _theme$components$tex;
234
236
  var disabled = _ref2.disabled,
235
237
  startAdornment = _ref2.startAdornment,
236
238
  endAdornment = _ref2.endAdornment,
@@ -244,7 +246,7 @@ var useInputStyles = function useInputStyles(_ref2) {
244
246
  });
245
247
  var textStyles = text.useText({
246
248
  baseline: false,
247
- tone: disabled || readOnly ? 'disabled' : 'neutral',
249
+ tone: disabled || readOnly ? 'field' : 'neutral',
248
250
  size: 'standard',
249
251
  weight: 'regular'
250
252
  });
@@ -260,7 +262,7 @@ var useInputStyles = function useInputStyles(_ref2) {
260
262
  width: 'full'
261
263
  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
262
264
  ':enabled': {
263
- ':focus + [data-focus-indicator]': _objectSpread({
265
+ ':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
264
266
  borderColor: theme$1.border.color.fieldAccent
265
267
  }, focusRingStyles)
266
268
  },
package/dist/spark-web-text-input.cjs.prod.js CHANGED
@@ -114,11 +114,12 @@ var InputContainer = function InputContainer(_ref) {
114
114
  _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
115
115
  _useFieldContext2$ = _useFieldContext2[0],
116
116
  disabled = _useFieldContext2$.disabled,
117
- invalid = _useFieldContext2$.invalid;
117
+ invalid = _useFieldContext2$.invalid,
118
+ readOnly = _useFieldContext2$.readOnly;
118
119
  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
119
120
  borderRadius: "small",
120
121
  position: "relative",
121
- background: disabled ? 'inputDisabled' : 'input'
122
+ background: disabled || readOnly ? 'inputDisabled' : 'input'
122
123
  }, boxProps), {}, {
123
124
  children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
124
125
  invalid: invalid
@@ -137,13 +138,13 @@ var FocusIndicator = function FocusIndicator(_ref2) {
137
138
  // Styles
138
139
  ,
139
140
  border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
140
- borderRadius: "small",
141
+ borderRadius: theme$1.components.textInput.borderRadius,
141
142
  position: "absolute",
142
143
  bottom: 0,
143
144
  left: 0,
144
145
  right: 0,
145
146
  top: 0,
146
- shadow: "small",
147
+ shadow: theme$1.components.textInput.boxShadow,
147
148
  css: react$1.css({
148
149
  pointerEvents: 'none'
149
150
  })
@@ -231,6 +232,7 @@ TextInput.displayName = 'TextInput';
231
232
  * item is a CSS object to be passed to Emotion's `css` function
232
233
  **/
233
234
  var useInputStyles = function useInputStyles(_ref2) {
235
+ var _theme$components$tex;
234
236
  var disabled = _ref2.disabled,
235
237
  startAdornment = _ref2.startAdornment,
236
238
  endAdornment = _ref2.endAdornment,
@@ -244,7 +246,7 @@ var useInputStyles = function useInputStyles(_ref2) {
244
246
  });
245
247
  var textStyles = text.useText({
246
248
  baseline: false,
247
- tone: disabled || readOnly ? 'disabled' : 'neutral',
249
+ tone: disabled || readOnly ? 'field' : 'neutral',
248
250
  size: 'standard',
249
251
  weight: 'regular'
250
252
  });
@@ -260,7 +262,7 @@ var useInputStyles = function useInputStyles(_ref2) {
260
262
  width: 'full'
261
263
  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
262
264
  ':enabled': {
263
- ':focus + [data-focus-indicator]': _objectSpread({
265
+ ':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
264
266
  borderColor: theme$1.border.color.fieldAccent
265
267
  }, focusRingStyles)
266
268
  },
package/dist/spark-web-text-input.esm.js CHANGED
@@ -110,11 +110,12 @@ var InputContainer = function InputContainer(_ref) {
110
110
  _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
111
111
  _useFieldContext2$ = _useFieldContext2[0],
112
112
  disabled = _useFieldContext2$.disabled,
113
- invalid = _useFieldContext2$.invalid;
113
+ invalid = _useFieldContext2$.invalid,
114
+ readOnly = _useFieldContext2$.readOnly;
114
115
  return jsxs(Box, _objectSpread(_objectSpread({
115
116
  borderRadius: "small",
116
117
  position: "relative",
117
- background: disabled ? 'inputDisabled' : 'input'
118
+ background: disabled || readOnly ? 'inputDisabled' : 'input'
118
119
  }, boxProps), {}, {
119
120
  children: [startAdornment, children, jsx(FocusIndicator, {
120
121
  invalid: invalid
@@ -133,13 +134,13 @@ var FocusIndicator = function FocusIndicator(_ref2) {
133
134
  // Styles
134
135
  ,
135
136
  border: invalid ? 'critical' : theme.components.textInput.borderColor,
136
- borderRadius: "small",
137
+ borderRadius: theme.components.textInput.borderRadius,
137
138
  position: "absolute",
138
139
  bottom: 0,
139
140
  left: 0,
140
141
  right: 0,
141
142
  top: 0,
142
- shadow: "small",
143
+ shadow: theme.components.textInput.boxShadow,
143
144
  css: css({
144
145
  pointerEvents: 'none'
145
146
  })
@@ -227,6 +228,7 @@ TextInput.displayName = 'TextInput';
227
228
  * item is a CSS object to be passed to Emotion's `css` function
228
229
  **/
229
230
  var useInputStyles = function useInputStyles(_ref2) {
231
+ var _theme$components$tex;
230
232
  var disabled = _ref2.disabled,
231
233
  startAdornment = _ref2.startAdornment,
232
234
  endAdornment = _ref2.endAdornment,
@@ -240,7 +242,7 @@ var useInputStyles = function useInputStyles(_ref2) {
240
242
  });
241
243
  var textStyles = useText({
242
244
  baseline: false,
243
- tone: disabled || readOnly ? 'disabled' : 'neutral',
245
+ tone: disabled || readOnly ? 'field' : 'neutral',
244
246
  size: 'standard',
245
247
  weight: 'regular'
246
248
  });
@@ -256,7 +258,7 @@ var useInputStyles = function useInputStyles(_ref2) {
256
258
  width: 'full'
257
259
  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
258
260
  ':enabled': {
259
- ':focus + [data-focus-indicator]': _objectSpread({
261
+ ':focus + [data-focus-indicator]': (_theme$components$tex = theme.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
260
262
  borderColor: theme.border.color.fieldAccent
261
263
  }, focusRingStyles)
262
264
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/text-input",
3
- "version": "5.1.1",
3
+ "version": "5.2.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -18,18 +18,19 @@
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
20
  "@spark-web/a11y": "^5.0.0",
21
- "@spark-web/box": "^5.0.0",
21
+ "@spark-web/box": "^5.2.0",
22
22
  "@spark-web/text": "^5.0.0",
23
- "@spark-web/theme": "^5.10.5",
24
23
  "@spark-web/utils": "^5.0.0"
25
24
  },
26
25
  "devDependencies": {
27
- "@spark-web/field": "^5.1.0",
26
+ "@spark-web/field": "^5.1.1",
27
+ "@spark-web/theme": "^5.10.6",
28
28
  "@types/react": "^18.2.0",
29
29
  "react": "^18.2.0"
30
30
  },
31
31
  "peerDependencies": {
32
- "@spark-web/field": "^5.1.0",
32
+ "@spark-web/field": "^5.1.1",
33
+ "@spark-web/theme": "^5.10.6",
33
34
  "react": ">=17.0.2"
34
35
  },
35
36
  "engines": {