@vkzstudio/muza-ui 1.0.20 → 1.0.22

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 (40) hide show
  1. package/dist/components/Dialog/Dialog.js +8 -8
  2. package/dist/components/FileUpload/FileItem.js +1 -1
  3. package/dist/components/FileUpload/FileUpload.d.ts +9 -1
  4. package/dist/components/FileUpload/FileUpload.d.ts.map +1 -1
  5. package/dist/components/FileUpload/FileUpload.js +152 -117
  6. package/dist/components/FileUpload/FileUpload.stories.d.ts +2 -0
  7. package/dist/components/FileUpload/FileUpload.stories.d.ts.map +1 -1
  8. package/dist/components/FormField/FormField.d.ts +4 -0
  9. package/dist/components/FormField/FormField.d.ts.map +1 -1
  10. package/dist/components/FormField/FormField.js +62 -49
  11. package/dist/components/Input/Input.d.ts +4 -0
  12. package/dist/components/Input/Input.d.ts.map +1 -1
  13. package/dist/components/Input/Input.js +25 -21
  14. package/dist/components/Input/Input.stories.d.ts.map +1 -1
  15. package/dist/components/MultiSelect/MultiSelect.d.ts +4 -0
  16. package/dist/components/MultiSelect/MultiSelect.d.ts.map +1 -1
  17. package/dist/components/MultiSelect/MultiSelect.js +42 -38
  18. package/dist/components/MultiSelect/MultiSelect.stories.d.ts.map +1 -1
  19. package/dist/components/Select/Select.d.ts +4 -0
  20. package/dist/components/Select/Select.d.ts.map +1 -1
  21. package/dist/components/Select/Select.js +36 -32
  22. package/dist/components/Select/Select.stories.d.ts.map +1 -1
  23. package/dist/components/TextEditor/TextEditor.d.ts.map +1 -1
  24. package/dist/components/TextEditor/TextEditor.js +66 -71
  25. package/dist/components/TextEditor/ToolbarButton.js +6 -6
  26. package/dist/components/Textarea/Textarea.d.ts +7 -1
  27. package/dist/components/Textarea/Textarea.d.ts.map +1 -1
  28. package/dist/components/Textarea/Textarea.js +106 -53
  29. package/dist/components/Textarea/Textarea.stories.d.ts +1 -0
  30. package/dist/components/Textarea/Textarea.stories.d.ts.map +1 -1
  31. package/dist/muza-ui.css +1 -1
  32. package/dist/translations/locales/cs.d.ts.map +1 -1
  33. package/dist/translations/locales/cs.js +1 -0
  34. package/dist/translations/locales/en.d.ts.map +1 -1
  35. package/dist/translations/locales/en.js +1 -0
  36. package/dist/translations/locales/sk.d.ts.map +1 -1
  37. package/dist/translations/locales/sk.js +1 -0
  38. package/dist/translations/types.d.ts +2 -0
  39. package/dist/translations/types.d.ts.map +1 -1
  40. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
- import { jsx as r, jsxs as f } from "react/jsx-runtime";
2
- import { forwardRef as I, useEffect as b, useImperativeHandle as O, useRef as $ } from "react";
1
+ import { jsx as s, jsxs as k } from "react/jsx-runtime";
2
+ import { forwardRef as O, useEffect as _, useImperativeHandle as $, useRef as I } from "react";
3
3
  import { Link as K } from "../../node_modules/@tiptap/extension-link/dist/index.js";
4
4
  import { Placeholder as W } from "../../node_modules/@tiptap/extension-placeholder/dist/index.js";
5
5
  import { useEditor as q, EditorContent as D } from "../../node_modules/@tiptap/react/dist/index.js";
@@ -10,10 +10,8 @@ import { LinkBubbleMenu as X } from "./LinkBubbleMenu.js";
10
10
  import { useLinkEditor as Y } from "./useLinkEditor.js";
11
11
  import { useMuzaTranslations as Z } from "../../translations/TranslationContext.js";
12
12
  import { FormField as tt } from "../FormField/FormField.js";
