@povio/ui 2.3.0-rc.22 → 2.3.0-rc.24

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 (3) hide show
  1. package/dist/components/inputs/Input/NumberInput/NumberInput.js +195 -188
  2. package/dist/components/inputs/Skeleton/InputFrame.js +91 -97
  3. package/package.json +1 -1
package/dist/components/inputs/Input/NumberInput/NumberInput.js CHANGED
@@ -18,9 +18,10 @@ import { Controller } from "react-hook-form";
18
18
  import { useNumberFieldState } from "react-stately";
19
19
  //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
20
20
  var NumberInputBase = (props) => {
21
- const $ = c(87);
21
+ const $ = c(89);
22
22
  const ui = UIConfig.useConfig();
23
23
  const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
24
+ const hasControlledValue = "value" in props;
24
25
  const inputRef = useRef(null);
25
26
  const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions: formatOptionsProp, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
26
27
  const formatOptions = formatOptionsProp ?? ui.numberInput.formatOptions;
@@ -33,90 +34,96 @@ var NumberInputBase = (props) => {
33
34
  const { isFocusVisible } = useFocusVisible();
34
35
  const { locale } = useLocale();
35
36
  let t0;
36
- if ($[0] !== onBlur) {
37
- t0 = (e) => onBlur?.({ target: e.target });
38
- $[0] = onBlur;
37
+ if ($[0] !== onChange) {
38
+ t0 = (nextValue) => onChange?.(Number.isNaN(nextValue) ? null : nextValue);
39
+ $[0] = onChange;
39
40
  $[1] = t0;
40
41
  } else t0 = $[1];
42
+ let t1;
43
+ if ($[2] !== onBlur) {
44
+ t1 = (e) => onBlur?.({ target: e.target });
45
+ $[2] = onBlur;
46
+ $[3] = t1;
47
+ } else t1 = $[3];
41
48
  const numberProps = {
42
49
  ...rest,
43
- value: value ?? void 0,
50
+ value: hasControlledValue ? value ?? NaN : void 0,
44
51
  label,
45
52
  isDisabled,
46
53
  isInvalid: !!error,
47
54
  isRequired,
48
- onChange,
49
- onBlur: t0,
55
+ onChange: t0,
56
+ onBlur: t1,
50
57
  locale,
51
58
  formatOptions
52
59
  };
53
60
  const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
54
- let t1;
55
61
  let t2;
56
- if ($[2] !== autoFocusOnMount || $[3] !== isDisabled) {
57
- t1 = () => {
62
+ let t3;
63
+ if ($[4] !== autoFocusOnMount || $[5] !== isDisabled) {
64
+ t2 = () => {
58
65
  if (!autoFocusOnMount || isDisabled) return;
59
66
  requestAnimationFrame(() => inputRef.current?.focus());
60
67
  };
61
- t2 = [autoFocusOnMount, isDisabled];
62
- $[2] = autoFocusOnMount;
63
- $[3] = isDisabled;
64
- $[4] = t1;
65
- $[5] = t2;
68
+ t3 = [autoFocusOnMount, isDisabled];
69
+ $[4] = autoFocusOnMount;
70
+ $[5] = isDisabled;
71
+ $[6] = t2;
72
+ $[7] = t3;
66
73
  } else {
67
- t1 = $[4];
68
- t2 = $[5];
74
+ t2 = $[6];
75
+ t3 = $[7];
69
76
  }
70
- useEffect(t1, t2);
71
- const t3 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
72
- let t4;
73
- if ($[6] !== error || $[7] !== errorClassName || $[8] !== headerClassName || $[9] !== helperText || $[10] !== hideLabel || $[11] !== isDisabled || $[12] !== isRequired || $[13] !== label || $[14] !== rightContent || $[15] !== t3 || $[16] !== tooltipText) {
74
- t4 = {
77
+ useEffect(t2, t3);
78
+ const t4 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
79
+ let t5;
80
+ if ($[8] !== error || $[9] !== errorClassName || $[10] !== headerClassName || $[11] !== helperText || $[12] !== hideLabel || $[13] !== isDisabled || $[14] !== isRequired || $[15] !== label || $[16] !== rightContent || $[17] !== t4 || $[18] !== tooltipText) {
81
+ t5 = {
75
82
  error,
76
83
  label,
77
84
  tooltipText,
78
85
  helperText,
79
86
  isRequired,
80
87
  rightContent,
81
- isHeaderHidden: t3,
88
+ isHeaderHidden: t4,
82
89
  hideLabel,
83
90
  isDisabled,
84
91
  headerClassName,
85
92
  errorClassName
86
93
  };
87
- $[6] = error;
88
- $[7] = errorClassName;
89
- $[8] = headerClassName;
90
- $[9] = helperText;
91
- $[10] = hideLabel;
92
- $[11] = isDisabled;
93
- $[12] = isRequired;
94
- $[13] = label;
95
- $[14] = rightContent;
96
- $[15] = t3;
97
- $[16] = tooltipText;
94
+ $[8] = error;
95
+ $[9] = errorClassName;
96
+ $[10] = headerClassName;
97
+ $[11] = helperText;
98
+ $[12] = hideLabel;
99
+ $[13] = isDisabled;
100
+ $[14] = isRequired;
101
+ $[15] = label;
102
+ $[16] = rightContent;
98
103
  $[17] = t4;
99
- } else t4 = $[17];
100
- const formFieldProps = t4;
101
- let t5;
102
- if ($[18] !== onBlur) {
103
- t5 = (e_0) => {
104
- const target = numberFieldRef.current ?? e_0?.target;
105
- onBlur?.({ target });
106
- };
107
- $[18] = onBlur;
104
+ $[18] = tooltipText;
108
105
  $[19] = t5;
109
106
  } else t5 = $[19];
110
- const handleInputBlur = t5;
107
+ const formFieldProps = t5;
111
108
  let t6;
112
- if ($[20] !== onChange) {
113
- t6 = (val) => onChange?.(val === "" ? null : Number(val));
114
- $[20] = onChange;
109
+ if ($[20] !== onBlur) {
110
+ t6 = (e_0) => {
111
+ const target = numberFieldRef.current ?? e_0?.target;
112
+ onBlur?.({ target });
113
+ };
114
+ $[20] = onBlur;
115
115
  $[21] = t6;
116
116
  } else t6 = $[21];
117
+ const handleInputBlur = t6;
117
118
  let t7;
118
- if ($[22] !== action || $[23] !== handleInputBlur || $[24] !== isClearable || $[25] !== isDisabled || $[26] !== isLoading || $[27] !== leadingIcon || $[28] !== t6 || $[29] !== trailingIcon || $[30] !== unit || $[31] !== value) {
119
- t7 = {
119
+ if ($[22] !== onChange) {
120
+ t7 = (val) => onChange?.(val === "" ? null : Number(val));
121
+ $[22] = onChange;
122
+ $[23] = t7;
123
+ } else t7 = $[23];
124
+ let t8;
125
+ if ($[24] !== action || $[25] !== handleInputBlur || $[26] !== isClearable || $[27] !== isDisabled || $[28] !== isLoading || $[29] !== leadingIcon || $[30] !== t7 || $[31] !== trailingIcon || $[32] !== unit || $[33] !== value) {
126
+ t8 = {
120
127
  unit,
121
128
  isLoading,
122
129
  isDisabled,
@@ -125,185 +132,185 @@ var NumberInputBase = (props) => {
125
132
  trailingIcon,
126
133
  isClearable,
127
134
  value,
128
- onChange: t6,
135
+ onChange: t7,
129
136
  onBlur: handleInputBlur
130
137
  };
131
- $[22] = action;
132
- $[23] = handleInputBlur;
133
- $[24] = isClearable;
134
- $[25] = isDisabled;
135
- $[26] = isLoading;
136
- $[27] = leadingIcon;
137
- $[28] = t6;
138
- $[29] = trailingIcon;
139
- $[30] = unit;
140
- $[31] = value;
141
- $[32] = t7;
142
- } else t7 = $[32];
143
- const inputContentProps = t7;
144
- const t8 = hideLabel || isHeaderHidden;
145
- let t9;
146
- if ($[33] !== headerClassName || $[34] !== helperText || $[35] !== isDisabled || $[36] !== isRequired || $[37] !== label || $[38] !== labelProps || $[39] !== rightContent || $[40] !== t8 || $[41] !== tooltipText) {
147
- t9 = {
138
+ $[24] = action;
139
+ $[25] = handleInputBlur;
140
+ $[26] = isClearable;
141
+ $[27] = isDisabled;
142
+ $[28] = isLoading;
143
+ $[29] = leadingIcon;
144
+ $[30] = t7;
145
+ $[31] = trailingIcon;
146
+ $[32] = unit;
147
+ $[33] = value;
148
+ $[34] = t8;
149
+ } else t8 = $[34];
150
+ const inputContentProps = t8;
151
+ const t9 = hideLabel || isHeaderHidden;
152
+ let t10;
153
+ if ($[35] !== headerClassName || $[36] !== helperText || $[37] !== isDisabled || $[38] !== isRequired || $[39] !== label || $[40] !== labelProps || $[41] !== rightContent || $[42] !== t9 || $[43] !== tooltipText) {
154
+ t10 = {
148
155
  label,
149
156
  tooltipText,
150
157
  helperText,
151
158
  isRequired,
152
159
  rightContent,
153
- isHeaderHidden: t8,
160
+ isHeaderHidden: t9,
154
161
  isDisabled,
155
162
  className: headerClassName,
156
163
  labelProps
157
164
  };
158
- $[33] = headerClassName;
159
- $[34] = helperText;
160
- $[35] = isDisabled;
161
- $[36] = isRequired;
162
- $[37] = label;
163
- $[38] = labelProps;
164
- $[39] = rightContent;
165
- $[40] = t8;
166
- $[41] = tooltipText;
165
+ $[35] = headerClassName;
166
+ $[36] = helperText;
167
+ $[37] = isDisabled;
168
+ $[38] = isRequired;
169
+ $[39] = label;
170
+ $[40] = labelProps;
171
+ $[41] = rightContent;
167
172
  $[42] = t9;
168
- } else t9 = $[42];
169
- const headerProps = t9;
173
+ $[43] = tooltipText;
174
+ $[44] = t10;
175
+ } else t10 = $[44];
176
+ const headerProps = t10;
170
177
  const dataIsDisabled = isDisabled || void 0;
171
178
  const T0 = TooltipWrapper;
172
- const t10 = as === "inline" ? -1 : void 0;
179
+ const t11 = as === "inline" ? -1 : void 0;
173
180
  const T1 = FormField;
174
- let t11;
175
- if ($[43] !== className) {
176
- t11 = clsx("group w-full", className);
177
- $[43] = className;
178
- $[44] = t11;
179
- } else t11 = $[44];
180
- const t12 = as === "inline" ? -1 : void 0;
181
- const t13 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
181
+ let t12;
182
+ if ($[45] !== className) {
183
+ t12 = clsx("group w-full", className);
184
+ $[45] = className;
185
+ $[46] = t12;
186
+ } else t12 = $[46];
187
+ const t13 = as === "inline" ? -1 : void 0;
188
+ const t14 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
182
189
  variant,
183
190
  as,
184
191
  ...rest
185
192
  }), inputClassName);
186
- let t14;
187
- if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
188
- t14 = () => inputRef.current?.focus();
189
- $[45] = t14;
190
- } else t14 = $[45];
191
- const t15 = value === null || value === void 0 || void 0;
192
- const t16 = isRequired || void 0;
193
- let t17;
194
- if ($[46] !== ref) {
195
- t17 = mergeRefs(ref, inputRef);
196
- $[46] = ref;
197
- $[47] = t17;
198
- } else t17 = $[47];
199
- const t18 = isDirty || void 0;
200
- const t19 = isRequired || void 0;
201
- const t20 = value === null || value === void 0 || void 0;
202
- const t21 = !("" + value === "" || value === null || value === void 0) || void 0;
203
- const t22 = as === "floating" ? "\xA0" : inputProps.placeholder;
204
- let t23;
205
- if ($[48] !== inputProps || $[49] !== isFocusVisible) {
206
- t23 = (e_1) => {
193
+ let t15;
194
+ if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
195
+ t15 = () => inputRef.current?.focus();
196
+ $[47] = t15;
197
+ } else t15 = $[47];
198
+ const t16 = value === null || value === void 0 || void 0;
199
+ const t17 = isRequired || void 0;
200
+ let t18;
201
+ if ($[48] !== ref) {
202
+ t18 = mergeRefs(ref, inputRef);
203
+ $[48] = ref;
204
+ $[49] = t18;
205
+ } else t18 = $[49];
206
+ const t19 = isDirty || void 0;
207
+ const t20 = isRequired || void 0;
208
+ const t21 = value === null || value === void 0 || void 0;
209
+ const t22 = !("" + value === "" || value === null || value === void 0) || void 0;
210
+ const t23 = as === "floating" ? "\xA0" : inputProps.placeholder;
211
+ let t24;
212
+ if ($[50] !== inputProps || $[51] !== isFocusVisible) {
213
+ t24 = (e_1) => {
207
214
  inputProps.onFocus?.(e_1);
208
215
  if (isFocusVisible) e_1.target.select();
209
216
  };
210
- $[48] = inputProps;
211
- $[49] = isFocusVisible;
212
- $[50] = t23;
213
- } else t23 = $[50];
214
- let t24;
215
- if ($[51] !== dataIsDisabled || $[52] !== inputProps || $[53] !== t17 || $[54] !== t18 || $[55] !== t19 || $[56] !== t20 || $[57] !== t21 || $[58] !== t22 || $[59] !== t23) {
216
- t24 = /* @__PURE__ */ jsx(Input, {
217
+ $[50] = inputProps;
218
+ $[51] = isFocusVisible;
219
+ $[52] = t24;
220
+ } else t24 = $[52];
221
+ let t25;
222
+ if ($[53] !== dataIsDisabled || $[54] !== inputProps || $[55] !== t18 || $[56] !== t19 || $[57] !== t20 || $[58] !== t21 || $[59] !== t22 || $[60] !== t23 || $[61] !== t24) {
223
+ t25 = /* @__PURE__ */ jsx(Input, {
217
224
  ...inputProps,
218
- ref: t17,
219
- "data-is-dirty": t18,
220
- "data-is-required": t19,
221
- "data-is-empty": t20,
222
- "data-is-filled": t21,
225
+ ref: t18,
226
+ "data-is-dirty": t19,
227
+ "data-is-required": t20,
228
+ "data-is-empty": t21,
229
+ "data-is-filled": t22,
223
230
  "data-is-disabled": dataIsDisabled,
224
- placeholder: t22,
231
+ placeholder: t23,
225
232
  className: "w-full bg-transparent outline-none",
226
- onFocus: t23
233
+ onFocus: t24
227
234
  });
228
- $[51] = dataIsDisabled;
229
- $[52] = inputProps;
230
- $[53] = t17;
231
- $[54] = t18;
232
- $[55] = t19;
233
- $[56] = t20;
234
- $[57] = t21;
235
- $[58] = t22;
236
- $[59] = t23;
237
- $[60] = t24;
238
- } else t24 = $[60];
239
- let t25;
240
- if ($[61] !== as || $[62] !== headerProps || $[63] !== inputContentProps || $[64] !== size || $[65] !== t24) {
241
- t25 = /* @__PURE__ */ jsx(InputContent, {
235
+ $[53] = dataIsDisabled;
236
+ $[54] = inputProps;
237
+ $[55] = t18;
238
+ $[56] = t19;
239
+ $[57] = t20;
240
+ $[58] = t21;
241
+ $[59] = t22;
242
+ $[60] = t23;
243
+ $[61] = t24;
244
+ $[62] = t25;
245
+ } else t25 = $[62];
246
+ let t26;
247
+ if ($[63] !== as || $[64] !== headerProps || $[65] !== inputContentProps || $[66] !== size || $[67] !== t25) {
248
+ t26 = /* @__PURE__ */ jsx(InputContent, {
242
249
  ...inputContentProps,
243
250
  headerProps,
244
251
  as,
245
252
  size,
246
- children: t24
247
- });
248
- $[61] = as;
249
- $[62] = headerProps;
250
- $[63] = inputContentProps;
251
- $[64] = size;
252
- $[65] = t24;
253
- $[66] = t25;
254
- } else t25 = $[66];
255
- let t26;
256
- if ($[67] !== dataIsDisabled || $[68] !== t13 || $[69] !== t15 || $[70] !== t16 || $[71] !== t25) {
257
- t26 = /* @__PURE__ */ jsx("div", {
258
- className: t13,
259
- onClick: t14,
260
- "data-is-empty": t15,
261
- "data-is-required": t16,
262
- "data-is-disabled": dataIsDisabled,
263
253
  children: t25
264
254
  });
265
- $[67] = dataIsDisabled;
266
- $[68] = t13;
267
- $[69] = t15;
268
- $[70] = t16;
269
- $[71] = t25;
270
- $[72] = t26;
271
- } else t26 = $[72];
255
+ $[63] = as;
256
+ $[64] = headerProps;
257
+ $[65] = inputContentProps;
258
+ $[66] = size;
259
+ $[67] = t25;
260
+ $[68] = t26;
261
+ } else t26 = $[68];
272
262
  let t27;
273
- if ($[73] !== T1 || $[74] !== as || $[75] !== formFieldProps || $[76] !== labelProps || $[77] !== t11 || $[78] !== t12 || $[79] !== t26) {
274
- t27 = /* @__PURE__ */ jsx(T1, {
263
+ if ($[69] !== dataIsDisabled || $[70] !== t14 || $[71] !== t16 || $[72] !== t17 || $[73] !== t26) {
264
+ t27 = /* @__PURE__ */ jsx("div", {
265
+ className: t14,
266
+ onClick: t15,
267
+ "data-is-empty": t16,
268
+ "data-is-required": t17,
269
+ "data-is-disabled": dataIsDisabled,
270
+ children: t26
271
+ });
272
+ $[69] = dataIsDisabled;
273
+ $[70] = t14;
274
+ $[71] = t16;
275
+ $[72] = t17;
276
+ $[73] = t26;
277
+ $[74] = t27;
278
+ } else t27 = $[74];
279
+ let t28;
280
+ if ($[75] !== T1 || $[76] !== as || $[77] !== formFieldProps || $[78] !== labelProps || $[79] !== t12 || $[80] !== t13 || $[81] !== t27) {
281
+ t28 = /* @__PURE__ */ jsx(T1, {
275
282
  ...formFieldProps,
276
283
  as,
277
284
  labelProps,
278
- className: t11,
279
- tabIndex: t12,
280
- children: t26
285
+ className: t12,
286
+ tabIndex: t13,
287
+ children: t27
281
288
  });
282
- $[73] = T1;
283
- $[74] = as;
284
- $[75] = formFieldProps;
285
- $[76] = labelProps;
286
- $[77] = t11;
287
- $[78] = t12;
288
- $[79] = t26;
289
- $[80] = t27;
290
- } else t27 = $[80];
291
- let t28;
292
- if ($[81] !== T0 || $[82] !== as || $[83] !== error || $[84] !== t10 || $[85] !== t27) {
293
- t28 = /* @__PURE__ */ jsx(T0, {
289
+ $[75] = T1;
290
+ $[76] = as;
291
+ $[77] = formFieldProps;
292
+ $[78] = labelProps;
293
+ $[79] = t12;
294
+ $[80] = t13;
295
+ $[81] = t27;
296
+ $[82] = t28;
297
+ } else t28 = $[82];
298
+ let t29;
299
+ if ($[83] !== T0 || $[84] !== as || $[85] !== error || $[86] !== t11 || $[87] !== t28) {
300
+ t29 = /* @__PURE__ */ jsx(T0, {
294
301
  as,
295
302
  error,
296
- triggerTabIndex: t10,
297
- children: t27
303
+ triggerTabIndex: t11,
304
+ children: t28
298
305
  });
299
- $[81] = T0;
300
- $[82] = as;
301
- $[83] = error;
302
- $[84] = t10;
303
- $[85] = t27;
304
- $[86] = t28;
305
- } else t28 = $[86];
306
- return t28;
306
+ $[83] = T0;
307
+ $[84] = as;
308
+ $[85] = error;
309
+ $[86] = t11;
310
+ $[87] = t28;
311
+ $[88] = t29;
312
+ } else t29 = $[88];
313
+ return t29;
307
314
  };
308
315
  var NumberInputInner = (t0) => {
309
316
  const $ = c(9);
package/dist/components/inputs/Skeleton/InputFrame.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { UIStyle } from "../../../config/uiStyle.context.js";
2
2
  import { typography } from "../../text/Typography/typography.cva.js";
3
- import { Loader } from "../../status/Loader/Loader.js";
4
3
  import { UIConfig } from "../../../config/uiConfig.context.js";
5
4
  import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
6
5
  import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
@@ -14,14 +13,14 @@ import { clsx } from "clsx";
14
13
  import { isValidElement, useId } from "react";
15
14
  //#region src/components/inputs/Skeleton/InputFrame.tsx
16
15
  var InputFrame = (props) => {
17
- const $ = c(182);
16
+ const $ = c(181);
18
17
  const ui = UIConfig.useConfig();
19
18
  const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
20
19
  const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
21
20
  const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
22
21
  const typographyCva = UIStyle.useCva("typography.cva", typography);
23
22
  const generatedInputId = useId();
24
- const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement: t0, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, contentAndTrailingClassName, wrapContentAndTrailing, wrapTrailingContent: t1, labelPlacement: t2, trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
23
+ const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement: t0, trailingContent, trailingIcon, trailingAction, unit, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, contentAndTrailingClassName, wrapContentAndTrailing, wrapTrailingContent: t1, labelPlacement: t2, trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
25
24
  const actionContentPlacement = t0 === void 0 ? "content-wrapper" : t0;
26
25
  const wrapTrailingContent = t1 === void 0 ? true : t1;
27
26
  const labelPlacement = t2 === void 0 ? "content-wrapper" : t2;
@@ -44,7 +43,7 @@ var InputFrame = (props) => {
44
43
  $[3] = t4;
45
44
  } else t4 = $[3];
46
45
  const isTrailingIconElement = t4;
47
- const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
46
+ const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!action || !!trailingIcon || !!trailingAction;
48
47
  const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
49
48
  let dataAttributeProps;
50
49
  let formFieldProps;
@@ -301,7 +300,7 @@ var InputFrame = (props) => {
301
300
  } else t15 = $[111];
302
301
  const contentRow = t15;
303
302
  let t16;
304
- if ($[112] !== action || $[113] !== clearClassName || $[114] !== hasClear || $[115] !== hasTrailingContent || $[116] !== isDisabled || $[117] !== isLoading || $[118] !== onClear || $[119] !== renderStatic || $[120] !== showClear || $[121] !== trailingAction || $[122] !== trailingContent || $[123] !== trailingIcon || $[124] !== typographyCva || $[125] !== unit) {
303
+ if ($[112] !== action || $[113] !== clearClassName || $[114] !== hasClear || $[115] !== hasTrailingContent || $[116] !== isDisabled || $[117] !== onClear || $[118] !== renderStatic || $[119] !== showClear || $[120] !== trailingAction || $[121] !== trailingContent || $[122] !== trailingIcon || $[123] !== typographyCva || $[124] !== unit) {
305
304
  t16 = hasTrailingContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
306
305
  hasClear && /* @__PURE__ */ jsx(InputClear, {
307
306
  onClear: () => onClear?.(),
@@ -319,11 +318,7 @@ var InputFrame = (props) => {
319
318
  }),
320
319
  children: unit
321
320
  }),
322
- isLoading && /* @__PURE__ */ jsx("div", {
323
- className: "inline-flex",
324
- children: /* @__PURE__ */ jsx(Loader, {})
325
- }),
326
- !isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
321
+ action && /* @__PURE__ */ jsx(InlineIconButton, {
327
322
  color: "secondary",
328
323
  icon: action.icon,
329
324
  isDisabled,
@@ -332,7 +327,7 @@ var InputFrame = (props) => {
332
327
  label: action.altText,
333
328
  className: clsx("border-0!", action.className)
334
329
  }),
335
- !isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
330
+ !action && trailingIcon && renderIconVisual(trailingIcon),
336
331
  trailingAction
337
332
  ] }) : null;
338
333
  $[112] = action;
@@ -340,20 +335,19 @@ var InputFrame = (props) => {
340
335
  $[114] = hasClear;
341
336
  $[115] = hasTrailingContent;
342
337
  $[116] = isDisabled;
343
- $[117] = isLoading;
344
- $[118] = onClear;
345
- $[119] = renderStatic;
346
- $[120] = showClear;
347
- $[121] = trailingAction;
348
- $[122] = trailingContent;
349
- $[123] = trailingIcon;
350
- $[124] = typographyCva;
351
- $[125] = unit;
352
- $[126] = t16;
353
- } else t16 = $[126];
338
+ $[117] = onClear;
339
+ $[118] = renderStatic;
340
+ $[119] = showClear;
341
+ $[120] = trailingAction;
342
+ $[121] = trailingContent;
343
+ $[122] = trailingIcon;
344
+ $[123] = typographyCva;
345
+ $[124] = unit;
346
+ $[125] = t16;
347
+ } else t16 = $[125];
354
348
  const trailingContentNodes = t16;
355
349
  let t17;
356
- if ($[127] !== as || $[128] !== inputSizeCva || $[129] !== isTrailingInteractive || $[130] !== size || $[131] !== trailingClassName || $[132] !== trailingContentNodes || $[133] !== wrapTrailingContent) {
350
+ if ($[126] !== as || $[127] !== inputSizeCva || $[128] !== isTrailingInteractive || $[129] !== size || $[130] !== trailingClassName || $[131] !== trailingContentNodes || $[132] !== wrapTrailingContent) {
357
351
  t17 = wrapTrailingContent && trailingContentNodes ? /* @__PURE__ */ jsx("div", {
358
352
  className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
359
353
  size,
@@ -361,70 +355,70 @@ var InputFrame = (props) => {
361
355
  }), !isTrailingInteractive && "pointer-events-none", trailingClassName),
362
356
  children: trailingContentNodes
363
357
  }) : trailingContentNodes;
364
- $[127] = as;
365
- $[128] = inputSizeCva;
366
- $[129] = isTrailingInteractive;
367
- $[130] = size;
368
- $[131] = trailingClassName;
369
- $[132] = trailingContentNodes;
370
- $[133] = wrapTrailingContent;
371
- $[134] = t17;
372
- } else t17 = $[134];
358
+ $[126] = as;
359
+ $[127] = inputSizeCva;
360
+ $[128] = isTrailingInteractive;
361
+ $[129] = size;
362
+ $[130] = trailingClassName;
363
+ $[131] = trailingContentNodes;
364
+ $[132] = wrapTrailingContent;
365
+ $[133] = t17;
366
+ } else t17 = $[133];
373
367
  const trailingRow = t17;
374
368
  let t18;
375
- if ($[135] !== contentAndTrailingClassName || $[136] !== contentRow || $[137] !== trailingRow || $[138] !== wrapContentAndTrailing) {
369
+ if ($[134] !== contentAndTrailingClassName || $[135] !== contentRow || $[136] !== trailingRow || $[137] !== wrapContentAndTrailing) {
376
370
  t18 = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
377
371
  className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
378
372
  children: [contentRow, trailingRow]
379
373
  }) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
380
- $[135] = contentAndTrailingClassName;
381
- $[136] = contentRow;
382
- $[137] = trailingRow;
383
- $[138] = wrapContentAndTrailing;
384
- $[139] = t18;
385
- } else t18 = $[139];
374
+ $[134] = contentAndTrailingClassName;
375
+ $[135] = contentRow;
376
+ $[136] = trailingRow;
377
+ $[137] = wrapContentAndTrailing;
378
+ $[138] = t18;
379
+ } else t18 = $[138];
386
380
  const inputFrameContent = t18;
387
381
  const t19 = as === "inline" ? -1 : void 0;
388
382
  const t20 = as === "inline" ? -1 : void 0;
389
383
  let t21;
390
- if ($[140] !== onMouseEnter || $[141] !== onStaticInteract || $[142] !== renderStatic) {
384
+ if ($[139] !== onMouseEnter || $[140] !== onStaticInteract || $[141] !== renderStatic) {
391
385
  t21 = (event) => {
392
386
  onMouseEnter?.(event);
393
387
  if (renderStatic) onStaticInteract?.(false);
394
388
  };
395
- $[140] = onMouseEnter;
396
- $[141] = onStaticInteract;
397
- $[142] = renderStatic;
398
- $[143] = t21;
399
- } else t21 = $[143];
389
+ $[139] = onMouseEnter;
390
+ $[140] = onStaticInteract;
391
+ $[141] = renderStatic;
392
+ $[142] = t21;
393
+ } else t21 = $[142];
400
394
  let t22;
401
- if ($[144] !== onFocusCapture || $[145] !== onStaticInteract || $[146] !== renderStatic) {
395
+ if ($[143] !== onFocusCapture || $[144] !== onStaticInteract || $[145] !== renderStatic) {
402
396
  t22 = (event_0) => {
403
397
  onFocusCapture?.(event_0);
404
398
  if (renderStatic) onStaticInteract?.(true);
405
399
  };
406
- $[144] = onFocusCapture;
407
- $[145] = onStaticInteract;
408
- $[146] = renderStatic;
409
- $[147] = t22;
410
- } else t22 = $[147];
400
+ $[143] = onFocusCapture;
401
+ $[144] = onStaticInteract;
402
+ $[145] = renderStatic;
403
+ $[146] = t22;
404
+ } else t22 = $[146];
411
405
  let t23;
412
- if ($[148] !== as || $[149] !== inputBaseCva || $[150] !== inputClassName || $[151] !== variant) {
406
+ if ($[147] !== as || $[148] !== inputBaseCva || $[149] !== inputClassName || $[150] !== variant) {
413
407
  t23 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
414
408
  variant,
415
409
  as
416
410
  }), inputClassName);
417
- $[148] = as;
418
- $[149] = inputBaseCva;
419
- $[150] = inputClassName;
420
- $[151] = variant;
421
- $[152] = t23;
422
- } else t23 = $[152];
411
+ $[147] = as;
412
+ $[148] = inputBaseCva;
413
+ $[149] = inputClassName;
414
+ $[150] = variant;
415
+ $[151] = t23;
416
+ } else t23 = $[151];
423
417
  const t24 = renderStatic ? isDisabled ? -1 : 0 : void 0;
424
418
  let t25;
425
419
  let t26;
426
420
  let t27;
427
- if ($[153] !== onStaticInteract || $[154] !== renderStatic) {
421
+ if ($[152] !== onStaticInteract || $[153] !== renderStatic) {
428
422
  t25 = () => {
429
423
  if (renderStatic) onStaticInteract?.(true);
430
424
  };
@@ -434,18 +428,18 @@ var InputFrame = (props) => {
434
428
  t27 = () => {
435
429
  if (renderStatic) onStaticInteract?.(true);
436
430
  };
437
- $[153] = onStaticInteract;
438
- $[154] = renderStatic;
439
- $[155] = t25;
440
- $[156] = t26;
441
- $[157] = t27;
431
+ $[152] = onStaticInteract;
432
+ $[153] = renderStatic;
433
+ $[154] = t25;
434
+ $[155] = t26;
435
+ $[156] = t27;
442
436
  } else {
443
- t25 = $[155];
444
- t26 = $[156];
445
- t27 = $[157];
437
+ t25 = $[154];
438
+ t26 = $[155];
439
+ t27 = $[156];
446
440
  }
447
441
  let t28;
448
- if ($[158] !== dataAttributeProps || $[159] !== inputFrameContent || $[160] !== ref || $[161] !== t23 || $[162] !== t24 || $[163] !== t25 || $[164] !== t26 || $[165] !== t27) {
442
+ if ($[157] !== dataAttributeProps || $[158] !== inputFrameContent || $[159] !== ref || $[160] !== t23 || $[161] !== t24 || $[162] !== t25 || $[163] !== t26 || $[164] !== t27) {
449
443
  t28 = /* @__PURE__ */ jsx("div", {
450
444
  ref,
451
445
  ...dataAttributeProps,
@@ -457,18 +451,18 @@ var InputFrame = (props) => {
457
451
  "data-rac": "",
458
452
  children: inputFrameContent
459
453
  });
460
- $[158] = dataAttributeProps;
461
- $[159] = inputFrameContent;
462
- $[160] = ref;
463
- $[161] = t23;
464
- $[162] = t24;
465
- $[163] = t25;
466
- $[164] = t26;
467
- $[165] = t27;
468
- $[166] = t28;
469
- } else t28 = $[166];
454
+ $[157] = dataAttributeProps;
455
+ $[158] = inputFrameContent;
456
+ $[159] = ref;
457
+ $[160] = t23;
458
+ $[161] = t24;
459
+ $[162] = t25;
460
+ $[163] = t26;
461
+ $[164] = t27;
462
+ $[165] = t28;
463
+ } else t28 = $[165];
470
464
  let t29;
471
- if ($[167] !== as || $[168] !== dataAttributeProps || $[169] !== formFieldProps || $[170] !== formFieldRef || $[171] !== labelProps || $[172] !== t20 || $[173] !== t21 || $[174] !== t22 || $[175] !== t28) {
465
+ if ($[166] !== as || $[167] !== dataAttributeProps || $[168] !== formFieldProps || $[169] !== formFieldRef || $[170] !== labelProps || $[171] !== t20 || $[172] !== t21 || $[173] !== t22 || $[174] !== t28) {
472
466
  t29 = /* @__PURE__ */ jsx(FormField, {
473
467
  ...formFieldProps,
474
468
  ...dataAttributeProps,
@@ -480,31 +474,31 @@ var InputFrame = (props) => {
480
474
  onFocusCapture: t22,
481
475
  children: t28
482
476
  });
483
- $[167] = as;
484
- $[168] = dataAttributeProps;
485
- $[169] = formFieldProps;
486
- $[170] = formFieldRef;
487
- $[171] = labelProps;
488
- $[172] = t20;
489
- $[173] = t21;
490
- $[174] = t22;
491
- $[175] = t28;
492
- $[176] = t29;
493
- } else t29 = $[176];
477
+ $[166] = as;
478
+ $[167] = dataAttributeProps;
479
+ $[168] = formFieldProps;
480
+ $[169] = formFieldRef;
481
+ $[170] = labelProps;
482
+ $[171] = t20;
483
+ $[172] = t21;
484
+ $[173] = t22;
485
+ $[174] = t28;
486
+ $[175] = t29;
487
+ } else t29 = $[175];
494
488
  let t30;
495
- if ($[177] !== as || $[178] !== error || $[179] !== t19 || $[180] !== t29) {
489
+ if ($[176] !== as || $[177] !== error || $[178] !== t19 || $[179] !== t29) {
496
490
  t30 = /* @__PURE__ */ jsx(TooltipWrapper, {
497
491
  as,
498
492
  error,
499
493
  triggerTabIndex: t19,
500
494
  children: t29
501
495
  });
502
- $[177] = as;
503
- $[178] = error;
504
- $[179] = t19;
505
- $[180] = t29;
506
- $[181] = t30;
507
- } else t30 = $[181];
496
+ $[176] = as;
497
+ $[177] = error;
498
+ $[178] = t19;
499
+ $[179] = t29;
500
+ $[180] = t30;
501
+ } else t30 = $[180];
508
502
  return t30;
509
503
  };
510
504
  var renderIconVisual = (icon) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@povio/ui",
3
- "version": "2.3.0-rc.22",
3
+ "version": "2.3.0-rc.24",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",