@studiolxd/brand 39.0.0 → 40.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/CHANGELOG.md +107 -0
  2. package/dist/_shared/brandmessagescontext.js +15 -0
  3. package/dist/_shared/calendargrid.js +42 -42
  4. package/dist/_shared/datepicker.js +41 -41
  5. package/dist/_shared/imagecropdialog.js +54 -54
  6. package/dist/_shared/tokens.js +1 -0
  7. package/dist/_types/messages/BrandMessages.d.ts +26 -0
  8. package/dist/_types/messages/BrandMessagesContext.d.ts +21 -0
  9. package/dist/_types/messages/BrandMessagesProvider.d.ts +46 -0
  10. package/dist/_types/messages/index.d.ts +5 -0
  11. package/dist/_types/molecules/Pagination/Pagination.d.ts +40 -23
  12. package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts +27 -5
  13. package/dist/_types/organisms/DataTable/DataTable.d.ts +3 -2
  14. package/dist/accordion.js +26 -26
  15. package/dist/alert.js +26 -26
  16. package/dist/annotation-thread.css +1 -1
  17. package/dist/annotation-thread.js +37 -26
  18. package/dist/app-header.js +8 -8
  19. package/dist/app-launcher.js +34 -34
  20. package/dist/app-shell.js +14 -14
  21. package/dist/assistant-message.js +8 -8
  22. package/dist/async-multi-select-field.js +9 -9
  23. package/dist/async-multi-select.js +40 -40
  24. package/dist/async-select-field.js +9 -9
  25. package/dist/async-select.js +64 -64
  26. package/dist/avatar-upload.js +40 -40
  27. package/dist/avatar.js +5 -5
  28. package/dist/banner.js +9 -9
  29. package/dist/brand.css +2 -1
  30. package/dist/button.js +7 -7
  31. package/dist/calendar-planner.js +16 -16
  32. package/dist/calendar.js +38 -38
  33. package/dist/card.js +28 -28
  34. package/dist/carousel.js +19 -19
  35. package/dist/chart.js +137 -137
  36. package/dist/chat-shell.js +23 -23
  37. package/dist/checkbox-field.js +11 -11
  38. package/dist/checkbox.js +7 -7
  39. package/dist/close-button.js +6 -6
  40. package/dist/code-block.js +15 -15
  41. package/dist/code.js +5 -5
  42. package/dist/collapsible.js +1 -1
  43. package/dist/columns.js +7 -7
  44. package/dist/command-palette.js +14 -14
  45. package/dist/confirm-dialog.js +10 -10
  46. package/dist/connector-auth-shell.js +9 -9
  47. package/dist/consent.js +23 -23
  48. package/dist/container.js +6 -6
  49. package/dist/conversation-list.js +19 -19
  50. package/dist/conversation-thread.js +15 -15
  51. package/dist/copy-button.js +9 -9
  52. package/dist/copyable-value.js +17 -17
  53. package/dist/data-table.js +29 -29
  54. package/dist/date-picker-field.js +9 -9
  55. package/dist/date-time-field.js +12 -12
  56. package/dist/description-list.js +12 -12
  57. package/dist/docs-search.js +1 -1
  58. package/dist/dots-button.js +7 -7
  59. package/dist/dropdown-field.js +13 -13
  60. package/dist/email.js +44 -44
  61. package/dist/error-text.js +4 -4
  62. package/dist/field-row.js +20 -20
  63. package/dist/figure.js +8 -8
  64. package/dist/file-upload-field.js +9 -9
  65. package/dist/file-upload.js +29 -29
  66. package/dist/filter-bar.js +10 -10
  67. package/dist/floating-dock.js +17 -17
  68. package/dist/form-field.js +43 -43
  69. package/dist/form.js +14 -14
  70. package/dist/heading.js +5 -5
  71. package/dist/input-field.js +20 -20
  72. package/dist/input-phone-field.js +9 -9
  73. package/dist/input-phone.js +19 -19
  74. package/dist/input.js +5 -5
  75. package/dist/kbd.js +5 -5
  76. package/dist/label.js +5 -5
  77. package/dist/link.js +7 -7
  78. package/dist/list.js +7 -7
  79. package/dist/menu-button.js +7 -7
  80. package/dist/message-bubble.js +5 -5
  81. package/dist/message-composer.js +13 -13
  82. package/dist/messages.js +12 -0
  83. package/dist/multi-select-field.js +9 -9
  84. package/dist/multi-select.js +52 -52
  85. package/dist/notification-button.js +8 -8
  86. package/dist/notification-panel.js +25 -25
  87. package/dist/number-input-field.js +9 -9
  88. package/dist/number-input.js +11 -11
  89. package/dist/otp-field.js +9 -9
  90. package/dist/otp-input.js +48 -48
  91. package/dist/pagination.js +92 -89
  92. package/dist/paragraph.js +5 -5
  93. package/dist/password-field.js +15 -15
  94. package/dist/prose.js +4 -4
  95. package/dist/public-page-shell.js +11 -11
  96. package/dist/radio-field.js +11 -11
  97. package/dist/radio-group.js +5 -5
  98. package/dist/radio.js +5 -5
  99. package/dist/scroll-area.js +11 -11
  100. package/dist/search-form.js +8 -8
  101. package/dist/select-field.js +9 -9
  102. package/dist/select.js +85 -85
  103. package/dist/separator.js +6 -6
  104. package/dist/sidebar.js +16 -16
  105. package/dist/site-header.js +14 -14
  106. package/dist/site-shell.js +6 -6
  107. package/dist/sparkline.js +9 -9
  108. package/dist/star-rating.js +24 -24
  109. package/dist/stat-tile.js +12 -12
  110. package/dist/steps.js +32 -32
  111. package/dist/switcher-field.js +13 -13
  112. package/dist/switcher.js +8 -8
  113. package/dist/table-of-contents.js +14 -14
  114. package/dist/tag.js +5 -5
  115. package/dist/text.js +7 -7
  116. package/dist/textarea-field.js +11 -11
  117. package/dist/textarea.js +5 -5
  118. package/dist/time-field.js +9 -9
  119. package/dist/time-select.js +17 -17
  120. package/dist/toaster.js +16 -16
  121. package/dist/toggle-group.js +7 -7
  122. package/dist/toggle.js +5 -5
  123. package/dist/tokens.css +2 -1
  124. package/dist/tooltip.js +16 -16
  125. package/dist/tree-view.js +41 -41
  126. package/dist/uptime-bars.js +34 -34
  127. package/dist/user-message.js +8 -8
  128. package/dist/visually-hidden.js +5 -5
  129. package/package.json +5 -1
  130. package/src/tokens/molecules/annotation-thread.css +1 -0
  131. package/src/tokens/scss/molecules/_annotation-thread.scss +1 -0
  132. package/src/tokens/tokens.json +1 -0
