@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,65 @@
+"use client";
+import { CloseButtonWrapper as e, Description as t, Disclosure as n, DisclosurePanel as r, Heading as i, IconWrapper as a, OpenButton as o, RightContentWrapper as s, Title as c, TitleGroup as l, TopHeading as u } from "./Accordion.styled.js";
+import d from "../../internal/usetranslations/usetranslations.js";
+import f from "../Button/Button.js";
+import "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/components/Accordion/Accordion.tsx
+function g({ children: g, title: v, titleContentLeft: y, titleContentRight: b, description: x, unmountOnExit: S = !1, defaultExpanded: C = !1, isExpanded: w, onExpandedChange: T, isDisabled: E = !1, className: D, style: O, nature: k = "default", noPadding: A = !1, withBottomCloseButton: j = !1 }) {
+	let M = d(_);
+	return /* @__PURE__ */ m(n, {
+		defaultExpanded: C,
+		isExpanded: w,
+		onExpandedChange: T,
+		isDisabled: E,
+		className: D,
+		style: O,
+		"data-nature": k,
+		"data-no-padding": A,
+		children: ({ isExpanded: n }) => /* @__PURE__ */ h(p, { children: [
+			/* @__PURE__ */ h(i, { children: [/* @__PURE__ */ h(u, { children: [/* @__PURE__ */ h(l, { children: [
+				y,
+				/* @__PURE__ */ m(o, {
+					slot: "trigger",
+					"data-open": n,
+					"data-disabled": E,
+					"data-nature": k,
+					"data-full-width": !b,
+					children: /* @__PURE__ */ m(c, {
+						slot: "trigger",
+						children: v
+					})
+				}),
+				!!b && /* @__PURE__ */ m(s, { children: b })
+			] }), /* @__PURE__ */ m(o, {
+				slot: "trigger",
+				"data-open": n,
+				"data-disabled": E,
+				"data-nature": k,
+				excludeFromTabOrder: !0,
+				"data-close-button": !0,
+				children: /* @__PURE__ */ m(a, { name: n ? "minimize" : "add" })
+			})] }), x && /* @__PURE__ */ m(t, {
+				"data-disabled": E,
+				children: x
+			})] }),
+			/* @__PURE__ */ m(r, {
+				"data-padding": !A,
+				children: S && !n ? null : /* @__PURE__ */ m(p, { children: g })
+			}),
+			n && j && /* @__PURE__ */ m(e, { children: /* @__PURE__ */ m(f, {
+				slot: "trigger",
+				text: M.close,
+				mode: "tertiary",
+				size: "small",
+				iconLeft: "expand_less"
+			}) })
+		] })
+	});
+}
+var _ = {
+	en: { close: "Close" },
+	fr: { close: "Fermer" }
+};
+//#endregion
+export { g as default };

package/dist/components/Accordion/Accordion.styled.js