13
- import { cn as g } from "../../utils/cn.js";
14
- import { TooltipProvider as et, Tooltip as rt, TooltipTrigger as ot, TooltipContent as it } from "../Tooltip/Tooltip.js";
15
- import { InfoCircleBold as nt } from "@solar-icons/react-perf";
16
- const lt = J(
13
+ import { cn as b } from "../../utils/cn.js";
14
+ const et = J(
17
15
  [
18
16
  "overflow-hidden rounded-xl border bg-surface-base-secondary transition-colors",
19
17
  "focus-within:border-comp-texteditor-stroke-focused",
@@ -32,41 +30,41 @@ const lt = J(
32
30
  state: "default"
33
31
  }
34
32
  }
35
- ), st = I(
33
+ ), rt = O(
36
34
  ({
37
- value: l,
38
- defaultValue: y,
35
+ value: i,
36
+ defaultValue: g,
39
37
  onChange: d,
40
- onBlur: v,
41
- onFocus: L,
42
- placeholder: T = "",
38
+ onBlur: y,
39
+ onFocus: v,
40
+ placeholder: L = "",
43
41
  label: E,
44
- hint: C,
45
- infoTooltip: p,
46
- disabled: i = !1,
42
+ hint: T,
43
+ infoTooltip: C,
44
+ disabled: o = !1,
47
45
  readOnly: c = !1,
48
46
  required: M,
49
47
  disableRequiredAsterisk: H,
50
- error: s,
48
+ error: l,
51
49
  toolbar: n = {},
52
- toolbarExtra: x,
50
+ toolbarExtra: f,
53
51
  extensions: w = [],
54
52
  minHeight: z = 200,
55
53
  maxHeight: a,
56
54
  resizable: P = !0,
57
- className: N,
58
- contentClassName: R,
59
- unstyled: U = !1,
60
- editorClassName: F
55
+ className: R,
56
+ contentClassName: U,
57
+ unstyled: F = !1,
58
+ editorClassName: N
61
59
  }, S) => {
62
- const u = Z(), m = {
60
+ const p = Z(), m = {
63
61
  history: n.history ?? !0,
64
62
  headings: n.headings ?? !0,
65
63
  formatting: n.formatting ?? !0,
66
64
  lists: n.lists ?? !0,
67
65
  link: n.link ?? !0,
68
66
  clearFormatting: n.clearFormatting ?? !0
69
- }, V = !!x || Object.values(m).some((e) => e !== !1), t = q({
67
+ }, V = !!f || Object.values(m).some((e) => e !== !1), t = q({
70
68
  extensions: [
71
69
  G.configure({
72
70
  heading: { levels: [1, 2, 3] },
@@ -89,23 +87,23 @@ const lt = J(
89
87
  })
90
88
  ] : [],
91
89
  W.configure({
92
- placeholder: ({ editor: e }) => e.state.doc.textContent.length === 0 ? T : ""
90
+ placeholder: ({ editor: e }) => e.state.doc.textContent.length === 0 ? L : ""
93
91
  }),
94
92
  ...w
95
93
  ],
96
- content: l ?? y ?? "",
97
- editable: !i && !c,
94
+ content: i ?? g ?? "",
95
+ editable: !o && !c,
98
96
  onUpdate: ({ editor: e }) => {
99
- const k = e.getText().trim(), _ = e.getHTML();
100
- d == null || d(k.length === 0 ? "" : _);
97
+ const x = e.getText().trim(), h = e.getHTML();
98
+ d == null || d(x.length === 0 ? "" : h);
101
99
  },
102
- onBlur: v,
103
- onFocus: L,
100
+ onBlur: y,
101
+ onFocus: v,
104
102
  editorProps: {
105
103
  attributes: {
106
- class: g(
104
+ class: b(
107
105
  "outline-none text-sm",
108
- !U && [
106
+ !F && [
109
107
  // Headings
110
108
  "[&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:text-text-dark-primary-def [&_h1]:my-3",
111
109
  "[&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:text-text-dark-primary-def [&_h2]:my-3",
@@ -125,7 +123,7 @@ const lt = J(
125
123
  ],
126
124
  // Placeholder (only when the entire editor is empty — controlled via placeholder function)
127
125
  "[&_.is-empty]:before:content-[attr(data-placeholder)] [&_.is-empty]:before:text-comp-input-text-placeholder [&_.is-empty]:before:float-left [&_.is-empty]:before:h-0 [&_.is-empty]:before:pointer-events-none",
128
- F
126
+ N
129
127
  ),
130
128
  // Inline styles needed because Tailwind CSS 4 JIT doesn't apply to dynamically created elements
131
129
  style: "width: 100%; min-height: 100%; max-width: none;",
@@ -134,14 +132,14 @@ const lt = J(
134
132
  }
135
133
  }
136
134
  });
137
- b(() => {
138
- if (t && l !== void 0) {
135
+ _(() => {
136
+ if (t && i !== void 0) {
139
137
  const e = t.getHTML();
140
- (l || "<p></p>") !== (e || "<p></p>") && t.commands.setContent(l, !1);
138
+ (i || "<p></p>") !== (e || "<p></p>") && t.commands.setContent(i, !1);
141
139
  }
142
- }, [t, l]), b(() => {
143
- t && t.setEditable(!i && !c);
144
- }, [t, i, c]), O(
140
+ }, [t, i]), _(() => {
141
+ t && t.setEditable(!o && !c);
142
+ }, [t, o, c]), $(
145
143
  S,
146
144
  () => ({
147
145
  editor: t,
@@ -154,62 +152,59 @@ const lt = J(
154
152
  }),
155
153
  [t]
156
154
  );
157
- const o = Y(t), h = $(null), j = i ? "disabled" : s ? "error" : "default", A = typeof s == "string" ? s : void 0, B = {
155
+ const r = Y(t), u = I(null), j = o ? "disabled" : l ? "error" : "default", A = typeof l == "string" ? l : void 0, B = {
158
156
  minHeight: `${Math.max(z, 200)}px`,
159
157
  maxHeight: a ? typeof a == "number" ? `${a}px` : a : void 0,
160
- resize: P && !i ? "vertical" : "none"
158
+ resize: P && !o ? "vertical" : "none"
161
159
  };
162
- return /* @__PURE__ */ r("div", { ref: h, children: /* @__PURE__ */ r(
160
+ return /* @__PURE__ */ s("div", { ref: u, children: /* @__PURE__ */ s(
163
161
  tt,
164
162
  {
165
163
  label: E,
166
- hint: A || C,
167
- error: !!s,
164
+ hint: A || T,
165
+ error: !!l,
168
166
  required: M,
169
167
  disableRequiredAsterisk: H,
170
- className: N,
171
- labelExtra: p ? /* @__PURE__ */ r(et, { children: /* @__PURE__ */ f(rt, { children: [
172
- /* @__PURE__ */ r(ot, { asChild: !0, children: /* @__PURE__ */ r(nt, { className: "cursor-help text-comp-info-ico-def hover:text-comp-info-ico-hover" }) }),
173
- /* @__PURE__ */ r(it, { children: p })
174
- ] }) }) : void 0,
175
- children: /* @__PURE__ */ f("div", { className: lt({ state: j }), children: [
176
- V && /* @__PURE__ */ r(
168
+ className: R,
169
+ infoTooltip: C,
170
+ children: /* @__PURE__ */ k("div", { className: et({ state: j }), children: [
171
+ V && /* @__PURE__ */ s(
177
172
  Q,
178
173
  {
179
174
  editor: t,
180
175
  toolbarConfig: m,
181
- disabled: i,
182
- translations: u.textEditor,
183
- onLinkClick: o.handleLinkToolbarClick,
184
- toolbarExtra: x
176
+ disabled: o,
177
+ translations: p.textEditor,
178
+ onLinkClick: r.handleLinkToolbarClick,
179
+ toolbarExtra: f
185
180
  }
186
181
  ),
187
- /* @__PURE__ */ f(
182
+ /* @__PURE__ */ k(
188
183
  "div",
189
184
  {
190
- className: g(
185
+ className: b(
191
186
  "relative overflow-auto px-2xl py-xl",
192
187
  "mr-[calc(var(--spacing-xl)/2)]",
193
188
  "pr-[calc(var(--spacing-2xl)-var(--spacing-xl)/2)]",
194
189
  // Compensate for scrollbar offset
195
- R
190
+ U
196
191
  ),
197
192
  style: B,
198
193
  children: [
199
- /* @__PURE__ */ r(D, { editor: t, className: "h-full w-full" }),
200
- t && m.link && /* @__PURE__ */ r(
194
+ /* @__PURE__ */ s(D, { editor: t, className: "h-full w-full" }),
195
+ t && m.link && /* @__PURE__ */ s(
201
196
  X,
202
197
  {
203
198
  editor: t,
204
- containerRef: h,
205
- linkUrl: o.linkUrl,
206
- isEditingLink: o.isEditingLink,
207
- onUrlChange: o.setLinkUrl,
208
- onEdit: o.handleOpenLinkEdit,
209
- onSave: o.handleSaveLink,
210
- onRemove: o.handleRemoveLink,
211
- onCancel: o.handleCancelEdit,
212
- translations: u.textEditor
199
+ containerRef: u,
200
+ linkUrl: r.linkUrl,
201
+ isEditingLink: r.isEditingLink,
202
+ onUrlChange: r.setLinkUrl,
203
+ onEdit: r.handleOpenLinkEdit,
204
+ onSave: r.handleSaveLink,
205
+ onRemove: r.handleRemoveLink,
206
+ onCancel: r.handleCancelEdit,
207
+ translations: p.textEditor
213
208
  }
214
209
  )
215
210
  ]
@@ -220,7 +215,7 @@ const lt = J(
220
215
  ) });
221
216
  }
222
217
  );
223
- st.displayName = "TextEditor";
218
+ rt.displayName = "TextEditor";
224
219
  export {
225
- st as TextEditor
220
+ rt as TextEditor
226
221
  };
@@ -1,8 +1,8 @@
1
1
  import { jsx as t, jsxs as m } from "react/jsx-runtime";
2
2
  import { forwardRef as p } from "react";
3
3
  import { cva as u } from "class-variance-authority";
4
- import { TooltipProvider as b, Tooltip as f, TooltipTrigger as x, TooltipContent as g } from "../Tooltip/Tooltip.js";
5
- import { cn as h } from "../../utils/cn.js";
4
+ import { cn as b } from "../../utils/cn.js";
5
+ import { TooltipProvider as f, Tooltip as x, TooltipTrigger as g, TooltipContent as h } from "../Tooltip/Tooltip.js";
6
6
  const v = u(
7
7
  [
8
8
  "flex shrink-0 items-center justify-center",
@@ -46,7 +46,7 @@ const v = u(
46
46
  {
47
47
  type: "button",
48
48
  ref: l,
49
- className: h(v({ state: o ? "disabled" : e ? "active" : "default", className: s })),
49
+ className: b(v({ state: o ? "disabled" : e ? "active" : "default", className: s })),
50
50
  disabled: o,
51
51
  "aria-label": r,
52
52
  "aria-pressed": e,
@@ -55,9 +55,9 @@ const v = u(
55
55
  children: a
56
56
  }
57
57
  );
58
- return c ? /* @__PURE__ */ t(b, { children: /* @__PURE__ */ m(f, { children: [
59
- /* @__PURE__ */ t(x, { asChild: !0, children: i }),
60
- /* @__PURE__ */ t(g, { children: d ?? r })
58
+ return c ? /* @__PURE__ */ t(f, { children: /* @__PURE__ */ m(x, { children: [
59
+ /* @__PURE__ */ t(g, { asChild: !0, children: i }),
60
+ /* @__PURE__ */ t(h, { children: d ?? r })
61
61
  ] }) }) : i;
62
62
  }
63
63
  );
@@ -1,4 +1,4 @@
1
- import { ComponentProps } from 'react';
1
+ import { ComponentProps, ReactNode } from 'react';
2
2
  /** Props for the Textarea component. */
3
3
  export interface TextareaProps extends ComponentProps<'textarea'> {
4
4
  /** Controls manual resize behavior via drag handle. @default 'none' */
@@ -19,6 +19,12 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
19
19
  name?: string;
20
20
  /** Automatically grows textarea height to fit content. @default false */
21
21
  autoResize?: boolean;
22
+ /** Extra content rendered inline next to the label (e.g. a tooltip icon). */
23
+ labelExtra?: ReactNode;
24
+ /** Tooltip content shown in an info icon next to the label. Overridden by `labelExtra` if both are provided. */
25
+ infoTooltip?: string;
26
+ /** Displays a character counter (currentCount/maxLength) in the label row. Requires `maxLength` to be set. @default false */
27
+ showCharacterCount?: boolean;
22
28
  }
23
29
  export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
24
30
  //# sourceMappingURL=Textarea.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAA;AA0CtE,wCAAwC;AACxC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IAC/D,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,4HA8DpB,CAAA"}
1
+ {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AA+Dd,wCAAwC;AACxC,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IAC/D,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6FAA6F;IAC7F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,gHAAgH;IAChH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6HAA6H;IAC7H,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,eAAO,MAAM,QAAQ,4HA0GpB,CAAA"}
@@ -1,22 +1,20 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { forwardRef as z, useId as w, useRef as I } from "react";
3
- import { cva as k } from "class-variance-authority";
4
- import { FormField as R } from "../FormField/FormField.js";
5
- import { cn as F } from "../../utils/cn.js";
6
- import { typographyVariants as V } from "../Typography/Typography.js";
7
- const $ = k(
1
+ import { jsxs as G, jsx as l } from "react/jsx-runtime";
2
+ import { forwardRef as H, useId as U, useRef as W, useState as B } from "react";
3
+ import { cva as h } from "class-variance-authority";
4
+ import { FormField as D } from "../FormField/FormField.js";
5
+ import { cn as x } from "../../utils/cn.js";
6
+ import { typographyVariants as b } from "../Typography/Typography.js";
7
+ const E = h(
8
8
  [
9
- V({
9
+ b({
10
10
  variant: "body",
11
11
  weight: "medium",
12
12
  size: "base"
13
13
  }),
14
- "w-full bg-comp-input-fill-def px-comp-input-p-hor py-xl font-text text-comp-input-text-primary transition-colors",
14
+ "w-full font-text text-comp-input-text-primary transition-colors outline-none",
15
15
  "placeholder:font-regular placeholder:text-comp-input-text-placeholder",
16
- "rounded-xl border border-comp-input-stroke-def",
17
- "hover:border-comp-input-stroke-hover",
18
- "disabled:cursor-not-allowed disabled:border-comp-input-stroke-disabled disabled:bg-comp-input-fill-disabled",
19
- "outline-none focus:border-comp-input-stroke-focused"
16
+ "mr-[calc(var(--spacing-xl)/2)] pt-xl pr-[calc(var(--spacing-comp-input-p-hor)-var(--spacing-xl)/2)] pb-[calc(var(--spacing-xl)/2)] pl-comp-input-p-hor",
17
+ "disabled:cursor-not-allowed"
20
18
  ],
21
19
  {
22
20
  variants: {
@@ -38,56 +36,111 @@ const $ = k(
38
36
  resize: "none"
39
37
  }
40
38
  }
41
- ), N = z(
39
+ ), J = h(
40
+ [
41
+ "overflow-hidden rounded-xl border border-comp-input-stroke-def bg-comp-input-fill-def transition-colors",
42
+ "focus-within:border-comp-texteditor-stroke-focused",
43
+ "pb-[calc(var(--spacing-xl)/2)]",
44
+ // Offset scrollbar to make resize handle visible
45
+ "flex"
46
+ ],
47
+ {
48
+ variants: {
49
+ state: {
50
+ default: "border-comp-texteditor-stroke-def hover:border-comp-texteditor-stroke-hover",
51
+ disabled: "cursor-not-allowed border-comp-input-stroke-disabled bg-comp-input-fill-disabled",
52
+ error: "border-comp-texteditor-stroke-error"
53
+ }
54
+ },
55
+ defaultVariants: {
56
+ state: "default"
57
+ }
58
+ }
59
+ ), K = H(
42
60
  ({
43
- className: d,
44
- label: p,
45
- hint: c,
46
- id: u,
47
- error: o,
48
- resize: m,
49
- autoResize: a,
50
- errorMessage: i,
51
- required: r,
52
- disableRequiredAsterisk: f,
53
- ...h
54
- }, n) => {
55
- const x = w(), e = u ?? x, b = `${e}-hint`, y = `${e}-label`, g = I(null), l = (typeof n == "function" ? null : n) ?? g, v = () => {
56
- const t = l.current;
57
- t && (t.style.height = "auto", t.style.height = `${t.scrollHeight + 2}px`);
58
- };
59
- return /* @__PURE__ */ s(
60
- R,
61
+ className: g,
62
+ label: v,
63
+ hint: y,
64
+ id: w,
65
+ error: e,
66
+ resize: z,
67
+ autoResize: s,
68
+ errorMessage: c,
69
+ required: o,
70
+ disableRequiredAsterisk: k,
71
+ labelExtra: I,
72
+ infoTooltip: N,
73
+ showCharacterCount: R,
74
+ value: a,
75
+ defaultValue: d,
76
+ onChange: n,
77
+ disabled: p,
78
+ ...i
79
+ }, u) => {
80
+ const V = U(), r = w ?? V, F = `${r}-hint`, S = `${r}-label`, $ = W(null), m = (typeof u == "function" ? null : u) ?? $, f = a !== void 0, [j, A] = B(
81
+ () => String(d ?? "").length
82
+ ), L = f ? String(a).length : j, T = () => {
83
+ const t = m.current;
84
+ t && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`);
85
+ }, C = R && i.maxLength != null ? /* @__PURE__ */ G(
86
+ "span",
87
+ {
88
+ className: x(
89
+ b({
90
+ variant: "body",
91
+ weight: "regular",
92
+ size: "sm"
93
+ }),
94
+ "text-comp-input-text-secondary"
95
+ ),
96
+ children: [
97
+ L,
98
+ "/",
99
+ i.maxLength
100
+ ]
101
+ }
102
+ ) : void 0;
103
+ return /* @__PURE__ */ l(
104
+ D,
61
105
  {
62
- label: p,
63
- hint: o && i ? i : c,
64
- error: o,
65
- required: r,
66
- disableRequiredAsterisk: f,
67
- htmlFor: e,
68
- labelId: y,
69
- hintId: b,
70
- children: /* @__PURE__ */ s(
106
+ label: v,
107
+ hint: e && c ? c : y,
108
+ error: e,
109
+ required: o,
110
+ disableRequiredAsterisk: k,
111
+ htmlFor: r,
112
+ labelId: S,
113
+ hintId: F,
114
+ labelExtra: I,
115
+ infoTooltip: N,
116
+ labelRight: C,
117
+ children: /* @__PURE__ */ l("div", { className: J({ state: p ? "disabled" : e ? "error" : "default" }), children: /* @__PURE__ */ l(
71
118
  "textarea",
72
119
  {
73
120
  "data-slot": "textarea",
74
- ref: l,
75
- id: e,
76
- required: r,
77
- "aria-required": r,
78
- className: F(
79
- $({ error: o, resize: m, autoResize: a }),
80
- d
121
+ ref: m,
122
+ id: r,
123
+ required: o,
124
+ "aria-required": o,
125
+ className: x(
126
+ E({ error: e, resize: z, autoResize: s }),
127
+ g
81
128
  ),
82
- ...h,
83
- onInput: a ? v : void 0
129
+ value: a,
130
+ defaultValue: d,
131
+ onChange: (t) => {
132
+ f || A(t.target.value.length), n == null || n(t);
133
+ },
134
+ disabled: p,
135
+ ...i,
136
+ onInput: s ? T : void 0
84
137
  }
85
- )
138
+ ) })
86
139
  }
87
140
  );
88
141
  }
89
142
  );
90
- N.displayName = "Textarea";
143
+ K.displayName = "Textarea";
91
144
  export {
92
- N as Textarea
145
+ K as Textarea
93
146
  };
@@ -10,5 +10,6 @@ export declare const Error: Story;
10
10
  export declare const Disabled: Story;
11
11
  export declare const Required: Story;
12
12
  export declare const AutoResize: Story;
13
+ export declare const WithCharacterCounter: Story;
13
14
  export declare const ResizableHandles: Story;
14
15
  //# sourceMappingURL=Textarea.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA8F/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAe9B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAA"}
1
+ {"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAyG/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAiBlC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAA"}