@@ -5,21 +5,21 @@ import { ErrorText as t } from "./error-text.js";
5
5
  import { Label as n } from "./label.js";
6
6
  import { FileUpload as r } from "./file-upload.js";
7
7
  import { n as i } from "./_shared/field-labels.js";
8
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
9
- import { forwardRef as s, useId as c } from "react";
8
+ import { forwardRef as a, useId as o } from "react";
9
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
10
10
  //#region src/stories/molecules/FileUploadField/FileUploadField.tsx
11
- var l = s(function({ id: s, label: l, labelHidden: u, errorMessage: d, helperText: f, error: p = !1, size: m, className: h, ...g }, _) {
12
- let v = i(u), y = e(m), b = c(), x = s ?? b, S = d ? `${x}-error` : void 0, C = f ? `${x}-helper` : void 0, w = [S, C].filter(Boolean).join(" ") || void 0, T = p || !!d;
13
- return /* @__PURE__ */ o("div", {
11
+ var l = a(function({ id: a, label: l, labelHidden: u, errorMessage: d, helperText: f, error: p = !1, size: m, className: h, ...g }, _) {
12
+ let v = i(u), y = e(m), b = o(), x = a ?? b, S = d ? `${x}-error` : void 0, C = f ? `${x}-helper` : void 0, w = [S, C].filter(Boolean).join(" ") || void 0, T = p || !!d;
13
+ return /* @__PURE__ */ c("div", {
14
14
  className: ["file-upload-field", h].filter(Boolean).join(" "),
15
15
  children: [
16
- /* @__PURE__ */ a(n, {
16
+ /* @__PURE__ */ s(n, {
17
17
  htmlFor: x,
18
18
  hidden: v,
19
19
  size: y,
20
20
  children: l
21
21
  }),
22
- /* @__PURE__ */ a(r, {
22
+ /* @__PURE__ */ s(r, {
23
23
  ref: _,
24
24
  ...g,
25
25
  id: x,
@@ -27,11 +27,11 @@ var l = s(function({ id: s, label: l, labelHidden: u, errorMessage: d, helperTex
27
27
  error: T,
28
28
  "aria-describedby": w
29
29
  }),
30
- d && /* @__PURE__ */ a(t, {
30
+ d && /* @__PURE__ */ s(t, {
31
31
  id: S,
32
32
  children: d
33
33
  }),
34
- f && /* @__PURE__ */ a("span", {
34
+ f && /* @__PURE__ */ s("span", {
35
35
  id: C,
36
36
  className: "file-upload-field__helper",
37
37
  children: f
@@ -5,8 +5,8 @@ import { VisuallyHidden as t } from "./visually-hidden.js";
5
5
  import { n } from "./_shared/form-size.js";
6
6
  import { t as r } from "./_shared/progressbar.js";
7
7
  import { n as i, t as a } from "./_shared/validate.js";
8
- import { jsx as o, jsxs as s } from "react/jsx-runtime";
9
- import { forwardRef as c, useCallback as l, useEffect as u, useId as ee, useRef as d, useState as f } from "react";
8
+ import { forwardRef as o, useCallback as s, useEffect as c, useId as ee, useRef as l, useState as u } from "react";
9
+ import { jsx as d, jsxs as f } from "react/jsx-runtime";
10
10
  //#region src/stories/atoms/FileUpload/FileUpload.tsx
11
11
  var p = /* @__PURE__ */ new WeakMap();
12
12
  function te(e) {
@@ -21,17 +21,17 @@ function m(e) {
21
21
  function h(e, t) {
22
22
  typeof e == "function" ? e(t) : e && (e.current = t);
23
23
  }
24
- var g = c(function({ multiple: c = !1, accept: p, maxSize: g, maxFiles: _, value: v, defaultValue: y = [], onChange: b, progress: x, disabled: S = !1, error: C = !1, id: w, name: T, describedBy: E, ariaLabel: D, "aria-describedby": O, "aria-label": k, required: ne, onBlur: re, className: ie, dropzoneLabel: A = "Arrastra archivos aquí", dropzoneActiveLabel: ae = "Suelta los archivos aquí", dropzoneHintLabel: j = "o haz clic para seleccionar", maxSizeHint: oe = (e) => `máx. ${e}`, maxFilesHint: se = (e) => `hasta ${e} archivos`, filesLabel: ce = "Archivos seleccionados", progressLabel: le = "Progreso de subida", removeFileLabel: M = (e) => `Eliminar ${e}`, tooLargeError: N = (e) => `Archivo demasiado grande (máx. ${e})`, invalidTypeError: P = "Tipo de archivo no permitido", size: F }, I) {
25
- let L = n(F), R = L === "sm" ? "sm" : L === "lg" ? "lg" : "md", z = v !== void 0, [B, V] = f(y), [H, U] = f(/* @__PURE__ */ new Map()), [W, G] = f(!1), K = d(/* @__PURE__ */ new Set()), q = d(null), ue = ee(), J = w ?? `file-upload-${ue}`, Y = z ? v : B;
26
- u(() => {
24
+ var g = o(function({ multiple: o = !1, accept: p, maxSize: g, maxFiles: _, value: v, defaultValue: y = [], onChange: b, progress: x, disabled: S = !1, error: C = !1, id: w, name: T, describedBy: E, ariaLabel: D, "aria-describedby": O, "aria-label": k, required: ne, onBlur: re, className: ie, dropzoneLabel: A = "Arrastra archivos aquí", dropzoneActiveLabel: ae = "Suelta los archivos aquí", dropzoneHintLabel: j = "o haz clic para seleccionar", maxSizeHint: oe = (e) => `máx. ${e}`, maxFilesHint: se = (e) => `hasta ${e} archivos`, filesLabel: ce = "Archivos seleccionados", progressLabel: le = "Progreso de subida", removeFileLabel: M = (e) => `Eliminar ${e}`, tooLargeError: N = (e) => `Archivo demasiado grande (máx. ${e})`, invalidTypeError: P = "Tipo de archivo no permitido", size: F }, I) {
25
+ let L = n(F), R = L === "sm" ? "sm" : L === "lg" ? "lg" : "md", z = v !== void 0, [B, V] = u(y), [H, U] = u(/* @__PURE__ */ new Map()), [W, G] = u(!1), K = l(/* @__PURE__ */ new Set()), q = l(null), ue = ee(), J = w ?? `file-upload-${ue}`, Y = z ? v : B;
26
+ c(() => {
27
27
  Y.forEach((e) => K.current.add(e));
28
- }, [Y]), u(() => {
28
+ }, [Y]), c(() => {
29
29
  let e = K.current;
30
30
  return () => {
31
31
  e.forEach(m);
32
32
  };
33
33
  }, []);
34
- let X = l((e) => {
34
+ let X = s((e) => {
35
35
  if (S) return;
36
36
  let t = Array.from(e), n = z ? v ?? [] : B, r = new Map(H), a = [...n];
37
37
  for (let e of t) {
@@ -52,7 +52,7 @@ var g = c(function({ multiple: c = !1, accept: p, maxSize: g, maxFiles: _, value
52
52
  b,
53
53
  N,
54
54
  P
55
- ]), de = l((e) => {
55
+ ]), de = s((e) => {
56
56
  let t = (z ? v ?? [] : B).filter((t) => t !== e), n = new Map(H);
57
57
  n.delete(e), m(e), U(n), z || V(t), b?.(t.filter((e) => !n.has(e))), q.current && (q.current.value = "");
58
58
  }, [
@@ -80,17 +80,17 @@ var g = c(function({ multiple: c = !1, accept: p, maxSize: g, maxFiles: _, value
80
80
  Y.length > 0 ? "file-upload--has-files" : "",
81
81
  ie ?? ""
82
82
  ].filter(Boolean).join(" "), Q = `${J}-hint`, _e = [E ?? O, Q].filter(Boolean).join(" "), $ = [];
83
- return p && $.push(p), g && $.push(oe(a(g))), c && _ && $.push(se(_)), /* @__PURE__ */ s("div", {
83
+ return p && $.push(p), g && $.push(oe(a(g))), o && _ && $.push(se(_)), /* @__PURE__ */ f("div", {
84
84
  className: ge,
85
85
  children: [
86
- /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o("input", {
86
+ /* @__PURE__ */ d(t, { children: /* @__PURE__ */ d("input", {
87
87
  ref: (e) => {
88
88
  q.current = e, h(I, e);
89
89
  },
90
90
  type: "file",
91
91
  id: J,
92
92
  name: T,
93
- multiple: c,
93
+ multiple: o,
94
94
  accept: p,
95
95
  disabled: S,
96
96
  required: ne,
@@ -100,7 +100,7 @@ var g = c(function({ multiple: c = !1, accept: p, maxSize: g, maxFiles: _, value
100
100
  onChange: fe,
101
101
  onBlur: re
102
102
  }) }),
103
- /* @__PURE__ */ s("div", {
103
+ /* @__PURE__ */ f("div", {
104
104
  className: "file-upload__dropzone",
105
105
  onClick: Z,
106
106
  onDragOver: pe,
@@ -108,26 +108,26 @@ var g = c(function({ multiple: c = !1, accept: p, maxSize: g, maxFiles: _, value
108
108
  onDrop: he,
109
109
  "aria-hidden": "true",
110
110
  children: [
111
- /* @__PURE__ */ o(e, {
111
+ /* @__PURE__ */ d(e, {
112
112
  name: "upload",
113
113
  size: R,
114
114
  className: "file-upload__icon"
115
115
  }),
116
- /* @__PURE__ */ o("span", {
116
+ /* @__PURE__ */ d("span", {
117
117
  className: "file-upload__text",
118
118
  children: W ? ae : A
119
119
  }),
120
- /* @__PURE__ */ o("span", {
120
+ /* @__PURE__ */ d("span", {
121
121
  className: "file-upload__text file-upload__text--secondary",
122
122
  children: j
123
123
  }),
124
- $.length > 0 && /* @__PURE__ */ o("span", {
124
+ $.length > 0 && /* @__PURE__ */ d("span", {
125
125
  className: "file-upload__subtext",
126
126
  children: $.join(" · ")
127
127
  })
128
128
  ]
129
129
  }),
130
- /* @__PURE__ */ o(t, {
130
+ /* @__PURE__ */ d(t, {
131
131
  id: Q,
132
132
  children: [
133
133
  A,
@@ -135,49 +135,49 @@ var g = c(function({ multiple: c = !1, accept: p, maxSize: g, maxFiles: _, value
135
135
  ...$
136
136
  ].join(". ")
137
137
  }),
138
- Y.length > 0 && /* @__PURE__ */ o("ul", {
138
+ Y.length > 0 && /* @__PURE__ */ d("ul", {
139
139
  className: "file-upload__list",
140
140
  "aria-label": ce,
141
141
  children: Y.map((t, n) => {
142
142
  let r = H.get(t), i = te(t);
143
- return /* @__PURE__ */ s("li", {
143
+ return /* @__PURE__ */ f("li", {
144
144
  className: `file-upload__item${r ? " file-upload__item--error" : ""}`,
145
145
  children: [
146
- /* @__PURE__ */ o("div", {
146
+ /* @__PURE__ */ d("div", {
147
147
  className: "file-upload__item-thumb",
148
148
  "aria-hidden": "true",
149
- children: i ? /* @__PURE__ */ o("img", {
149
+ children: i ? /* @__PURE__ */ d("img", {
150
150
  src: i,
151
151
  alt: ""
152
- }) : /* @__PURE__ */ o(e, {
152
+ }) : /* @__PURE__ */ d(e, {
153
153
  name: "file-text",
154
154
  size: "sm"
155
155
  })
156
156
  }),
157
- /* @__PURE__ */ s("div", {
157
+ /* @__PURE__ */ f("div", {
158
158
  className: "file-upload__item-info",
159
159
  children: [
160
- /* @__PURE__ */ o("span", {
160
+ /* @__PURE__ */ d("span", {
161
161
  className: "file-upload__item-name",
162
162
  children: t.name
163
163
  }),
164
- /* @__PURE__ */ o("span", {
164
+ /* @__PURE__ */ d("span", {
165
165
  className: "file-upload__item-size",
166
166
  children: a(t.size)
167
167
  }),
168
- r && /* @__PURE__ */ o("span", {
168
+ r && /* @__PURE__ */ d("span", {
169
169
  className: "file-upload__item-error-msg",
170
170
  role: "alert",
171
171
  children: r
172
172
  })
173
173
  ]
174
174
  }),
175
- /* @__PURE__ */ o("button", {
175
+ /* @__PURE__ */ d("button", {
176
176
  className: "file-upload__item-remove",
177
177
  type: "button",
178
178
  onClick: () => de(t),
179
179
  "aria-label": M(t.name),
180
- children: /* @__PURE__ */ o(e, {
180
+ children: /* @__PURE__ */ d(e, {
181
181
  name: "close",
182
182
  size: "sm"
183
183
  })
@@ -186,7 +186,7 @@ var g = c(function({ multiple: c = !1, accept: p, maxSize: g, maxFiles: _, value
186
186
  }, `${t.name}-${t.size}-${n}`);
187
187
  })
188
188
  }),
189
- x !== void 0 && /* @__PURE__ */ o(r, {
189
+ x !== void 0 && /* @__PURE__ */ d(r, {
190
190
  value: x,
191
191
  label: le,
192
192
  size: "sm",
@@ -1,26 +1,26 @@
1
1
  import './filter-bar.css';
2
- import { jsx as e, jsxs as t } from "react/jsx-runtime";
3
- import { Children as n } from "react";
2
+ import { Children as e } from "react";
3
+ import { jsx as t, jsxs as n } from "react/jsx-runtime";
4
4
  //#region src/stories/molecules/FilterBar/FilterBar.tsx
5
5
  function r({ search: r, children: i, actions: a, ariaLabel: o = "Filtros", className: s, ...c }) {
6
- let l = n.toArray(i);
7
- return /* @__PURE__ */ t("div", {
6
+ let l = e.toArray(i);
7
+ return /* @__PURE__ */ n("div", {
8
8
  className: ["filter-bar", s].filter(Boolean).join(" "),
9
9
  role: "search",
10
10
  "aria-label": o,
11
11
  ...c,
12
- children: [r && /* @__PURE__ */ e("div", {
12
+ children: [r && /* @__PURE__ */ t("div", {
13
13
  className: "filter-bar__search",
14
14
  children: r
15
- }), (l.length > 0 || a) && /* @__PURE__ */ t("div", {
15
+ }), (l.length > 0 || a) && /* @__PURE__ */ n("div", {
16
16
  className: "filter-bar__row",
17
- children: [l.length > 0 && /* @__PURE__ */ e("div", {
17
+ children: [l.length > 0 && /* @__PURE__ */ t("div", {
18
18
  className: "filter-bar__filters",
19
- children: l.map((t, n) => /* @__PURE__ */ e("div", {
19
+ children: l.map((e, n) => /* @__PURE__ */ t("div", {
20
20
  className: "filter-bar__filter",
21
- children: t
21
+ children: e
22
22
  }, n))
23
- }), a && /* @__PURE__ */ e("div", {
23
+ }), a && /* @__PURE__ */ t("div", {
24
24
  className: "filter-bar__actions",
25
25
  children: a
26
26
  })]
@@ -5,34 +5,34 @@ import { VisuallyHidden as t } from "./visually-hidden.js";
5
5
  import { Button as n } from "./button.js";
6
6
  import { CloseButton as r } from "./close-button.js";
7
7
  import { NumberBadge as i } from "./number-badge.js";
8
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
9
- import { useState as s } from "react";
8
+ import { useState as a } from "react";
9
+ import { jsx as o, jsxs as s } from "react/jsx-runtime";
10
10
  import { Dialog as c } from "@base-ui/react/dialog";
11
11
  //#region src/stories/sections/FloatingDock/FloatingDock.tsx
12
12
  function l({ label: l, title: u, titleHidden: d = !1, description: f, children: p, icon: m, position: h = "bottom-end", open: g, defaultOpen: _, onOpenChange: v, closeLabel: y = "Cerrar", badge: b = 0, badgeMax: x = 99, badgeLabel: S = (e) => `${e} mensajes nuevos`, badgeLive: C = !0, dismissOnOutsidePress: w = !1, className: T, ...E }) {
13
- let [D, O] = s(null);
14
- return /* @__PURE__ */ a("div", {
13
+ let [D, O] = a(null);
14
+ return /* @__PURE__ */ o("div", {
15
15
  ref: O,
16
16
  className: ["floating-dock", T].filter(Boolean).join(" "),
17
17
  "data-position": h,
18
18
  ...E,
19
- children: /* @__PURE__ */ o(c.Root, {
19
+ children: /* @__PURE__ */ s(c.Root, {
20
20
  open: g,
21
21
  defaultOpen: _,
22
22
  modal: !1,
23
23
  disablePointerDismissal: !w,
24
24
  onOpenChange: (e) => v?.(e),
25
25
  children: [
26
- /* @__PURE__ */ a(c.Trigger, { render: /* @__PURE__ */ o(n, {
26
+ /* @__PURE__ */ o(c.Trigger, { render: /* @__PURE__ */ s(n, {
27
27
  variant: "primary",
28
28
  size: "lg",
29
29
  iconOnly: !0,
30
30
  "aria-label": l,
31
31
  className: "floating-dock__trigger",
32
- children: [m ?? /* @__PURE__ */ a(e, {
32
+ children: [m ?? /* @__PURE__ */ o(e, {
33
33
  name: "message",
34
34
  size: "md"
35
- }), b > 0 && /* @__PURE__ */ a(i, {
35
+ }), b > 0 && /* @__PURE__ */ o(i, {
36
36
  count: b,
37
37
  max: x,
38
38
  variant: "danger",
@@ -40,31 +40,31 @@ function l({ label: l, title: u, titleHidden: d = !1, description: f, children:
40
40
  className: "floating-dock__badge"
41
41
  })]
42
42
  }) }),
43
- C && b > 0 && /* @__PURE__ */ a(t, {
43
+ C && b > 0 && /* @__PURE__ */ o(t, {
44
44
  "aria-live": "polite",
45
45
  children: S(b)
46
46
  }),
47
- D && /* @__PURE__ */ a(c.Portal, {
47
+ D && /* @__PURE__ */ o(c.Portal, {
48
48
  container: D,
49
49
  className: "floating-dock__portal",
50
- children: /* @__PURE__ */ o(c.Popup, {
50
+ children: /* @__PURE__ */ s(c.Popup, {
51
51
  className: "floating-dock__panel",
52
52
  children: [
53
- /* @__PURE__ */ o("header", {
53
+ /* @__PURE__ */ s("header", {
54
54
  className: "floating-dock__header",
55
- children: [d ? /* @__PURE__ */ a(c.Title, { render: /* @__PURE__ */ a(t, { children: u }) }) : /* @__PURE__ */ a(c.Title, {
55
+ children: [d ? /* @__PURE__ */ o(c.Title, { render: /* @__PURE__ */ o(t, { children: u }) }) : /* @__PURE__ */ o(c.Title, {
56
56
  className: "floating-dock__title",
57
57
  children: u
58
- }), f != null && /* @__PURE__ */ a(c.Description, {
58
+ }), f != null && /* @__PURE__ */ o(c.Description, {
59
59
  className: "floating-dock__description",
60
60
  children: f
61
61
  })]
62
62
  }),
63
- /* @__PURE__ */ a(c.Close, {
63
+ /* @__PURE__ */ o(c.Close, {
64
64
  className: "floating-dock__close",
65
- render: /* @__PURE__ */ a(r, { label: y })
65
+ render: /* @__PURE__ */ o(r, { label: y })
66
66
  }),
67
- /* @__PURE__ */ a("div", {
67
+ /* @__PURE__ */ o("div", {
68
68
  className: "floating-dock__body",
69
69
  children: p
70
70
  })
@@ -1,27 +1,27 @@
1
1
  'use client';
2
2
  import './form-field.css';
3
3
  import { Label as e } from "./label.js";
4
- import { jsx as t } from "react/jsx-runtime";
5
- import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useMemo as s, useState as c } from "react";
4
+ import { createContext as t, useCallback as n, useContext as r, useEffect as i, useId as a, useMemo as o, useState as s } from "react";
5
+ import { jsx as c } from "react/jsx-runtime";
6
6
  import { useRender as l } from "@base-ui/react/use-render";
7
7
  import { Controller as u, FormProvider as d, useFormContext as f } from "react-hook-form";
8
8
  //#region src/stories/molecules/FormField/FormField.tsx
9
- var p = n(void 0);
10
- function m({ translate: e, children: n, ...r }) {
11
- return /* @__PURE__ */ t(p.Provider, {
9
+ var p = t(void 0);
10
+ function m({ translate: e, children: t, ...n }) {
11
+ return /* @__PURE__ */ c(p.Provider, {
12
12
  value: e,
13
- children: /* @__PURE__ */ t(d, {
14
- ...r,
15
- children: n
13
+ children: /* @__PURE__ */ c(d, {
14
+ ...n,
15
+ children: t
16
16
  })
17
17
  });
18
18
  }
19
- var h = n({}), g = ({ ...e }) => /* @__PURE__ */ t(h.Provider, {
19
+ var h = t({}), g = ({ ...e }) => /* @__PURE__ */ c(h.Provider, {
20
20
  value: { name: e.name },
21
- children: /* @__PURE__ */ t(u, { ...e })
22
- }), _ = n({});
21
+ children: /* @__PURE__ */ c(u, { ...e })
22
+ }), _ = t({});
23
23
  function v() {
24
- let e = i(h), t = i(_), { getFieldState: n, formState: r } = f(), a = n(e.name, r), { id: o, described: s, register: c } = t;
24
+ let e = r(h), t = r(_), { getFieldState: n, formState: i } = f(), a = n(e.name, i), { id: o, described: s, register: c } = t;
25
25
  return {
26
26
  id: o,
27
27
  name: e.name,
@@ -33,38 +33,38 @@ function v() {
33
33
  ...a
34
34
  };
35
35
  }
36
- function y({ className: e, ...n }) {
37
- let i = o(), [a, l] = c({
36
+ function y({ className: e, ...t }) {
37
+ let r = a(), [i, l] = s({
38
38
  description: !1,
39
39
  message: !1
40
- }), u = r((e, t) => {
40
+ }), u = n((e, t) => {
41
41
  l((n) => n[e] === t ? n : {
42
42
  ...n,
43
43
  [e]: t
44
44
  });
45
- }, []), d = s(() => ({
46
- id: i,
47
- described: a,
45
+ }, []), d = o(() => ({
46
+ id: r,
47
+ described: i,
48
48
  register: u
49
49
  }), [
50
+ r,
50
51
  i,
51
- a,
52
52
  u
53
53
  ]);
54
- return /* @__PURE__ */ t(_.Provider, {
54
+ return /* @__PURE__ */ c(_.Provider, {
55
55
  value: d,
56
- children: /* @__PURE__ */ t("div", {
56
+ children: /* @__PURE__ */ c("div", {
57
57
  className: ["form-field", e].filter(Boolean).join(" "),
58
- ...n
58
+ ...t
59
59
  })
60
60
  });
61
61
  }
62
- function b({ ...n }) {
63
- let { error: r, formItemId: i } = v();
64
- return /* @__PURE__ */ t(e, {
65
- "data-error": !!r,
66
- htmlFor: i,
67
- ...n
62
+ function b({ ...t }) {
63
+ let { error: n, formItemId: r } = v();
64
+ return /* @__PURE__ */ c(e, {
65
+ "data-error": !!n,
66
+ htmlFor: r,
67
+ ...t
68
68
  });
69
69
  }
70
70
  function x({ children: e, ...t }) {
@@ -79,31 +79,31 @@ function x({ children: e, ...t }) {
79
79
  }
80
80
  });
81
81
  }
82
- function S({ className: e, ...n }) {
83
- let { formDescriptionId: r, register: i } = v();
84
- return a(() => (i("description", !0), () => i("description", !1)), [i]), /* @__PURE__ */ t("p", {
85
- id: r,
82
+ function S({ className: e, ...t }) {
83
+ let { formDescriptionId: n, register: r } = v();
84
+ return i(() => (r("description", !0), () => r("description", !1)), [r]), /* @__PURE__ */ c("p", {
85
+ id: n,
86
86
  className: ["form-field__description", e].filter(Boolean).join(" "),
87
- ...n
87
+ ...t
88
88
  });
89
89
  }
90
- function C({ className: e, children: n, ...r }) {
91
- let { error: o, formMessageId: s, register: c } = v(), l = i(p), u = o ? String(o?.message ?? "") : "", d = o ? l && u ? l(u) : u : n, f = !!d;
92
- return a(() => (c("message", f), () => c("message", !1)), [c, f]), d ? /* @__PURE__ */ t("p", {
93
- id: s,
90
+ function C({ className: e, children: t, ...n }) {
91
+ let { error: a, formMessageId: o, register: s } = v(), l = r(p), u = a ? String(a?.message ?? "") : "", d = a ? l && u ? l(u) : u : t, f = !!d;
92
+ return i(() => (s("message", f), () => s("message", !1)), [s, f]), d ? /* @__PURE__ */ c("p", {
93
+ id: o,
94
94
  role: "alert",
95
95
  className: ["form-field__message", e].filter(Boolean).join(" "),
96
- ...r,
96
+ ...n,
97
97
  children: d
98
98
  }) : null;
99
99
  }
100
- function w({ className: e, ...n }) {
101
- let { formState: r } = f(), a = i(p), o = r.errors.root?.message, s = o && a ? a(String(o)) : o;
102
- return s ? /* @__PURE__ */ t("p", {
100
+ function w({ className: e, ...t }) {
101
+ let { formState: n } = f(), i = r(p), a = n.errors.root?.message, o = a && i ? i(String(a)) : a;
102
+ return o ? /* @__PURE__ */ c("p", {
103
103
  role: "alert",
104
104
  className: ["form-error", e].filter(Boolean).join(" "),
105
- ...n,
106
- children: s
105
+ ...t,
106
+ children: o
107
107
  }) : null;
108
108
  }
109
109
  //#endregion
package/dist/form.js CHANGED
@@ -2,55 +2,55 @@
2
2
  import './form.css';
3
3
  import { t as e } from "./_shared/form-size.js";
4
4
  import { ErrorText as t } from "./error-text.js";
5
- import { jsx as n, jsxs as r } from "react/jsx-runtime";
6
- import { forwardRef as i } from "react";
5
+ import { forwardRef as n } from "react";
6
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
7
7
  //#region src/stories/molecules/Form/Form.tsx
8
- var a = i(function({ errors: i, actions: a, links: o, alternatives: s, alternativesLabel: c, captcha: l, size: u, blockActions: d = !1, success: f, className: p, children: m, ...h }, g) {
8
+ var a = n(function({ errors: n, actions: a, links: o, alternatives: s, alternativesLabel: c, captcha: l, size: u, blockActions: d = !1, success: f, className: p, children: m, ...h }, g) {
9
9
  let _ = [
10
10
  "form",
11
11
  u && u !== "md" ? `form--${u}` : "",
12
12
  d ? "form--block-actions" : "",
13
13
  p
14
14
  ].filter(Boolean).join(" ");
15
- return /* @__PURE__ */ n(e.Provider, {
15
+ return /* @__PURE__ */ r(e.Provider, {
16
16
  value: u,
17
- children: /* @__PURE__ */ r("form", {
17
+ children: /* @__PURE__ */ i("form", {
18
18
  ref: g,
19
19
  className: _,
20
20
  noValidate: !0,
21
21
  ...h,
22
22
  children: [
23
- f && /* @__PURE__ */ n("p", {
23
+ f && /* @__PURE__ */ r("p", {
24
24
  className: "form__success",
25
25
  role: "status",
26
26
  children: f
27
27
  }),
28
- !f && m && /* @__PURE__ */ n("div", {
28
+ !f && m && /* @__PURE__ */ r("div", {
29
29
  className: "form__fields",
30
30
  children: m
31
31
  }),
32
- !f && l && /* @__PURE__ */ n("div", {
32
+ !f && l && /* @__PURE__ */ r("div", {
33
33
  className: "form__captcha",
34
34
  children: l
35
35
  }),
36
- !f && i && i.length > 0 && /* @__PURE__ */ n("ul", {
36
+ !f && n && n.length > 0 && /* @__PURE__ */ r("ul", {
37
37
  className: "form__errors",
38
- children: i.map((e) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(t, {
38
+ children: n.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(t, {
39
39
  as: "span",
40
40
  children: e
41
41
  }) }, e))
42
42
  }),
43
- !f && a && /* @__PURE__ */ n("div", {
43
+ !f && a && /* @__PURE__ */ r("div", {
44
44
  className: ["form__actions", d ? "form__actions--block" : ""].filter(Boolean).join(" "),
45
45
  children: a
46
46
  }),
47
- o && /* @__PURE__ */ n("div", {
47
+ o && /* @__PURE__ */ r("div", {
48
48
  className: "form__links",
49
49
  children: o
50
50
  }),
51
- !f && s && /* @__PURE__ */ r("div", {
51
+ !f && s && /* @__PURE__ */ i("div", {
52
52
  className: "form__alternatives",
53
- children: [c && /* @__PURE__ */ n("p", {
53
+ children: [c && /* @__PURE__ */ r("p", {
54
54
  className: "form__alternatives-label",
55
55
  children: c
56
56
  }), s]
package/dist/heading.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import './heading.css';
2
- import { jsx as e } from "react/jsx-runtime";
3
- import { forwardRef as t } from "react";
2
+ import { forwardRef as e } from "react";
3
+ import { jsx as t } from "react/jsx-runtime";
4
4
  //#region src/stories/atoms/Heading/Heading.tsx
5
- var n = t(function({ level: t = 2, size: n, className: r, children: i, ...a }, o) {
6
- return /* @__PURE__ */ e(`h${t}`, {
5
+ var n = e(function({ level: e = 2, size: n, className: r, children: i, ...a }, o) {
6
+ return /* @__PURE__ */ t(`h${e}`, {
7
7
  ref: o,
8
8
  className: [
9
9
  "heading",
10
- `heading--${t}`,
10
+ `heading--${e}`,
11
11
  n && `heading--size-${n}`,
12
12
  r
13
13
  ].filter(Boolean).join(" "),