@@ -0,0 +1,130 @@
+import e from "../Icon/Icon.js";
+import { styled as t } from "styled-components";
+import { Button as n, Disclosure as r, DisclosurePanel as i, Heading as a } from "react-aria-components";
+//#region packages/components/Accordion/Accordion.styled.ts
+var o = t(r)`
+  border-bottom: 1px solid var(--color-content-neutral-stroke);
+  background: var(--color-background-neutral-ground);
+  word-break: break-word;
+
+  &[data-nature="positive"] {
+    background: var(--color-content-message-positive-lighter);
+  }
+
+  &[data-nature="negative"] {
+    background: var(--color-content-message-negative-lighter);
+  }
+
+  &[data-nature="informative"] {
+    background: var(--color-content-message-informative-lighter);
+  }
+`, s = t(a)`
+  margin: 0;
+  padding: var(--spacing-sm);
+`, c = t.div`
+  display: flex;
+  align-items: flex-start;
+  column-gap: var(--spacing-xs);
+`, l = t.div`
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  column-gap: var(--spacing-xs);
+  row-gap: var(--spacing-xxs);
+`, u = t(n)`
+  all: unset;
+  cursor: pointer;
+  font-size: var(--text-font-size-xl);
+  line-height: var(--text-font-size-xl);
+  color: var(--color-content-action-action);
+
+  &[data-full-width="true"] {
+    flex: 1;
+  }
+
+  &[data-close-button="true"] {
+    height: 24px;
+  }
+
+  &[data-nature="positive"] {
+    color: var(--color-content-message-positive-darker);
+  }
+
+  &[data-nature="negative"] {
+    color: var(--color-content-message-negative-darker);
+  }
+
+  &[data-nature="informative"] {
+    color: var(--color-content-message-informative-darkest);
+  }
+
+  &[data-hovered="true"],
+  &[data-focus-visible] {
+    color: var(--color-content-action-action-darker);
+
+    &[data-nature="positive"] {
+      color: var(--color-content-message-positive-darkest);
+    }
+
+    &[data-nature="negative"] {
+      color: var(--color-content-message-negative-darkest);
+    }
+
+    &[data-nature="informative"] {
+      color: var(--color-content-action-action-darker);
+    }
+  }
+
+  &[data-disabled="true"] {
+    color: var(--color-content-neutral-secondary);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[data-focus-visible="true"] {
+    outline: 2px solid var(--color-background-highlight-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-rounded);
+  }
+`, d = t.div`
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  font-weight: 700;
+  font-style: normal;
+`, f = t(e)``, p = t.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`, m = t.div`
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+  font-style: normal;
+  font-weight: 400;
+
+  &[data-disabled="true"] {
+    color: var(--color-content-neutral-secondary);
+    opacity: 0.5;
+  }
+`, h = t(i)`
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  font-style: normal;
+  font-weight: 400;
+
+  &[data-padding="true"] {
+    padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
+  }
+`, g = t.div`
+  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md)
+    var(--spacing-md);
+`;
+//#endregion
+export { g as CloseButtonWrapper, m as Description, o as Disclosure, h as DisclosurePanel, s as Heading, f as IconWrapper, u as OpenButton, p as RightContentWrapper, d as Title, l as TitleGroup, c as TopHeading };

package/dist/components/Badge/Badge.js

@@ -0,0 +1,25 @@
+"use client";
+import { Core as e } from "./Badge.styled.js";
+import t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/Badge/Badge.tsx
+var r = t.forwardRef(({ value: t, nature: r = "default", max: a, showZero: o, invisible: s, variant: c = "standard", ...l }, u) => {
+	if (i({
+		value: t,
+		variant: c,
+		showZero: o
+	})) return null;
+	let d = t;
+	return t && a && typeof t == "number" && t > a && (d = `${a}+`), c === "dot" && (d = ""), /* @__PURE__ */ n(e, {
+		ref: u,
+		"data-nature": r,
+		"data-invisible": s,
+		"data-variant": c,
+		$value: t,
+		$max: a,
+		...l,
+		children: d
+	});
+}), i = ({ value: e, variant: t, showZero: n }) => t === "dot" ? !1 : e == null || e === 0 && !n;
+//#endregion
+export { r as default };

package/dist/components/Badge/Badge.styled.js

@@ -0,0 +1,50 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Badge/Badge.styled.ts
+var t = e.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  // Small hack to make sure the badge remains perfectly rounded when the value is less than 10
+  ${({ $value: e, $max: t }) => typeof e == "number" && e <= 9 && e <= (t || Infinity) ? "width: 24px;" : ""}
+  padding: 2px var(--spacing-xs);
+  border-radius: 9999px;
+  background: var(--color-background-neutral-underground-2);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+  font-weight: bold;
+  color: var(--color-content-neutral-secondary);
+
+  &[data-nature="negative"] {
+    background: var(--color-content-message-negative-darker);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-nature="positive"] {
+    background: var(--color-content-message-positive-darker);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-nature="warning"] {
+    background: var(--color-content-message-warning-darker);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-nature="informative"] {
+    background: var(--color-content-message-informative-darker);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-variant="dot"] {
+    width: 10px;
+    height: 10px;
+    padding: 0;
+    border: 1px solid var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-invisible="true"] {
+    visibility: hidden;
+  }
+`;
+//#endregion
+export { t as Core };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,78 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Dropdown/Dropdown.js";
+import n from "../SelectItem/SelectItem.js";
+import { Breadcrumb as r, BreadcrumbsContainer as i, ChevronIcon as a, HomeIcon as o, ShowMoreButton as s } from "./Breadcrumbs.styled.js";
+import "react";
+import { Link as c, ListBox as l, Popover as u, Select as d } from "react-aria-components";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region packages/components/Breadcrumbs/Breadcrumbs.tsx
+var m = ({ links: m, ...g }) => {
+	let _ = e(h);
+	if (!m.length || m.length < 2) return null;
+	let v = m[0], y = m.length > 1 ? m[m.length - 1] : null, b = m.slice(1, -1);
+	return /* @__PURE__ */ f("nav", {
+		...g,
+		"aria-label": _.breadcrumbs,
+		children: /* @__PURE__ */ p(i, { children: [
+			/* @__PURE__ */ p(r, {
+				"data-last-link": m.length === 1 ? "true" : void 0,
+				children: [/* @__PURE__ */ f(o, {
+					name: "home",
+					"aria-hidden": !0
+				}), /* @__PURE__ */ f(c, {
+					href: v.href,
+					"aria-current": m.length === 1 ? "page" : void 0,
+					routerOptions: v.routerOptions,
+					children: v.text || _.home
+				})]
+			}),
+			m.length > 4 ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p(r, { children: [/* @__PURE__ */ f(a, {
+				name: "chevron_right",
+				"aria-hidden": !0
+			}), /* @__PURE__ */ f(s, {
+				type: "button",
+				"aria-label": _.showMore,
+				children: "..."
+			})] }), /* @__PURE__ */ f(u, { children: /* @__PURE__ */ f(t, { children: /* @__PURE__ */ f(l, { children: b.map((e, t) => /* @__PURE__ */ f(n, {
+				id: e.text,
+				text: e.text,
+				href: e.href,
+				routerOptions: e.routerOptions
+			}, t)) }) }) })] }) : b.map((e, t) => /* @__PURE__ */ p(r, { children: [/* @__PURE__ */ f(a, {
+				name: "chevron_right",
+				"aria-hidden": !0
+			}), /* @__PURE__ */ f(c, {
+				href: e.href,
+				"aria-current": t === m.length - 1 ? "page" : void 0,
+				routerOptions: e.routerOptions,
+				children: e.text
+			})] }, t)),
+			y && /* @__PURE__ */ p(r, {
+				"data-last-link": !0,
+				children: [/* @__PURE__ */ f(a, {
+					name: "chevron_right",
+					"aria-hidden": !0
+				}), /* @__PURE__ */ f(c, {
+					href: y.href,
+					"aria-current": "page",
+					routerOptions: y.routerOptions,
+					children: y.text
+				})]
+			})
+		] })
+	});
+}, h = {
+	en: {
+		home: "Home",
+		showMore: "Show more",
+		breadcrumbs: "Breadcrumbs"
+	},
+	fr: {
+		home: "Accueil",
+		showMore: "Afficher plus",
+		breadcrumbs: "Fil d'Ariane"
+	}
+};
+//#endregion
+export { m as default };

