@studiolxd/brand 45.1.0 → 46.0.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 (16) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/_types/messages/BrandMessages.d.ts +13 -1
  3. package/dist/_types/messages/index.d.ts +1 -1
  4. package/dist/_types/molecules/AppLauncher/AppLauncher.d.ts +43 -8
  5. package/dist/_types/molecules/CommandPalette/CommandPalette.d.ts +43 -8
  6. package/dist/_types/molecules/Consent/Consent.d.ts +93 -20
  7. package/dist/_types/molecules/NotificationButton/NotificationButton.d.ts +17 -4
  8. package/dist/_types/molecules/NotificationPanel/NotificationPanel.d.ts +54 -8
  9. package/dist/_types/sections/FloatingDock/FloatingDock.d.ts +33 -3
  10. package/dist/app-launcher.js +67 -61
  11. package/dist/command-palette.js +38 -36
  12. package/dist/consent.js +75 -73
  13. package/dist/floating-dock.js +42 -41
  14. package/dist/notification-button.js +18 -17
  15. package/dist/notification-panel.js +81 -80
  16. package/package.json +1 -1
package/dist/app-launcher.js CHANGED
@@ -1,119 +1,125 @@
1
1
  'use client';
2
2
  import './app-launcher.css';
3
- import { Icon as e } from "./icon.js";
4
- import { Tag as t } from "./tag.js";
5
- import { Modal as n } from "./modal.js";
6
- import { useState as r } from "react";
7
- import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
8
- import { Popover as s } from "@base-ui/react/popover";
3
+ import { n as e } from "./_shared/brandmessagescontext.js";
4
+ import { Icon as t } from "./icon.js";
5
+ import { Tag as n } from "./tag.js";
6
+ import { Modal as r } from "./modal.js";
7
+ import { useState as i } from "react";
8
+ import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
9
+ import { Popover as c } from "@base-ui/react/popover";
9
10
  //#region src/stories/molecules/AppLauncher/AppLauncher.tsx
