@ledgerhq/lumen-ui-react 0.1.55 → 0.1.56

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 (36) hide show
  1. package/dist/lib/Components/core/Card/Card.d.ts.map +1 -1
  2. package/dist/lib/Components/core/Card/Card.js +29 -25
  3. package/dist/lib/Components/core/SearchInput/types.d.ts +2 -2
  4. package/dist/lib/Components/core/SearchInput/types.d.ts.map +1 -1
  5. package/dist/lib/Components/core/TextInput/types.d.ts +1 -2
  6. package/dist/lib/Components/core/TextInput/types.d.ts.map +1 -1
  7. package/dist/lib/Components/internal/BaseInput/BaseInput.d.ts +2 -16
  8. package/dist/lib/Components/internal/BaseInput/BaseInput.d.ts.map +1 -1
  9. package/dist/lib/Components/internal/BaseInput/BaseInput.js +141 -168
  10. package/dist/lib/Components/internal/BaseInput/BaseInputCounter.d.ts +8 -0
  11. package/dist/lib/Components/internal/BaseInput/BaseInputCounter.d.ts.map +1 -0
  12. package/dist/lib/Components/internal/BaseInput/BaseInputCounter.js +8 -0
  13. package/dist/lib/Components/internal/BaseInput/BaseInputHelperText.d.ts +8 -0
  14. package/dist/lib/Components/internal/BaseInput/BaseInputHelperText.d.ts.map +1 -0
  15. package/dist/lib/Components/internal/BaseInput/BaseInputHelperText.js +37 -0
  16. package/dist/lib/Components/internal/BaseInput/BaseInputLabel.d.ts +8 -0
  17. package/dist/lib/Components/internal/BaseInput/BaseInputLabel.d.ts.map +1 -0
  18. package/dist/lib/Components/internal/BaseInput/BaseInputLabel.js +48 -0
  19. package/dist/lib/Components/internal/BaseInput/BaseInputMultiline.d.ts +9 -0
  20. package/dist/lib/Components/internal/BaseInput/BaseInputMultiline.d.ts.map +1 -0
  21. package/dist/lib/Components/internal/BaseInput/BaseInputMultiline.js +88 -0
  22. package/dist/lib/Components/internal/BaseInput/BaseInputSingleLine.d.ts +8 -0
  23. package/dist/lib/Components/internal/BaseInput/BaseInputSingleLine.d.ts.map +1 -0
  24. package/dist/lib/Components/internal/BaseInput/BaseInputSingleLine.js +25 -0
  25. package/dist/lib/Components/internal/BaseInput/types.d.ts +72 -1
  26. package/dist/lib/Components/internal/BaseInput/types.d.ts.map +1 -1
  27. package/dist/lib/Components/internal/BaseInput/useAutosizeTextarea/index.d.ts +2 -0
  28. package/dist/lib/Components/internal/BaseInput/useAutosizeTextarea/index.d.ts.map +1 -0
  29. package/dist/lib/Components/internal/BaseInput/useAutosizeTextarea/useAutosizeTextarea.d.ts +20 -0
  30. package/dist/lib/Components/internal/BaseInput/useAutosizeTextarea/useAutosizeTextarea.d.ts.map +1 -0
  31. package/dist/lib/Components/internal/BaseInput/useAutosizeTextarea/useAutosizeTextarea.js +49 -0
  32. package/dist/lib/Components/internal/BaseInput/useBaseInputValue/useBaseInputValue.d.ts +26 -0
  33. package/dist/lib/Components/internal/BaseInput/useBaseInputValue/useBaseInputValue.d.ts.map +1 -0
  34. package/dist/lib/Components/internal/BaseInput/useBaseInputValue/useBaseInputValue.js +35 -0
  35. package/dist/package.json +1 -1
  36. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/Card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,uBAAuB,GAAI,wCAKrC;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACjC,KAAG,gBA2BH,CAAC;AAiDF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,qFAUlB,SAAS,4CAkCX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,wCAKxB,eAAe,4CA8BjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAUlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAkBlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wCAK5B,mBAAmB,4CAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAmB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,wCAK1B,iBAAiB,4CAqBnB,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,4CA4BjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAQxB,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/Card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,uBAAuB,GAAI,wCAKrC;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACjC,KAAG,gBA2BH,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,qFAUlB,SAAS,4CAwCX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,wCAKxB,eAAe,4CA8BjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAUlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAkBlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wCAK5B,mBAAmB,4CAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAmB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,wCAK1B,iBAAiB,4CAqBnB,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,4CA4BjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAQxB,CAAC"}
@@ -1,4 +1,4 @@
1
- import { jsx as n, jsxs as f, Fragment as p } from "react/jsx-runtime";
1
+ import { jsx as n, jsxs as f, Fragment as b } from "react/jsx-runtime";
2
2
  import { createSafeContext as m, DisabledProvider as g, cn as o, getButtonA11yProps as C } from "../../../../libs/utils-shared/dist/index.js";
3
3
  import { cva as v } from "class-variance-authority";
4
4
  import { useMemo as h } from "react";