package/dist/components/Breadcrumbs/Breadcrumbs.styled.js

@@ -0,0 +1,73 @@
+import e from "../Icon/Icon.js";
+import { styled as t } from "styled-components";
+import { Button as n } from "react-aria-components";
+//#region packages/components/Breadcrumbs/Breadcrumbs.styled.ts
+var r = t.ol`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  column-gap: var(--spacing-xxs);
+  row-gap: var(--spacing-xxs);
+  padding: 0;
+`, i = t.li`
+  display: flex;
+  align-items: end;
+  column-gap: var(--spacing-xxs);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+  font-style: normal;
+  font-weight: 700;
+
+  &:not([data-last-link]) {
+    a,
+    button {
+      text-decoration: none;
+      color: var(--color-content-neutral-secondary);
+      border-bottom: 1px solid transparent;
+
+      &:hover,
+      &:focus-visible {
+        border-color: var(--color-content-action-action);
+        background: var(--color-content-action-action-lighter);
+        color: var(--color-content-action-action);
+        outline: none;
+        border-radius: 0;
+      }
+    }
+  }
+
+  &[data-last-link] {
+    a,
+    button,
+    span {
+      text-decoration: none;
+      border-bottom: 1px solid transparent;
+      color: var(--color-content-neutral-tertiary);
+      cursor: none;
+      pointer-events: none;
+      outline: none;
+    }
+  }
+`, a = t(n)`
+  all: unset;
+  cursor: pointer;
+  align-self: stretch;
+  padding: 0 var(--spacing-xs);
+  margin-left: calc(var(--spacing-xs) * -1);
+  margin-right: calc(var(--spacing-xs) * -1);
+  border-radius: 0;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-background-highlight-focus);
+    border-radius: var(--radius-rounded);
+  }
+`, o = t(e)`
+  color: var(--color-content-neutral-secondary);
+  font-size: 24px;
+`, s = t(e)`
+  color: var(--color-content-neutral-tertiary);
+  font-size: 24px;
+`;
+//#endregion
+export { i as Breadcrumb, r as BreadcrumbsContainer, s as ChevronIcon, o as HomeIcon, a as ShowMoreButton };