10
- function c({ app: e, isCurrent: n, newLabel: r }) {
11
- return /* @__PURE__ */ o("a", {
12
- href: e.url,
13
- className: `app-launcher__tile${n ? " app-launcher__tile--active" : ""}`,
14
- "aria-current": n ? "page" : void 0,
15
- children: [/* @__PURE__ */ a("span", {
11
+ function l({ app: t, isCurrent: r, newLabel: i }) {
12
+ let a = e("appLauncher");
13
+ return /* @__PURE__ */ s("a", {
14
+ href: t.url,
15
+ className: `app-launcher__tile${r ? " app-launcher__tile--active" : ""}`,
16
+ "aria-current": r ? "page" : void 0,
17
+ children: [/* @__PURE__ */ o("span", {
16
18
  className: "app-launcher__tile-name",
17
- children: e.name
18
- }), e.isNew && /* @__PURE__ */ a(t, {
19
+ children: t.name
20
+ }), t.isNew && /* @__PURE__ */ o(n, {
19
21
  variant: "info",
20
22
  className: "app-launcher__tile-badge",
21
- children: r
23
+ children: a("new", i)
22
24
  })]
23
25
  });
24
26
  }
25
- function l({ apps: e, currentAppId: t, newLabel: n }) {
26
- return /* @__PURE__ */ a("ul", {
27
+ function u({ apps: e, currentAppId: t, newLabel: n }) {
28
+ return /* @__PURE__ */ o("ul", {
27
29
  className: "app-launcher__grid",
28
30
  role: "list",
29
- children: e.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(c, {
31
+ children: e.map((e) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(l, {
30
32
  app: e,
31
33
  isCurrent: e.id === t,
32
34
  newLabel: n
33
35
  }) }, e.id))
34
36
  });
35
37
  }
36
- function u({ apps: t, labels: n, currentAppId: r, open: i, defaultOpen: c, onOpenChange: u }) {
37
- return /* @__PURE__ */ o(s.Root, {
38
- open: i,
39
- defaultOpen: c,
40
- onOpenChange: (e) => u?.(e),
41
- children: [/* @__PURE__ */ a(s.Trigger, { render: n.trigger ? /* @__PURE__ */ o("button", {
38
+ function d({ apps: n, labels: r, currentAppId: i, open: a, defaultOpen: l, onOpenChange: d }) {
39
+ let f = e("appLauncher");
40
+ return /* @__PURE__ */ s(c.Root, {
41
+ open: a,
42
+ defaultOpen: l,
43
+ onOpenChange: (e) => d?.(e),
44
+ children: [/* @__PURE__ */ o(c.Trigger, { render: r.trigger ? /* @__PURE__ */ s("button", {
42
45
  type: "button",
43
46
  className: "app-launcher__trigger app-launcher__trigger--label",
44
- children: [/* @__PURE__ */ a(e, {
47
+ children: [/* @__PURE__ */ o(t, {
45
48
  name: "grid",
46
49
  size: "md"
47
- }), /* @__PURE__ */ a("span", {
50
+ }), /* @__PURE__ */ o("span", {
48
51
  className: "app-launcher__trigger-label",
49
- children: n.trigger
52
+ children: r.trigger
50
53
  })]
51
- }) : /* @__PURE__ */ a("button", {
54
+ }) : /* @__PURE__ */ o("button", {
52
55
  type: "button",
53
56
  className: "app-launcher__trigger",
54
- "aria-label": n.open,
55
- children: /* @__PURE__ */ a(e, {
57
+ "aria-label": f("open", r.open),
58
+ children: /* @__PURE__ */ o(t, {
56
59
  name: "grid",
57
60
  size: "md"
58
61
  })
59
- }) }), /* @__PURE__ */ a(s.Portal, { children: /* @__PURE__ */ a(s.Positioner, {
62
+ }) }), /* @__PURE__ */ o(c.Portal, { children: /* @__PURE__ */ o(c.Positioner, {
60
63
  className: "app-launcher__positioner",
61
64
  sideOffset: 4,
62
65
  align: "end",
63
- children: /* @__PURE__ */ a(s.Popup, {
66
+ children: /* @__PURE__ */ o(c.Popup, {
64
67
  className: "app-launcher__content",
65
- children: /* @__PURE__ */ a(l, {
66
- apps: t,
67
- currentAppId: r,
68
- newLabel: n.new
68
+ children: /* @__PURE__ */ o(u, {
69
+ apps: n,
70
+ currentAppId: i,
71
+ newLabel: r.new
69
72
  })
70
73
  })
71
74
  }) })]
72
75
  });
73
76
  }
74
- function d(e, t, n) {
75
- let [i, a] = r(t ?? !1);
76
- return [e ?? i, (t) => {
77
+ function f(e, t, n) {
78
+ let [r, a] = i(t ?? !1);
79
+ return [e ?? r, (t) => {
77
80
  e === void 0 && a(t), n?.(t);
78
81
  }];
79
82
  }
80
- function f({ apps: t, labels: r, currentAppId: s, open: c, defaultOpen: u, onOpenChange: f }) {
81
- let [p, m] = d(c, u, f);
82
- return /* @__PURE__ */ o(i, { children: [r.trigger ? /* @__PURE__ */ o("button", {
83
+ function p({ apps: n, labels: i, currentAppId: c, open: l, defaultOpen: d, onOpenChange: p }) {
84
+ let m = e("appLauncher"), [h, g] = f(l, d, p);
85
+ return /* @__PURE__ */ s(a, { children: [i.trigger ? /* @__PURE__ */ s("button", {
83
86
  type: "button",
84
87
  className: "app-launcher__trigger app-launcher__trigger--label",
85
88
  "aria-haspopup": "dialog",
86
- onClick: () => m(!0),
87
- children: [/* @__PURE__ */ a(e, {
89
+ onClick: () => g(!0),
90
+ children: [/* @__PURE__ */ o(t, {
88
91
  name: "grid",
89
92
  size: "md"
90
- }), /* @__PURE__ */ a("span", {
93
+ }), /* @__PURE__ */ o("span", {
91
94
  className: "app-launcher__trigger-label",
92
- children: r.trigger
95
+ children: i.trigger
93
96
  })]
94
- }) : /* @__PURE__ */ a("button", {
97
+ }) : /* @__PURE__ */ o("button", {
95
98
  type: "button",
96
99
  className: "app-launcher__trigger",
97
- "aria-label": r.open,
100
+ "aria-label": m("open", i.open),
98
101
  "aria-haspopup": "dialog",
99
- onClick: () => m(!0),
100
- children: /* @__PURE__ */ a(e, {
102
+ onClick: () => g(!0),
103
+ children: /* @__PURE__ */ o(t, {
101
104
  name: "grid",
102
105
  size: "md"
103
106
  })
104
- }), /* @__PURE__ */ a(n, {
105
- open: p,
106
- onClose: () => m(!1),
107
- title: r.title ?? "Aplicaciones",
108
- children: /* @__PURE__ */ a(l, {
109
- apps: t,
110
- currentAppId: s,
111
- newLabel: r.new
107
+ }), /* @__PURE__ */ o(r, {
108
+ open: h,
109
+ onClose: () => g(!1),
110
+ title: m("title", i.title),
111
+ children: /* @__PURE__ */ o(u, {
112
+ apps: n,
113
+ currentAppId: c,
114
+ newLabel: i.new
112
115
  })
113
116
  })] });
114
117
  }
115
- function p({ presentation: e = "modal", ...t }) {
116
- return a(e === "popover" ? u : f, { ...t });
118
+ function m({ presentation: e = "modal", labels: t = {}, ...n }) {
119
+ return o(e === "popover" ? d : p, {
120
+ labels: t,
121
+ ...n
122
+ });
117
123
  }
118
124
  //#endregion
119
- export { p as AppLauncher };
125
+ export { m as AppLauncher };
package/dist/command-palette.js CHANGED
@@ -1,62 +1,64 @@
1
1
  'use client';
2
2
  import './command-palette.css';
3
- import { Modal as e } from "./modal.js";
4
- import { useCallback as t, useEffect as n } from "react";
5
- import { jsx as r, jsxs as i } from "react/jsx-runtime";
6
- import { Autocomplete as a } from "@base-ui/react/autocomplete";
3
+ import { n as e } from "./_shared/brandmessagescontext.js";
4
+ import { Modal as t } from "./modal.js";
5
+ import { useCallback as n, useEffect as r } from "react";
6
+ import { jsx as i, jsxs as a } from "react/jsx-runtime";
7
+ import { Autocomplete as o } from "@base-ui/react/autocomplete";
7
8
  //#region src/stories/molecules/CommandPalette/CommandPalette.tsx
8
- function o({ open: o, onOpenChange: s, groups: c, title: l, placeholder: u, emptyLabel: d, listLabel: f, closeLabel: p, shortcut: m = "k", locale: h, className: g }) {
9
- n(() => {
10
- if (m === !1) return;
9
+ function s({ open: s, onOpenChange: c, groups: l, title: u, placeholder: d, emptyLabel: f, listLabel: p, closeLabel: m, shortcut: h = "k", locale: g, className: _ }) {
10
+ let v = e("commandPalette");
11
+ r(() => {
12
+ if (h === !1) return;
11
13
  let e = (e) => {
12
- typeof e.key == "string" && e.key.toLowerCase() === m && (e.metaKey || e.ctrlKey) && (e.preventDefault(), s(!o));
14
+ typeof e.key == "string" && e.key.toLowerCase() === h && (e.metaKey || e.ctrlKey) && (e.preventDefault(), c(!s));
13
15
  };
14
16
  return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
15
17
  }, [
16
- m,
17
- o,
18
- s
18
+ h,
19
+ s,
20
+ c
19
21
  ]);
20
- let _ = a.useFilter({
22
+ let y = o.useFilter({
21
23
  sensitivity: "base",
22
- locale: h
23
- }), v = t((e, t) => _.contains(e.label, t) || (e.keywords ?? []).some((e) => _.contains(e, t)), [_]);
24
- return /* @__PURE__ */ r(e, {
25
- open: o,
26
- onClose: () => s(!1),
27
- title: l,
28
- ...p ? { closeLabel: p } : {},
29
- children: /* @__PURE__ */ r(a.Root, {
24
+ locale: g
25
+ }), b = n((e, t) => y.contains(e.label, t) || (e.keywords ?? []).some((e) => y.contains(e, t)), [y]);
26
+ return /* @__PURE__ */ i(t, {
27
+ open: s,
28
+ onClose: () => c(!1),
29
+ title: v("title", u),
30
+ ...m ? { closeLabel: m } : {},
31
+ children: /* @__PURE__ */ i(o.Root, {
30
32
  inline: !0,
31
33
  open: !0,
32
- items: c,
33
- filter: v,
34
+ items: l,
35
+ filter: b,
34
36
  autoHighlight: "always",
35
- children: /* @__PURE__ */ i("div", {
36
- className: ["command-palette", g].filter(Boolean).join(" "),
37
+ children: /* @__PURE__ */ a("div", {
38
+ className: ["command-palette", _].filter(Boolean).join(" "),
37
39
  children: [
38
- /* @__PURE__ */ r(a.Input, {
40
+ /* @__PURE__ */ i(o.Input, {
39
41
  className: "command-palette__input",
40
- placeholder: u,
42
+ placeholder: v("placeholder", d),
41
43
  autoFocus: !0
42
44
  }),
43
- /* @__PURE__ */ r(a.List, {
45
+ /* @__PURE__ */ i(o.List, {
44
46
  className: "command-palette__list",
45
- "aria-label": f,
46
- children: (e) => /* @__PURE__ */ i(a.Group, {
47
+ "aria-label": v("list", p),
48
+ children: (e) => /* @__PURE__ */ a(o.Group, {
47
49
  items: e.items,
48
50
  className: "command-palette__group",
49
- children: [/* @__PURE__ */ r(a.GroupLabel, {
51
+ children: [/* @__PURE__ */ i(o.GroupLabel, {
50
52
  className: "command-palette__heading",
51
53
  children: e.heading
52
- }), /* @__PURE__ */ r(a.Collection, { children: (e) => /* @__PURE__ */ i(a.Item, {
54
+ }), /* @__PURE__ */ i(o.Collection, { children: (e) => /* @__PURE__ */ a(o.Item, {
53
55
  value: e,
54
56
  disabled: e.disabled,
55
57
  className: "command-palette__item",
56
58
  onClick: () => {
57
- s(!1), e.onSelect();
59
+ c(!1), e.onSelect();
58
60
  },
59
- children: [e.icon && /* @__PURE__ */ r("span", {
61
+ children: [e.icon && /* @__PURE__ */ i("span", {
60
62
  className: "command-palette__item-icon",
61
63
  "aria-hidden": "true",
62
64
  children: e.icon
@@ -64,9 +66,9 @@ function o({ open: o, onOpenChange: s, groups: c, title: l, placeholder: u, empt
64
66
  }, e.id) })]
65
67
  }, e.id)
66
68
  }),
67
- /* @__PURE__ */ r(a.Empty, {
69
+ /* @__PURE__ */ i(o.Empty, {
68
70
  className: "command-palette__empty",
69
- children: d
71
+ children: v("empty", f)
70
72
  })
71
73
  ]
72
74
  })
@@ -74,4 +76,4 @@ function o({ open: o, onOpenChange: s, groups: c, title: l, placeholder: u, empt
74
76
  });
75
77
  }
76
78
  //#endregion
77
- export { o as CommandPalette };
79
+ export { s as CommandPalette };
package/dist/consent.js CHANGED
@@ -1,109 +1,111 @@
1
1
  'use client';
2
2
  import './consent.css';
3
- import { VisuallyHidden as e } from "./visually-hidden.js";
4
- import { Button as t } from "./button.js";
5
- import { Heading as n } from "./heading.js";
6
- import { Link as r } from "./link.js";
7
- import { Paragraph as i } from "./paragraph.js";
8
- import { SwitcherField as a } from "./switcher-field.js";
9
- import { Sheet as o } from "./sheet.js";
10
- import { Modal as s } from "./modal.js";
11
- import { useEffect as c, useState as l } from "react";
12
- import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
3
+ import { n as e } from "./_shared/brandmessagescontext.js";
4
+ import { VisuallyHidden as t } from "./visually-hidden.js";
5
+ import { Button as n } from "./button.js";
6
+ import { Heading as r } from "./heading.js";
7
+ import { Link as i } from "./link.js";
8
+ import { Paragraph as a } from "./paragraph.js";
9
+ import { SwitcherField as o } from "./switcher-field.js";
10
+ import { Sheet as s } from "./sheet.js";
11
+ import { Modal as c } from "./modal.js";
12
+ import { useEffect as l, useState as u } from "react";
13
+ import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
13
14
  //#region src/stories/molecules/Consent/Consent.tsx
14
- function p({ open: e = !0, onAcceptAll: a, onRejectAll: o, onOpenPreferences: s, title: c = "Cookies", description: l = "Usamos cookies propias y de terceros para que el sitio funcione y para entender cómo se usa. Puedes aceptarlas todas, rechazarlas o elegir por categorías.", policyHref: p, policyLabel: m = "Política de cookies", policyExternal: h = !1, acceptAllLabel: g = "Aceptar todas", rejectAllLabel: _ = "Rechazar", preferencesLabel: v = "Preferencias", regionLabel: y = "Consentimiento de cookies", className: b, ...x }) {
15
- return e ? /* @__PURE__ */ d("aside", {
16
- className: ["consent-banner", b].filter(Boolean).join(" "),
15
+ function m({ open: t = !0, onAcceptAll: o, onRejectAll: s, onOpenPreferences: c, title: l, description: u, policyHref: m, policyLabel: h, policyExternal: g = !1, acceptAllLabel: _, rejectAllLabel: v, preferencesLabel: y, regionLabel: b, className: x, ...S }) {
16
+ let C = e("consent");
17
+ return t ? /* @__PURE__ */ f("aside", {
18
+ className: ["consent-banner", x].filter(Boolean).join(" "),
17
19
  role: "region",
18
- "aria-label": y,
19
- ...x,
20
- children: /* @__PURE__ */ f("div", {
20
+ "aria-label": C("regionLabel", b),
21
+ ...S,
22
+ children: /* @__PURE__ */ p("div", {
21
23
  className: "consent-banner__inner",
22
- children: [/* @__PURE__ */ f("div", {
24
+ children: [/* @__PURE__ */ p("div", {
23
25
  className: "consent-banner__text",
24
- children: [/* @__PURE__ */ d(n, {
26
+ children: [/* @__PURE__ */ f(r, {
25
27
  level: 2,
26
28
  size: 3,
27
29
  className: "consent-banner__title",
28
- children: c
29
- }), /* @__PURE__ */ f(i, {
30
+ children: l === void 0 ? C("title") : l
31
+ }), /* @__PURE__ */ p(a, {
30
32
  className: "consent-banner__description",
31
- children: [l, p !== void 0 && /* @__PURE__ */ f(u, { children: [" ", /* @__PURE__ */ d(r, {
32
- href: p,
33
- external: h,
34
- children: m
33
+ children: [u, m !== void 0 && /* @__PURE__ */ p(d, { children: [" ", /* @__PURE__ */ f(i, {
34
+ href: m,
35
+ external: g,
36
+ children: h
35
37
  })] })]
36
38
  })]
37
- }), /* @__PURE__ */ f("div", {
39
+ }), /* @__PURE__ */ p("div", {
38
40
  className: "consent-banner__actions",
39
41
  children: [
40
- /* @__PURE__ */ d(t, {
41
- onClick: a,
42
- children: g
43
- }),
44
- /* @__PURE__ */ d(t, {
42
+ /* @__PURE__ */ f(n, {
45
43
  onClick: o,
46
- children: _
44
+ children: C("acceptAll", _)
47
45
  }),
48
- s && /* @__PURE__ */ d(t, {
49
- variant: "outline",
46
+ /* @__PURE__ */ f(n, {
50
47
  onClick: s,
51
- children: v
48
+ children: C("rejectAll", v)
49
+ }),
50
+ c && /* @__PURE__ */ f(n, {
51
+ variant: "outline",
52
+ onClick: c,
53
+ children: C("preferences", y)
52
54
  })
53
55
  ]
54
56
  })]
55
57
  })
56
58
  }) : null;
57
59
  }
58
- function m(e, t) {
60
+ function h(e, t) {
59
61
  let n = { ...e };
60
62
  for (let e of t) e.required && (n[e.id] = !0);
61
63
  return n;
62
64
  }
63
- function h({ open: t, onOpenChange: n, categories: r, value: i, onChange: p, onSave: h, surface: g = "modal", side: _ = "right", title: v = "Preferencias de cookies", closeLabel: y, alwaysOnLabel: b = "Siempre activa", container: x, className: S }) {
64
- let C = p !== void 0, [w, T] = l(() => m(i, r));
65
- c(() => {
66
- t && !C && T(m(i, r));
67
- }, [t, C]);
68
- let E = C ? m(i, r) : w, D = (e) => {
69
- C ? p(e) : T(e), h?.(e);
70
- }, O = (e, t) => {
71
- D({
72
- ...E,
65
+ function g({ open: n, onOpenChange: r, categories: i, value: a, onChange: m, onSave: g, surface: _ = "modal", side: v = "right", title: y, closeLabel: b, alwaysOnLabel: x, container: S, className: C }) {
66
+ let w = e("consent"), T = m !== void 0, [E, D] = u(() => h(a, i));
67
+ l(() => {
68
+ n && !T && D(h(a, i));
69
+ }, [n, T]);
70
+ let O = T ? h(a, i) : E, k = (e) => {
71
+ T ? m(e) : D(e), g?.(e);
72
+ }, A = (e, t) => {
73
+ k({
74
+ ...O,
73
75
  [e]: t
74
76
  });
75
- }, k = /* @__PURE__ */ d("div", {
76
- className: ["consent-preferences", S].filter(Boolean).join(" "),
77
- children: /* @__PURE__ */ d("ul", {
77
+ }, j = /* @__PURE__ */ f("div", {
78
+ className: ["consent-preferences", C].filter(Boolean).join(" "),
79
+ children: /* @__PURE__ */ f("ul", {
78
80
  className: "consent-preferences__list",
79
- children: r.map((t) => /* @__PURE__ */ d("li", {
81
+ children: i.map((e) => /* @__PURE__ */ f("li", {
80
82
  className: "consent-preferences__category",
81
- children: /* @__PURE__ */ d(a, {
82
- label: t.required ? /* @__PURE__ */ f(u, { children: [t.name, /* @__PURE__ */ d(e, { children: `, ${b}` })] }) : t.name,
83
- helperText: t.description,
84
- checked: t.required ? !0 : E[t.id] === !0,
85
- disabled: t.required,
86
- onCheckedChange: (e) => O(t.id, e)
83
+ children: /* @__PURE__ */ f(o, {
84
+ label: e.required ? /* @__PURE__ */ p(d, { children: [e.name, /* @__PURE__ */ f(t, { children: `, ${w("alwaysOn", x)}` })] }) : e.name,
85
+ helperText: e.description,
86
+ checked: e.required ? !0 : O[e.id] === !0,
87
+ disabled: e.required,
88
+ onCheckedChange: (t) => A(e.id, t)
87
89
  })
88
- }, t.id))
90
+ }, e.id))
89
91
  })
90
- });
91
- return g === "modal" ? /* @__PURE__ */ d(s, {
92
- open: t,
93
- onClose: () => n(!1),
94
- title: typeof v == "string" ? v : void 0,
95
- ...y === void 0 ? {} : { closeLabel: y },
96
- container: x,
97
- children: k
98
- }) : /* @__PURE__ */ d(o, {
99
- open: t,
100
- onOpenChange: n,
101
- side: _,
102
- title: v,
103
- ...y === void 0 ? {} : { closeLabel: y },
104
- container: x,
105
- children: k
92
+ }), M = y === void 0 ? w("preferencesTitle") : y;
93
+ return _ === "modal" ? /* @__PURE__ */ f(c, {
94
+ open: n,
95
+ onClose: () => r(!1),
96
+ title: typeof M == "string" ? M : void 0,
97
+ ...b === void 0 ? {} : { closeLabel: b },
98
+ container: S,
99
+ children: j
100
+ }) : /* @__PURE__ */ f(s, {
101
+ open: n,
102
+ onOpenChange: r,
103
+ side: v,
104
+ title: M,
105
+ ...b === void 0 ? {} : { closeLabel: b },
106
+ container: S,
107
+ children: j
106
108
  });
107
109
  }
108
110
  //#endregion
109
- export { p as ConsentBanner, h as ConsentPreferences };
111
+ export { m as ConsentBanner, g as ConsentPreferences };
package/dist/floating-dock.js CHANGED
@@ -1,72 +1,73 @@
1
1
  'use client';
2
2
  import './floating-dock.css';
3
- import { Icon as e } from "./icon.js";
4
- import { VisuallyHidden as t } from "./visually-hidden.js";
5
- import { Button as n } from "./button.js";
6
- import { CloseButton as r } from "./close-button.js";
7
- import { NumberBadge as i } from "./number-badge.js";
8
- import { useState as a } from "react";
9
- import { jsx as o, jsxs as s } from "react/jsx-runtime";
10
- import { Dialog as c } from "@base-ui/react/dialog";
3
+ import { n as e } from "./_shared/brandmessagescontext.js";
4
+ import { Icon as t } from "./icon.js";
5
+ import { VisuallyHidden as n } from "./visually-hidden.js";
6
+ import { Button as r } from "./button.js";
7
+ import { CloseButton as i } from "./close-button.js";
8
+ import { NumberBadge as a } from "./number-badge.js";
9
+ import { useState as o } from "react";
10
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
11
+ import { Dialog as l } from "@base-ui/react/dialog";
11
12
  //#region src/stories/sections/FloatingDock/FloatingDock.tsx
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] = a(null);
14
- return /* @__PURE__ */ o("div", {
15
- ref: O,
16
- className: ["floating-dock", T].filter(Boolean).join(" "),
17
- "data-position": h,
18
- ...E,
19
- children: /* @__PURE__ */ s(c.Root, {
20
- open: g,
21
- defaultOpen: _,
13
+ function u({ label: u, title: d, titleHidden: f = !1, description: p, children: m, icon: h, position: g = "bottom-end", open: _, defaultOpen: v, onOpenChange: y, closeLabel: b, badge: x = 0, badgeMax: S = 99, badgeLabel: C, badgeLive: w = !0, dismissOnOutsidePress: T = !1, className: E, ...D }) {
14
+ let O = e("floatingDock"), [k, A] = o(null);
15
+ return /* @__PURE__ */ s("div", {
16
+ ref: A,
17
+ className: ["floating-dock", E].filter(Boolean).join(" "),
18
+ "data-position": g,
19
+ ...D,
20
+ children: /* @__PURE__ */ c(l.Root, {
21
+ open: _,
22
+ defaultOpen: v,
22
23
  modal: !1,
23
- disablePointerDismissal: !w,
24
- onOpenChange: (e) => v?.(e),
24
+ disablePointerDismissal: !T,
25
+ onOpenChange: (e) => y?.(e),
25
26
  children: [
26
- /* @__PURE__ */ o(c.Trigger, { render: /* @__PURE__ */ s(n, {
27
+ /* @__PURE__ */ s(l.Trigger, { render: /* @__PURE__ */ c(r, {
27
28
  variant: "primary",
28
29
  size: "lg",
29
30
  iconOnly: !0,
30
- "aria-label": l,
31
+ "aria-label": u,
31
32
  className: "floating-dock__trigger",
32
- children: [m ?? /* @__PURE__ */ o(e, {
33
+ children: [h ?? /* @__PURE__ */ s(t, {
33
34
  name: "message",
34
35
  size: "md"
35
- }), b > 0 && /* @__PURE__ */ o(i, {
36
- count: b,
37
- max: x,
36
+ }), x > 0 && /* @__PURE__ */ s(a, {
37
+ count: x,
38
+ max: S,
38
39
  variant: "danger",
39
40
  "aria-hidden": "true",
40
41
  className: "floating-dock__badge"
41
42
  })]
42
43
  }) }),
43
- C && b > 0 && /* @__PURE__ */ o(t, {
44
+ w && x > 0 && /* @__PURE__ */ s(n, {
44
45
  "aria-live": "polite",
45
- children: S(b)
46
+ children: O("badge", C)(x)
46
47
  }),
47
- D && /* @__PURE__ */ o(c.Portal, {
48
- container: D,
48
+ k && /* @__PURE__ */ s(l.Portal, {
49
+ container: k,
49
50
  className: "floating-dock__portal",
50
- children: /* @__PURE__ */ s(c.Popup, {
51
+ children: /* @__PURE__ */ c(l.Popup, {
51
52
  className: "floating-dock__panel",
52
53
  children: [
53
- /* @__PURE__ */ s("header", {
54
+ /* @__PURE__ */ c("header", {
54
55
  className: "floating-dock__header",
55
- children: [d ? /* @__PURE__ */ o(c.Title, { render: /* @__PURE__ */ o(t, { children: u }) }) : /* @__PURE__ */ o(c.Title, {
56
+ children: [f ? /* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(n, { children: d }) }) : /* @__PURE__ */ s(l.Title, {
56
57
  className: "floating-dock__title",
57
- children: u
58
- }), f != null && /* @__PURE__ */ o(c.Description, {
58
+ children: d
59
+ }), p != null && /* @__PURE__ */ s(l.Description, {
59
60
  className: "floating-dock__description",
60
- children: f
61
+ children: p
61
62
  })]
62
63
  }),
63
- /* @__PURE__ */ o(c.Close, {
64
+ /* @__PURE__ */ s(l.Close, {
64
65
  className: "floating-dock__close",
65
- render: /* @__PURE__ */ o(r, { label: y })
66
+ render: /* @__PURE__ */ s(i, { label: O("close", b) })
66
67
  }),
67
- /* @__PURE__ */ o("div", {
68
+ /* @__PURE__ */ s("div", {
68
69
  className: "floating-dock__body",
69
- children: p
70
+ children: m
70
71
  })
71
72
  ]
72
73
  })
@@ -76,4 +77,4 @@ function l({ label: l, title: u, titleHidden: d = !1, description: f, children:
76
77
  });
77
78
  }
78
79
  //#endregion
79
- export { l as FloatingDock };
80
+ export { u as FloatingDock };