@@ -47,17 +47,13 @@ const k = ({
47
47
  ), [q, x] = m("CardContentAlign", {
48
48
  align: "left"
49
49
  }), E = v(
50
- "flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
50
+ "relative flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
51
51
  {
52
52
  variants: {
53
53
  interactive: {
54
54
  true: "cursor-pointer hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:bg-surface-pressed",
55
55
  false: ""
56
56
  },
57
- outlined: {
58
- true: "border-2 border-active",
59
- false: ""
60
- },
61
57
  disabled: {
62
58
  true: "cursor-default",
63
59
  false: ""
@@ -72,7 +68,6 @@ const k = ({
72
68
  ],
73
69
  defaultVariants: {
74
70
  interactive: !1,
75
- outlined: !1,
76
71
  disabled: !1
77
72
  }
78
73
  }
@@ -83,34 +78,43 @@ const k = ({
83
78
  expanded: e,
84
79
  outlined: s = !1,
85
80
  disabled: i = !1,
86
- onClick: l,
87
- children: d,
88
- ...b
81
+ onClick: d,
82
+ children: l,
83
+ ...p
89
84
  }) => {
90
85
  const u = h(
91
86
  () => k({
92
87
  type: a,
93
88
  expanded: e,
94
- onClick: l,
89
+ onClick: d,
95
90
  disabled: i
96
91
  }),
97
- [a, e, l, i]
92
+ [a, e, d, i]
98
93
  );
99
- return /* @__PURE__ */ n(R, { value: u, children: /* @__PURE__ */ n(g, { value: { disabled: i }, children: /* @__PURE__ */ n(
94
+ return /* @__PURE__ */ n(R, { value: u, children: /* @__PURE__ */ n(g, { value: { disabled: i }, children: /* @__PURE__ */ f(
100
95
  "div",
101
96
  {
102
97
  ref: r,
103
- ...u.cardClickable && C({ onClick: l, disabled: i }),
98
+ ...u.cardClickable && C({ onClick: d, disabled: i }),
104
99
  className: o(
105
100
  E({
106
101
  interactive: u.cardClickable,
107
- outlined: s,
108
102
  disabled: i
109
103
  }),
110
104
  t
111
105
  ),
112
- ...b,
113
- children: d
106
+ ...p,
107
+ children: [
108
+ l,
109
+ s && /* @__PURE__ */ n(
110
+ "span",
111
+ {
112
+ "data-testid": "card-outline",
113
+ className: "pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-active",
114
+ "aria-hidden": "true"
115
+ }
116
+ )
117
+ ]
114
118
  }
115
119
  ) }) });
116
120
  }, T = ({
@@ -119,7 +123,7 @@ const k = ({
119
123
  className: a,
120
124
  ...e
121
125
  }) => {
122
- const { disabled: s, headerClickable: i, footerExpanded: l, onHeaderClick: d } = c({
126
+ const { disabled: s, headerClickable: i, footerExpanded: d, onHeaderClick: l } = c({
123
127
  consumerName: "CardHeader",
124
128
  contextRequired: !1
125
129
  });
@@ -127,8 +131,8 @@ const k = ({
127
131
  "div",
128
132
  {
129
133
  ref: r,
130
- "aria-expanded": d ? l : void 0,
131
- ...C({ onClick: d, disabled: s }),
134
+ "aria-expanded": l ? d : void 0,
135
+ ...C({ onClick: l, disabled: s }),
132
136
  className: o(
133
137
  "flex items-center gap-12 p-12",
134
138
  i && "cursor-pointer -outline-offset-6 transition-colors hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-surface-pressed",
@@ -137,9 +141,9 @@ const k = ({
137
141
  ...e,
138
142
  children: [
139
143
  t,
140
- d && /* @__PURE__ */ f(p, { children: [
141
- l && /* @__PURE__ */ n(N, { className: "text-muted", size: 20 }),
142
- !l && /* @__PURE__ */ n(w, { className: "text-muted", size: 20 })
144
+ l && /* @__PURE__ */ f(b, { children: [
145
+ d && /* @__PURE__ */ n(N, { className: "text-muted", size: 20 }),
146
+ !d && /* @__PURE__ */ n(w, { className: "text-muted", size: 20 })
143
147
  ] })
144
148
  ]
145
149
  }
@@ -292,7 +296,7 @@ const k = ({
292
296
  appearance: e = "plain",
293
297
  ...s
294
298
  }) => {
295
- const { disabled: i, footerExpanded: l } = c({
299
+ const { disabled: i, footerExpanded: d } = c({
296
300
  consumerName: "CardFooter",
297
301
  contextRequired: !1
298
302
  });
@@ -301,7 +305,7 @@ const k = ({
301
305
  {
302
306
  className: o(
303
307
  H({ appearance: e }),
304
- l ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
308
+ d ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
305
309
  ),
306
310
  children: /* @__PURE__ */ n("div", { className: "overflow-hidden", children: /* @__PURE__ */ n(
307
311
  "div",
@@ -1,10 +1,10 @@
1
1
  import { ComponentPropsWithRef } from 'react';
2
2
  import { BaseInputProps } from '../../internal/BaseInput/types';
3
- export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName'> & {
3
+ export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName' | 'multiline' | 'minLines' | 'maxLines' | 'scrollbarWidth' | 'ref' | 'onChange'> & Pick<ComponentPropsWithRef<'input'>, 'ref' | 'onChange'> & {
4
4
  /**
5
5
  * The visual appearance of the search input
6
6
  * @default 'plain'
7
7
  */
8
8
  appearance?: 'plain' | 'transparent';
9
- } & ComponentPropsWithRef<'input'>;
9
+ };
10
10
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,QAAQ,GAAG,OAAO,GAAG,gBAAgB,CACtC,GAAG;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACZ,QAAQ,GACR,OAAO,GACP,gBAAgB,GAChB,WAAW,GACX,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,KAAK,GACL,UAAU,CACb,GACC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,CAAC"}
@@ -1,4 +1,3 @@
1
- import { ComponentPropsWithRef } from 'react';
2
1
  import { BaseInputProps } from '../../internal/BaseInput/types';
3
- export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' | 'inputClassName'> & ComponentPropsWithRef<'input'>;
2
+ export type TextInputProps = Omit<BaseInputProps, 'prefix' | 'labelClassName' | 'inputClassName'>;
4
3
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,cAAc,EACd,QAAQ,GAAG,gBAAgB,GAAG,gBAAgB,CAC/C,GACC,qBAAqB,CAAC,OAAO,CAAC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,cAAc,EACd,QAAQ,GAAG,gBAAgB,GAAG,gBAAgB,CAC/C,CAAC"}
@@ -1,22 +1,8 @@
1
1
  import { BaseInputProps } from './types';
2
2
  /**
3
- * Base input component with floating label, error state styling, and clear button functionality.
4
- * Shows a clear button by default when input has content. Use hideClearButton to hide it.
5
- * This is an internal component used to build other input components.
6
- *
7
- * Features:
8
- * - Automatic clear button that works with both controlled and uncontrolled inputs
9
- * - Native-like clear behavior using HTMLInputElement.prototype.value setter
10
- * - Proper event dispatching that React can intercept for controlled components
11
- * - Floating label with smooth transitions
12
- * - Error state styling and accessibility
13
- *
14
- * Supports className customization for different elements:
15
- * - `className`: Applied to the container/root element
16
- * - `inputClassName`: Applied to the input element
17
- * - `labelClassName`: Applied to the floating label element
3
+ * Internal field chrome shared by `TextInput`, `SearchInput`, and `AddressInput`.
18
4
  *
19
5
  * @internal
20
6
  */
21
- export declare const BaseInput: ({ ref, className, containerClassName, inputClassName, labelClassName, label, id, disabled: disabledProp, helperText, maxCount, status, suffix, prefix, onClear, hideClearButton, readOnly, "aria-invalid": ariaInvalidProp, onChange: onChangeProp, placeholder: placeholderProp, ...props }: BaseInputProps) => import("react/jsx-runtime").JSX.Element;
7
+ export declare const BaseInput: ({ ref, className, containerClassName, inputClassName, labelClassName, label, id, disabled: disabledProp, helperText, maxCount, status, suffix, prefix, onClear, hideClearButton, readOnly, "aria-invalid": ariaInvalidProp, onChange: onChangeProp, placeholder: placeholderProp, multiline, minLines, maxLines, scrollbarWidth, type, ...props }: BaseInputProps) => import("react/jsx-runtime").JSX.Element;
22
8
  //# sourceMappingURL=BaseInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,SAAS,CAAC;AAuEjB;;;;;;;;;;;;;;;;;;GAkBG;AAEH,eAAO,MAAM,SAAS,GAAI,8RAqBvB,cAAc,4CAiLhB,CAAC"}
1
+ {"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAsC9C;;;;GAIG;AAEH,eAAO,MAAM,SAAS,GAAI,mVA0BvB,cAAc,4CA4JhB,CAAC"}
@@ -1,15 +1,19 @@
1
- import { jsxs as f, jsx as e } from "react/jsx-runtime";
2
- import { useDisabledContext as X, resolveBaseInputPlaceholder as Y, useMergedRef as Z, cn as s } from "../../../../libs/utils-shared/dist/index.js";
3
- import { cva as g } from "class-variance-authority";
4
- import { useRef as _, useId as ee, useState as te, useCallback as re } from "react";
5
- import { useCommonTranslation as se } from "../../../../i18n/useCommonTranslation.js";
6
- import { InteractiveIcon as ae } from "../../core/InteractiveIcon/InteractiveIcon.js";
7
- import { DeleteCircleFill as B } from "../../symbols/icons/DeleteCircleFill.js";
8
- import { InformationFill as oe } from "../../symbols/icons/InformationFill.js";
9
- import { CheckmarkCircleFill as ne } from "../../symbols/icons/CheckmarkCircleFill.js";
10
- const le = g(
1
+ import { jsx as e, jsxs as d } from "react/jsx-runtime";
2
+ import { useDisabledContext as Z, resolveBaseInputPlaceholder as _, cn as I } from "../../../../libs/utils-shared/dist/index.js";
3
+ import { cva as O } from "class-variance-authority";
4
+ import { useId as ee } from "react";
5
+ import { BaseInputCounter as te } from "./BaseInputCounter.js";
6
+ import { BaseInputHelperText as ae } from "./BaseInputHelperText.js";
7
+ import { BaseInputLabel as re } from "./BaseInputLabel.js";
8
+ import { BaseInputMultiline as ne } from "./BaseInputMultiline.js";
9
+ import { BaseInputSingleLine as se } from "./BaseInputSingleLine.js";
10
+ import { useBaseInputValue as ie } from "./useBaseInputValue/useBaseInputValue.js";
11
+ import { useCommonTranslation as oe } from "../../../../i18n/useCommonTranslation.js";
12
+ import { InteractiveIcon as le } from "../../core/InteractiveIcon/InteractiveIcon.js";
13
+ import { DeleteCircleFill as ce } from "../../symbols/icons/DeleteCircleFill.js";
14
+ const ue = O(
11
15
  [
12
- "group relative flex h-48 w-full cursor-text items-center gap-8 rounded-sm bg-muted px-16 transition-colors",
16
+ "group relative flex w-full cursor-text gap-8 rounded-sm bg-muted px-16 transition-colors",
13
17
  "focus-within:ring-2 focus-within:ring-active hover:bg-muted-hover",
14
18
  "has-disabled:cursor-not-allowed has-disabled:bg-disabled has-disabled:text-disabled"
15
19
  ],
@@ -19,202 +23,171 @@ const le = g(
19
23
  default: "",
20
24
  error: "ring-1 ring-error focus-within:ring-2 focus-within:ring-error",
21
25
  success: "ring-1 ring-success focus-within:ring-2 focus-within:ring-success"
26
+ },
27
+ multiline: {
28
+ true: "min-h-48 items-start",
29
+ false: "h-48 items-center"
30
+ },
31
+ hasLabel: {
32
+ true: "",
33
+ false: ""
22
34
  }
23
35
  },
36
+ compoundVariants: [
37
+ { multiline: !0, hasLabel: !0, class: "py-6" },
38
+ { multiline: !0, hasLabel: !1, class: "pt-12 pb-10" }
39
+ ],
24
40
  defaultVariants: {
25
- status: "default"
41
+ status: "default",
42
+ multiline: !1,
43
+ hasLabel: !1
26
44
  }
27
45
  }
28
- ), ie = s(
29
- "peer w-full flex-1 bg-muted body-1 text-base caret-active outline-hidden transition-colors",
30
- "group-hover:bg-muted-hover group-disabled:bg-disabled",
31
- "group-has-disabled:cursor-not-allowed group-has-disabled:bg-disabled group-has-disabled:text-disabled",
32
- "placeholder:text-muted group-has-disabled:placeholder:text-disabled",
33
- "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
34
- "truncate"
35
- ), ce = s(
36
- "pointer-events-none absolute top-6 left-16 origin-left body-4 text-muted transition-all duration-300",
37
- "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:body-2",
38
- "group-has-disabled:text-disabled",
39
- "peer-focus:top-6 peer-focus:translate-y-0 peer-focus:body-4",
40
- "w-[calc(100%-var(--size-56))] truncate"
41
- ), de = g(ce, {
42
- variants: {
43
- status: {
44
- default: "",
45
- error: "text-error",
46
- success: ""
47
- },
48
- floated: {
49
- true: "peer-placeholder-shown:top-6 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:body-4",
50
- false: ""
51
- }
52
- },
53
- defaultVariants: {
54
- status: "default",
55
- floated: !1
56
- }
57
- }), ue = g("flex items-center gap-2 body-3", {
58
- variants: {
59
- status: {
60
- default: "text-muted",
61
- error: "text-error",
62
- success: "text-success"
63
- }
64
- },
65
- defaultVariants: {
66
- status: "default"
67
- }
68
- }), Ce = ({
69
- ref: a,
70
- className: o,
71
- containerClassName: t,
72
- inputClassName: F,
46
+ ), Ve = ({
47
+ ref: w,
48
+ className: B,
49
+ containerClassName: C,
50
+ inputClassName: L,
73
51
  labelClassName: P,
74
- label: i,
75
- id: j,
76
- disabled: z,
77
- helperText: b,
78
- maxCount: c,
79
- status: d,
80
- suffix: R,
81
- prefix: D,
82
- onClear: $,
83
- hideClearButton: E = !1,
84
- readOnly: v = !1,
85
- "aria-invalid": H,
86
- onChange: w,
87
- placeholder: L,
88
- ...u
52
+ label: t,
53
+ id: V,
54
+ disabled: x,
55
+ helperText: l,
56
+ maxCount: r,
57
+ status: n,
58
+ suffix: y,
59
+ prefix: N,
60
+ onClear: j,
61
+ hideClearButton: F = !1,
62
+ readOnly: m = !1,
63
+ "aria-invalid": D,
64
+ onChange: R,
65
+ placeholder: S,
66
+ multiline: s = !1,
67
+ minLines: A,
68
+ maxLines: H,
69
+ scrollbarWidth: W,
70
+ type: $,
71
+ ...i
89
72
  }) => {
90
- const x = X({
73
+ const h = Z({
91
74
  consumerName: "BaseInput",
92
- mergeWith: { disabled: z }
93
- }), { t: A } = se(), r = _(null), M = ee(), m = j || `input-${M}`, T = H ?? (d === "error" ? !0 : void 0), p = u.value !== void 0, [W, y] = te(
94
- u.defaultValue?.toString() ?? ""
95
- ), q = re(
96
- (n) => {
97
- p || y(n.target.value), w?.(n);
98
- },
99
- [p, w]
100
- ), I = p ? u.value?.toString() ?? "" : W, O = I.length > 0, { inputPlaceholder: U, labelStaysFloatedWithPlaceholder: G } = Y({
101
- label: i,
102
- placeholder: L
103
- }), C = O && !x && !v && !E, J = I.length, N = !!(c && c > 0), V = `${m}-helper`, h = !!b, K = () => {
104
- if (!r.current) return;
105
- Object.getOwnPropertyDescriptor(
106
- window.HTMLInputElement.prototype,
107
- "value"
108
- )?.set?.call(r.current, ""), p || y("");
109
- const S = new Event("input", { bubbles: !0 });
110
- r.current.dispatchEvent(S), r.current.focus(), $?.();
111
- }, Q = Z(a, r);
112
- return /* @__PURE__ */ f("div", { className: o, children: [
113
- /* @__PURE__ */ f(
75
+ mergeWith: { disabled: x }
76
+ }), { t: k } = oe(), {
77
+ inputRef: q,
78
+ composedRef: f,
79
+ currentValue: z,
80
+ hasContent: M,
81
+ handleChange: T,
82
+ handleClear: E
83
+ } = ie({
84
+ value: i.value,
85
+ defaultValue: i.defaultValue,
86
+ onChange: R,
87
+ onClear: j,
88
+ ref: w
89
+ }), G = ee(), c = V || `input-${G}`, J = D ?? (n === "error" ? !0 : void 0), { inputPlaceholder: K, labelStaysFloatedWithPlaceholder: Q } = _({
90
+ label: t,
91
+ placeholder: S
92
+ }), U = M && !h && !m && !F, X = z.length, p = !!(r && r > 0), g = `${c}-helper`, o = !!l, b = {
93
+ id: c,
94
+ disabled: h,
95
+ readOnly: m,
96
+ placeholder: K,
97
+ "aria-invalid": J,
98
+ "aria-describedby": o ? g : void 0,
99
+ hasLabel: !!t,
100
+ className: L,
101
+ onChange: T
102
+ }, u = U ? /* @__PURE__ */ e(
103
+ le,
104
+ {
105
+ iconType: "filled",
106
+ icon: ce,
107
+ size: 20,
108
+ onClick: E,
109
+ "aria-label": k("components.baseInput.clearInputAriaLabel")
110
+ }
111
+ ) : y;
112
+ return /* @__PURE__ */ d("div", { className: B, children: [
113
+ /* @__PURE__ */ d(
114
114
  "div",
115
115
  {
116
- className: s(le({ status: d }), t),
117
- onPointerDown: (n) => {
118
- if (n.target.closest("input, button, a")) return;
119
- const l = r.current;
120
- if (!l) return;
121
- const k = l.value.length > 0 ? l.value.length : 0;
116
+ className: I(
117
+ ue({ status: n, multiline: s, hasLabel: !!t }),
118
+ C
119
+ ),
120
+ onPointerDown: (Y) => {
121
+ if (Y.target.closest("input, textarea, button, a")) return;
122
+ const a = q.current;
123
+ if (!a) return;
124
+ const v = a.value.length > 0 ? a.value.length : 0;
122
125
  window.requestAnimationFrame(() => {
123
126
  try {
124
- l.setSelectionRange(k, k);
127
+ a.setSelectionRange(v, v);
125
128
  } catch {
126
129
  }
127
- l.focus();
130
+ a.focus();
128
131
  });
129
132
  },
130
133
  children: [
131
- D,
132
- /* @__PURE__ */ e(
133
- "input",
134
+ N,
135
+ s ? /* @__PURE__ */ e(
136
+ ne,
134
137
  {
135
- ref: Q,
136
- id: m,
137
- disabled: x,
138
- readOnly: v,
139
- placeholder: U,
140
- "aria-invalid": T,
141
- "aria-describedby": h ? V : void 0,
142
- className: s(
143
- ie,
144
- i && "pt-12 body-2",
145
- F
146
- ),
147
- onChange: q,
148
- ...u
138
+ ref: f,
139
+ minLines: A,
140
+ maxLines: H,
141
+ scrollbarWidth: W,
142
+ ...b,
143
+ ...i
149
144
  }
150
- ),
151
- i && /* @__PURE__ */ e(
152
- "label",
145
+ ) : /* @__PURE__ */ e(
146
+ se,
153
147
  {
154
- htmlFor: m,
155
- className: s(
156
- de({
157
- status: d,
158
- floated: G
159
- }),
160
- P
161
- ),
162
- children: i
148
+ ref: f,
149
+ type: $,
150
+ ...b,
151
+ ...i
163
152
  }
164
153
  ),
165
- C && /* @__PURE__ */ e(
166
- ae,
154
+ t && /* @__PURE__ */ e(
155
+ re,
167
156
  {
168
- iconType: "filled",
169
- icon: B,
170
- size: 20,
171
- onClick: K,
172
- "aria-label": A("components.baseInput.clearInputAriaLabel")
157
+ htmlFor: c,
158
+ status: n,
159
+ floated: Q,
160
+ multiline: s,
161
+ className: P,
162
+ children: t
173
163
  }
174
164
  ),
175
- !C && R
165
+ s && u ? /* @__PURE__ */ e("div", { className: "pt-2", children: u }) : u
176
166
  ]
177
167
  }
178
168
  ),
179
- (h || N) && /* @__PURE__ */ f(
169
+ (o || p) && /* @__PURE__ */ d(
180
170
  "div",
181
171
  {
182
- className: s(
172
+ className: I(
183
173
  "mt-8 flex items-start gap-8",
184
- h ? "justify-between" : "justify-end"
174
+ o ? "justify-between" : "justify-end"
185
175
  ),
186
176
  children: [
187
- h && b && /* @__PURE__ */ e(
188
- pe,
177
+ o && l && /* @__PURE__ */ e(
178
+ ae,
189
179
  {
190
- id: V,
191
- helperText: b,
192
- status: d
180
+ id: g,
181
+ helperText: l,
182
+ status: n
193
183
  }
194
184
  ),
195
- N && c != null && /* @__PURE__ */ e(he, { count: J, maxCount: c })
185
+ p && r != null && /* @__PURE__ */ e(te, { count: X, maxCount: r })
196
186
  ]
197
187
  }
198
188
  )
199
189
  ] });
200
- }, pe = ({
201
- id: a,
202
- helperText: o,
203
- status: t
204
- }) => /* @__PURE__ */ f(
205
- "div",
206
- {
207
- id: a,
208
- className: ue({ status: t }),
209
- role: t === "error" ? "alert" : void 0,
210
- children: [
211
- !t && /* @__PURE__ */ e(oe, { size: 16, className: "text-muted" }),
212
- t === "error" && /* @__PURE__ */ e(B, { size: 16, className: "text-error" }),
213
- t === "success" && /* @__PURE__ */ e(ne, { size: 16, className: "text-success" }),
214
- /* @__PURE__ */ e("span", { className: "body-3", children: o })
215
- ]
216
- }
217
- ), he = ({ count: a, maxCount: o }) => /* @__PURE__ */ e("span", { "aria-live": "polite", className: "shrink-0 body-3 text-muted", children: `${a}/${o}` });
190
+ };
218
191
  export {
219
- Ce as BaseInput
192
+ Ve as BaseInput
220
193
  };
@@ -0,0 +1,8 @@
1
+ import { BaseInputCounterProps } from './types';
2
+ /**
3
+ * Character counter rendered below the control inside `BaseInput`.
4
+ *
5
+ * @internal
6
+ */
7
+ export declare const BaseInputCounter: ({ count, maxCount, }: BaseInputCounterProps) => import("react/jsx-runtime").JSX.Element;
8
+ //# sourceMappingURL=BaseInputCounter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseInputCounter.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInputCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,4CAMvB,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ const o = ({
3
+ count: e,
4
+ maxCount: t
5
+ }) => /* @__PURE__ */ r("span", { "aria-live": "polite", className: "shrink-0 body-3 text-muted", children: `${e}/${t}` });
6
+ export {
7
+ o as BaseInputCounter
8
+ };
@@ -0,0 +1,8 @@
1
+ import { BaseInputHelperTextProps } from './types';
2
+ /**
3
+ * Hint, error or success copy rendered below the control inside `BaseInput`.
4
+ *
5
+ * @internal
6
+ */
7
+ export declare const BaseInputHelperText: ({ id, helperText, status, }: BaseInputHelperTextProps) => import("react/jsx-runtime").JSX.Element;
8
+ //# sourceMappingURL=BaseInputHelperText.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseInputHelperText.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInputHelperText.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAexD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,6BAIjC,wBAAwB,4CAiB1B,CAAC"}
@@ -0,0 +1,37 @@
1
+ import { jsxs as a, jsx as r } from "react/jsx-runtime";
2
+ import { cva as l } from "class-variance-authority";
3
+ import { InformationFill as o } from "../../symbols/icons/InformationFill.js";
4
+ import { DeleteCircleFill as c } from "../../symbols/icons/DeleteCircleFill.js";
5
+ import { CheckmarkCircleFill as i } from "../../symbols/icons/CheckmarkCircleFill.js";
6
+ const m = l("flex items-center gap-2 body-3", {
7
+ variants: {
8
+ status: {
9
+ default: "text-muted",
10
+ error: "text-error",
11
+ success: "text-success"
12
+ }
13
+ },
14
+ defaultVariants: {
15
+ status: "default"
16
+ }
17
+ }), u = ({
18
+ id: s,
19
+ helperText: t,
20
+ status: e
21
+ }) => /* @__PURE__ */ a(
22
+ "div",
23
+ {
24
+ id: s,
25
+ className: m({ status: e }),
26
+ role: e === "error" ? "alert" : void 0,
27
+ children: [
28
+ !e && /* @__PURE__ */ r(o, { size: 16, className: "text-muted" }),
29
+ e === "error" && /* @__PURE__ */ r(c, { size: 16, className: "text-error" }),
30
+ e === "success" && /* @__PURE__ */ r(i, { size: 16, className: "text-success" }),
31
+ /* @__PURE__ */ r("span", { className: "body-3", children: t })
32
+ ]
33
+ }
34
+ );
35
+ export {
36
+ u as BaseInputHelperText
37
+ };
@@ -0,0 +1,8 @@
1
+ import { BaseInputLabelProps } from './types';
2
+ /**
3
+ * Floating label rendered over the control inside `BaseInput`.
4
+ *
5
+ * @internal
6
+ */
7
+ export declare const BaseInputLabel: ({ htmlFor, status, floated, multiline, className, children, }: BaseInputLabelProps) => import("react/jsx-runtime").JSX.Element;
8
+ //# sourceMappingURL=BaseInputLabel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseInputLabel.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInputLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAiCnD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,+DAO5B,mBAAmB,4CASrB,CAAC"}
@@ -0,0 +1,48 @@
1
+ import { jsx as n } from "react/jsx-runtime";
2
+ import { cn as e } from "../../../../libs/utils-shared/dist/index.js";
3
+ import { cva as p } from "class-variance-authority";
4
+ const c = e(
5
+ "pointer-events-none absolute top-6 left-16 origin-left body-4 text-muted transition-all duration-300",
6
+ "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:body-2",
7
+ "group-has-disabled:text-disabled",
8
+ "peer-focus:top-6 peer-focus:translate-y-0 peer-focus:body-4",
9
+ "w-[calc(100%-var(--size-56))] truncate"
10
+ ), d = p(c, {
11
+ variants: {
12
+ status: {
13
+ default: "",
14
+ error: "text-error",
15
+ success: ""
16
+ },
17
+ multiline: {
18
+ true: "peer-placeholder-shown:top-14 peer-placeholder-shown:translate-y-0",
19
+ false: ""
20
+ },
21
+ floated: {
22
+ true: "peer-placeholder-shown:top-6 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:body-4",
23
+ false: ""
24
+ }
25
+ },
26
+ defaultVariants: {
27
+ status: "default",
28
+ multiline: !1,
29
+ floated: !1
30
+ }
31
+ }), f = ({
32
+ htmlFor: t,
33
+ status: a,
34
+ floated: l,
35
+ multiline: r,
36
+ className: o,
37
+ children: s
38
+ }) => /* @__PURE__ */ n(
39
+ "label",
40
+ {
41
+ htmlFor: t,
42
+ className: e(d({ status: a, floated: l, multiline: r }), o),
43
+ children: s
44
+ }
45
+ );
46
+ export {
47
+ f as BaseInputLabel
48
+ };
@@ -0,0 +1,9 @@
1
+ import { BaseInputMultilineProps } from './types';
2
+ /**
3
+ * The auto-growing multi-line control rendered inside `BaseInput`, paired with the
4
+ * hidden clone it is measured against.
5
+ *
6
+ * @internal
7
+ */
8
+ export declare const BaseInputMultiline: ({ ref, className, hasLabel, minLines, maxLines, scrollbarWidth, onChange, ...props }: BaseInputMultilineProps) => import("react/jsx-runtime").JSX.Element;
9
+ //# sourceMappingURL=BaseInputMultiline.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseInputMultiline.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInputMultiline.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAkEvD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,sFAShC,uBAAuB,4CAyCzB,CAAC"}
@@ -0,0 +1,88 @@
1
+ import { jsxs as m, Fragment as g, jsx as i } from "react/jsx-runtime";
2
+ import { useMergedRef as b, cn as u } from "../../../../libs/utils-shared/dist/index.js";
3
+ import { cva as x } from "class-variance-authority";
4
+ import { useRef as v, useLayoutEffect as w } from "react";
5
+ import { useAutosizeTextarea as C } from "./useAutosizeTextarea/useAutosizeTextarea.js";
6
+ const c = x(
7
+ [
8
+ "w-full flex-1 resize-none bg-transparent body-1 wrap-break-word whitespace-pre-wrap text-base caret-active outline-hidden transition-colors",
9
+ "group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled",
10
+ "placeholder:text-muted group-has-disabled:placeholder:text-disabled"
11
+ ],
12
+ {
13
+ variants: {
14
+ hasLabel: {
15
+ true: "body-2",
16
+ false: ""
17
+ },
18
+ scrollbarWidth: {
19
+ auto: "scrollbar-custom pe-8",
20
+ none: "scrollbar-none"
21
+ }
22
+ },
23
+ defaultVariants: {
24
+ hasLabel: !1,
25
+ scrollbarWidth: "auto"
26
+ }
27
+ }
28
+ ), R = (s, r) => {
29
+ const t = v(!1), o = (e) => {
30
+ const a = e.target, n = "isComposing" in e.nativeEvent && e.nativeEvent.isComposing === !0;
31
+ t.current = !n && a.value.endsWith(`
32
+ `) && a.selectionStart === a.value.length, r?.(e);
33
+ };
34
+ return w(() => {
35
+ if (!t.current) return;
36
+ t.current = !1;
37
+ const e = s.current;
38
+ !e || document.activeElement !== e || (e.scrollTop = e.scrollHeight);
39
+ }), o;
40
+ }, I = ({
41
+ ref: s,
42
+ className: r,
43
+ hasLabel: t = !1,
44
+ minLines: o = 1,
45
+ maxLines: e,
46
+ scrollbarWidth: a = "auto",
47
+ onChange: n,
48
+ ...d
49
+ }) => {
50
+ const { textareaRef: l, shadowRef: f } = C({
51
+ minLines: o,
52
+ maxLines: e
53
+ }), p = b(s, l), h = R(l, n);
54
+ return /* @__PURE__ */ m(g, { children: [
55
+ /* @__PURE__ */ i(
56
+ "textarea",
57
+ {
58
+ ref: p,
59
+ rows: o,
60
+ className: u(
61
+ "peer",
62
+ c({ hasLabel: t, scrollbarWidth: a }),
63
+ t && "mt-16",
64
+ r
65
+ ),
66
+ onChange: h,
67
+ ...d
68
+ }
69
+ ),
70
+ /* @__PURE__ */ i(
71
+ "textarea",
72
+ {
73
+ ref: f,
74
+ "aria-hidden": !0,
75
+ readOnly: !0,
76
+ tabIndex: -1,
77
+ className: u(
78
+ c({ hasLabel: t, scrollbarWidth: a }),
79
+ r,
80
+ "invisible absolute top-0 left-0 h-0 transform-gpu overflow-hidden py-0"
81
+ )
82
+ }
83
+ )
84
+ ] });
85
+ };
86
+ export {
87
+ I as BaseInputMultiline
88
+ };
@@ -0,0 +1,8 @@
1
+ import { BaseInputSingleLineProps } from './types';
2
+ /**
3
+ * The single-line control rendered inside `BaseInput`.
4
+ *
5
+ * @internal
6
+ */
7
+ export declare const BaseInputSingleLine: ({ ref, className, hasLabel, ...props }: BaseInputSingleLineProps) => import("react/jsx-runtime").JSX.Element;
8
+ //# sourceMappingURL=BaseInputSingleLine.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseInputSingleLine.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/BaseInputSingleLine.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAWxD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,wCAKjC,wBAAwB,4CAQ1B,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { jsx as d } from "react/jsx-runtime";
2
+ import { cn as e } from "../../../../libs/utils-shared/dist/index.js";
3
+ const r = e(
4
+ "peer w-full flex-1 bg-muted body-1 text-base caret-active outline-hidden transition-colors",
5
+ "group-hover:bg-muted-hover group-disabled:bg-disabled",
6
+ "group-has-disabled:cursor-not-allowed group-has-disabled:bg-disabled group-has-disabled:text-disabled",
7
+ "placeholder:text-muted group-has-disabled:placeholder:text-disabled",
8
+ "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
9
+ "truncate"
10
+ ), l = ({
11
+ ref: t,
12
+ className: a,
13
+ hasLabel: o = !1,
14
+ ...s
15
+ }) => /* @__PURE__ */ d(
16
+ "input",
17
+ {
18
+ ref: t,
19
+ className: e(r, o && "pt-12 body-2", a),
20
+ ...s
21
+ }
22
+ );
23
+ export {
24
+ l as BaseInputSingleLine
25
+ };
@@ -1,5 +1,10 @@
1
- import { ComponentPropsWithRef, ReactNode } from 'react';
1
+ import { ComponentPropsWithRef, InputHTMLAttributes, ReactNode, Ref } from 'react';
2
2
  export type BaseInputStatus = 'error' | 'success';
3
+ export type BaseInputElement = HTMLInputElement | HTMLTextAreaElement;
4
+ /**
5
+ * Visibility of the scroll affordance once the field reaches `maxLines`.
6
+ */
7
+ export type BaseInputScrollbarWidth = 'none' | 'auto';
3
8
  export type BaseInputProps = {
4
9
  /**
5
10
  * The label text that floats above the input when focused or filled.
@@ -37,6 +42,7 @@ export type BaseInputProps = {
37
42
  prefix?: ReactNode;
38
43
  /**
39
44
  * Optional function to extend the default clear behavior with custom logic
45
+ * Called after the field is emptied. Clearing always calls `onChange` first
40
46
  */
41
47
  onClear?: () => void;
42
48
  /**
@@ -60,7 +66,72 @@ export type BaseInputProps = {
60
66
  * Additional class names to apply to the label element
61
67
  */
62
68
  labelClassName?: string;
69
+ /**
70
+ * Renders a multi-line `textarea` that auto-grows between `minLines` and `maxLines`
71
+ * @default false
72
+ */
73
+ multiline?: boolean;
74
+ /**
75
+ * Minimum height of the field, in lines. Ignored unless `multiline` is set.
76
+ * @default 1
77
+ */
78
+ minLines?: number;
79
+ /**
80
+ * Growth ceiling, in lines; past it the field scrolls internally. Unbounded when
81
+ * omitted. Ignored unless `multiline` is set.
82
+ */
83
+ maxLines?: number;
84
+ /**
85
+ * Controls whether the Lumen thin scrollbar is visible once the field reaches
86
+ * `maxLines`. Ignored unless `multiline` is set.
87
+ * @default 'auto'
88
+ */
89
+ scrollbarWidth?: BaseInputScrollbarWidth;
90
+ } & Omit<InputHTMLAttributes<BaseInputElement>, 'size' | 'prefix'> & {
91
+ ref?: Ref<BaseInputElement>;
92
+ };
93
+ export type BaseInputSingleLineProps = {
94
+ /**
95
+ * Whether a floating label sits above the value, reserving vertical space at
96
+ * the top of the input.
97
+ * @default false
98
+ */
99
+ hasLabel?: boolean;
63
100
  } & Omit<ComponentPropsWithRef<'input'>, 'size' | 'prefix'>;
101
+ export type BaseInputMultilineProps = {
102
+ /**
103
+ * Whether a floating label sits above the value, reserving vertical space at
104
+ * the top of the field.
105
+ * @default false
106
+ */
107
+ hasLabel?: boolean;
108
+ } & Pick<BaseInputProps, 'minLines' | 'maxLines' | 'scrollbarWidth'> & Omit<ComponentPropsWithRef<'textarea'>, 'rows' | 'cols'>;
109
+ export type BaseInputLabelProps = {
110
+ /**
111
+ * Id of the input the label describes.
112
+ */
113
+ htmlFor: string;
114
+ /**
115
+ * Keeps the label in its floated position even while the placeholder shows,
116
+ * used when a label and a placeholder are displayed together.
117
+ * @default false
118
+ */
119
+ floated?: boolean;
120
+ /**
121
+ * Pins the resting position to the first line instead of centering it, for a
122
+ * field that can grow past a single line.
123
+ * @default false
124
+ */
125
+ multiline?: boolean;
126
+ /**
127
+ * Additional class names to apply to the label element.
128
+ */
129
+ className?: string;
130
+ /**
131
+ * The label copy.
132
+ */
133
+ children: ReactNode;
134
+ } & Pick<BaseInputProps, 'status'>;
64
135
  export type BaseInputHelperTextProps = {
65
136
  /**
66
137
  * The id linking the helper text to the input via `aria-describedby`.
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;AAE5D,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/internal/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACnB,SAAS,EACT,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAC;CAC1C,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;AAE5D,MAAM,MAAM,uBAAuB,GAAG;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC,GAClE,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { useAutosizeTextarea } from './useAutosizeTextarea';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/internal/BaseInput/useAutosizeTextarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { RefObject } from 'react';
2
+ type UseAutosizeTextareaArgs = {
3
+ minLines: number;
4
+ maxLines: number | undefined;
5
+ };
6
+ type UseAutosizeTextareaReturn = {
7
+ textareaRef: RefObject<HTMLTextAreaElement | null>;
8
+ shadowRef: RefObject<HTMLTextAreaElement | null>;
9
+ };
10
+ /**
11
+ * Grows a `textarea` between `minLines` and `maxLines`, measuring on an off-screen
12
+ * clone so the visible field is never collapsed and re-grown.
13
+ *
14
+ * Ported from MUI's `TextareaAutosize` (MIT).
15
+ *
16
+ * @internal
17
+ */
18
+ export declare const useAutosizeTextarea: ({ minLines, maxLines, }: UseAutosizeTextareaArgs) => UseAutosizeTextareaReturn;
19
+ export {};
20
+ //# sourceMappingURL=useAutosizeTextarea.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useAutosizeTextarea.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/internal/BaseInput/useAutosizeTextarea/useAutosizeTextarea.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;CAClD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,GAAI,yBAGjC,uBAAuB,KAAG,yBA8G5B,CAAC"}
@@ -0,0 +1,49 @@
1
+ import { debounce as E } from "../../../../../libs/utils-shared/dist/index.js";
2
+ import { useRef as u, useCallback as g, useLayoutEffect as w } from "react";
3
+ const z = 166, p = "x", d = (o) => Number.parseInt(o, 10) || 0, O = ({
4
+ minLines: o,
5
+ maxLines: h
6
+ }) => {
7
+ const i = u(null), m = u(null), s = u(null), l = u(-1), c = g(() => {
8
+ const t = i.current, e = m.current;
9
+ if (!t || !e) return;
10
+ const r = window.getComputedStyle(t);
11
+ if (r.width === "0px") return;
12
+ e.style.width = r.width, e.value = t.value || p, e.value.endsWith(`
13
+ `) && (e.value += " ");
14
+ const b = e.scrollHeight;
15
+ e.value = p;
16
+ const f = e.scrollHeight;
17
+ let n = Math.max(o * f, b);
18
+ h && (n = Math.min(h * f, n)), n = Math.max(n, f);
19
+ const x = d(r.paddingTop) + d(r.paddingBottom), R = d(r.borderTopWidth) + d(r.borderBottomWidth), y = r.boxSizing === "border-box" ? x + R : 0;
20
+ return {
21
+ height: n + y,
22
+ // A pixel of tolerance absorbs subpixel rounding.
23
+ fits: Math.abs(n - b) <= 1
24
+ };
25
+ }, [o, h]), a = g(() => {
26
+ const t = i.current, e = c();
27
+ !t || !e || (s.current !== e.height && (s.current = e.height, t.style.height = `${e.height}px`), t.style.overflow = e.fits ? "hidden" : "");
28
+ }, [c]), v = g(() => {
29
+ const t = c();
30
+ return t !== void 0 && s.current !== null && s.current !== t.height;
31
+ }, [c]);
32
+ return w(a), w(() => {
33
+ const t = i.current;
34
+ if (!t) return;
35
+ const e = E(a, z);
36
+ window.addEventListener("resize", e);
37
+ let r;
38
+ return typeof ResizeObserver < "u" && (r = new ResizeObserver(() => {
39
+ v() && (r?.unobserve(t), cancelAnimationFrame(l.current), a(), l.current = requestAnimationFrame(() => {
40
+ r?.observe(t);
41
+ }));
42
+ }), r.observe(t)), () => {
43
+ e.cancel(), cancelAnimationFrame(l.current), window.removeEventListener("resize", e), r?.disconnect();
44
+ };
45
+ }, [a, v]), { textareaRef: i, shadowRef: m };
46
+ };
47
+ export {
48
+ O as useAutosizeTextarea
49
+ };
@@ -0,0 +1,26 @@
1
+ import { ChangeEventHandler, RefCallback, RefObject } from 'react';
2
+ import { BaseInputElement, BaseInputProps } from '../types';
3
+ type UseBaseInputValueArgs = {
4
+ value: BaseInputProps['value'];
5
+ defaultValue: BaseInputProps['defaultValue'];
6
+ onChange: ChangeEventHandler<BaseInputElement> | undefined;
7
+ onClear: (() => void) | undefined;
8
+ ref: BaseInputProps['ref'];
9
+ };
10
+ type UseBaseInputValueReturn = {
11
+ inputRef: RefObject<BaseInputElement | null>;
12
+ composedRef: RefCallback<BaseInputElement>;
13
+ currentValue: string;
14
+ hasContent: boolean;
15
+ handleChange: ChangeEventHandler<BaseInputElement>;
16
+ handleClear: () => void;
17
+ };
18
+ /**
19
+ * Tracks the input value for `BaseInput` and implements the clear button, in both
20
+ * controlled and uncontrolled mode.
21
+ *
22
+ * @internal
23
+ */
24
+ export declare const useBaseInputValue: ({ value, defaultValue, onChange, onClear, ref, }: UseBaseInputValueArgs) => UseBaseInputValueReturn;
25
+ export {};
26
+ //# sourceMappingURL=useBaseInputValue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useBaseInputValue.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/internal/BaseInput/useBaseInputValue/useBaseInputValue.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,kBAAkB,EAClB,WAAW,EACX,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEjE,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,YAAY,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;IAC3D,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,GAAG,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CAC5B,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7C,WAAW,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,kDAM/B,qBAAqB,KAAG,uBAkE1B,CAAC"}
@@ -0,0 +1,35 @@
1
+ import { useMergedRef as g } from "../../../../../libs/utils-shared/dist/index.js";
2
+ import { useRef as v, useState as h } from "react";
3
+ const b = ({
4
+ value: o,
5
+ defaultValue: u,
6
+ onChange: c,
7
+ onClear: l,
8
+ ref: a
9
+ }) => {
10
+ const e = v(null), n = o !== void 0, [i, r] = h(
11
+ u?.toString() ?? ""
12
+ ), p = (t) => {
13
+ n || r(t.target.value), c?.(t);
14
+ }, s = n ? o?.toString() ?? "" : i, d = s.length > 0, f = () => {
15
+ if (!e.current) return;
16
+ const t = e.current instanceof window.HTMLTextAreaElement ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
17
+ Object.getOwnPropertyDescriptor(
18
+ t,
19
+ "value"
20
+ )?.set?.call(e.current, ""), n || r("");
21
+ const w = new Event("input", { bubbles: !0 });
22
+ e.current.dispatchEvent(w), e.current.focus(), l?.();
23
+ }, m = g(a, e);
24
+ return {
25
+ inputRef: e,
26
+ composedRef: m,
27
+ currentValue: s,
28
+ hasContent: d,
29
+ handleChange: p,
30
+ handleClear: f
31
+ };
32
+ };
33
+ export {
34
+ b as useBaseInputValue
35
+ };
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-react",
3
- "version": "0.1.54",
3
+ "version": "0.1.55",
4
4
  "license": "Apache-2.0",
5
5
  "sideEffects": false,
6
6
  "keywords": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/lumen-ui-react",
3
- "version": "0.1.55",
3
+ "version": "0.1.56",
4
4
  "license": "Apache-2.0",
5
5
  "sideEffects": false,
6
6
  "keywords": [
@@ -56,7 +56,7 @@
56
56
  "@radix-ui/react-tooltip": "^1.2.8",
57
57
  "class-variance-authority": "^0.7.1",
58
58
  "@tanstack/react-table": "^8.21.3",
59
- "@ledgerhq/lumen-design-core": "0.1.26",
59
+ "@ledgerhq/lumen-design-core": "0.1.27",
60
60
  "clsx": "^2.1.1",
61
61
  "react": "^18.0.0 || ^19.0.0",
62
62
  "react-dom": "^18.0.0 || ^19.0.0",