package/dist/components/Button/Button.js

@@ -0,0 +1,73 @@
+"use client";
+import { useHoldToSubmit as e } from "../../internal/useHoldToSubmit/useHoldToSubmit.js";
+import { BadgeWrapper as t, CoreButton as n, CoreLink as r } from "./Button.styled.js";
+import i from "./components/HoldProgress/HoldProgress.js";
+import a from "./components/IconLeftElement/IconLeftElement.js";
+import o from "./components/IconRightElement/IconRightElement.js";
+import s from "../Tooltip/Tooltip.js";
+import c from "../Badge/Badge.js";
+import { forwardRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region packages/components/Button/Button.tsx
+var f = l(({ text: l, mode: f = "primary", size: p = "medium", nature: m = "action", iconLeft: h, iconRight: g, type: _, onClick: v, disabled: y, fullWidth: b, isLoading: x, href: S, target: C, tooltip: w, tooltipProps: T, badgeProps: E, holdToSubmitDuration: D, onPressStart: O, onPressEnd: k, ...A }, j) => {
+	let { requiresHold: M, isHolding: N, pressProps: P } = e({
+		duration: D,
+		onComplete: (e) => {
+			if (v?.(), _ !== "submit") return;
+			let t = e;
+			t.type = "submit", t.form?.requestSubmit(t), t.type = "button";
+		},
+		onPressStart: O,
+		onPressEnd: k
+	}), F = l == null || l === "";
+	if (F && !h && !g) throw Error("You must provide a text or an icon");
+	if (h && g) throw Error("You can't provide both an iconLeft and an iconRight");
+	let I = !!S, L = I ? r : n, R = I ? { isDisabled: y || x } : {
+		isDisabled: y,
+		isPending: x
+	}, z = /* @__PURE__ */ d(L, {
+		...A,
+		ref: j,
+		type: M ? "button" : _ || "button",
+		"data-size": p,
+		"data-nature": m,
+		"data-mode": f,
+		"data-has-icon-left": !!h || x,
+		"data-has-icon-right": !!g,
+		"data-has-no-text": F,
+		"data-fullwidth": b,
+		"data-holding": N,
+		onPress: M ? void 0 : v,
+		...P,
+		...R,
+		href: S,
+		target: C,
+		"data-is-loading": x,
+		children: [
+			/* @__PURE__ */ u(a, {
+				iconLeft: h,
+				isLoading: x,
+				size: p
+			}),
+			!F && l,
+			/* @__PURE__ */ u(o, {
+				iconRight: g,
+				text: l,
+				isLoading: x,
+				size: p
+			}),
+			!!E && /* @__PURE__ */ u(t, { children: /* @__PURE__ */ u(c, { ...E }) }),
+			N && !!D && /* @__PURE__ */ u(i, {
+				size: p,
+				duration: D
+			})
+		]
+	});
+	return w ? /* @__PURE__ */ u(s, {
+		label: w,
+		...T,
+		children: z
+	}) : z;
+});
+//#endregion
+export { f as default };