@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,75 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Button/Button.js";
+import n from "../../internal/stringDateToValue/stringDateToValue.js";
+import r from "../../internal/dateValueToString/dateValueToString.js";
+import i from "../Calendar/Calendar.js";
+import a from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import o from "../../internal/getNatureFromMessages/getNatureFromMessages.js";
+import { DateInput as s, DatePicker as c, Group as l } from "./DatePicker.styled.js";
+import u from "react";
+import { DateSegment as d, Dialog as f, Popover as p } from "react-aria-components";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/components/DatePicker/DatePicker.tsx
+var g = u.forwardRef(({ wrapperProps: u, id: g, label: v, labelIconRight: y, labelIconRightTooltip: b, helperTextIcon: x, helperText: S, errorHelperText: C, errorHelperTextIcon: w, successHelperText: T, successHelperTextIcon: E, warningHelperText: D, warningHelperTextIcon: O, orientation: k, required: A, nature: j, fullWidth: M, isDisabled: N, defaultValue: P, onChange: F, value: I, minValue: L, maxValue: R, isDateUnavailable: z, timeZone: B, ampm: V, ...H }, U) => {
+	let W = e(_), G = H["aria-label"] ?? String(v), K = o({
+		nature: j,
+		successHelperText: T,
+		errorHelperText: C,
+		warningHelperText: D
+	}), q = {
+		...u,
+		htmlForId: g,
+		label: v,
+		labelIconRight: y,
+		labelIconRightTooltip: b,
+		helperTextIcon: x,
+		helperText: S,
+		errorHelperText: C,
+		errorHelperTextIcon: w,
+		successHelperText: T,
+		successHelperTextIcon: E,
+		warningHelperText: D,
+		warningHelperTextIcon: O,
+		orientation: k,
+		required: A
+	}, J = B ? n("2000-01-01T00:00:00", B) : void 0, Y;
+	return V === !0 && (Y = 12), V === !1 && (Y = 24), /* @__PURE__ */ m(a, {
+		...q,
+		ref: U,
+		children: /* @__PURE__ */ h(c, {
+			...H,
+			id: g,
+			isDisabled: N,
+			"aria-label": G,
+			isRequired: A,
+			"data-fullwidth": M,
+			hourCycle: Y,
+			placeholderValue: J,
+			defaultValue: n(P, B),
+			onChange: (e) => F?.(r(e)),
+			value: typeof I == "string" ? n(I, B) : I,
+			minValue: n(L, B) ?? void 0,
+			maxValue: n(R, B) ?? void 0,
+			isDateUnavailable: z ? (e) => z(r(e)) : void 0,
+			children: [/* @__PURE__ */ h(l, {
+				"data-fullwidth": M,
+				children: [/* @__PURE__ */ m(s, {
+					"data-fullwidth": M,
+					"aria-disabled": N,
+					"data-nature": K,
+					children: (e) => /* @__PURE__ */ m(d, { segment: e })
+				}), /* @__PURE__ */ m(t, {
+					"aria-label": W.openCalendar + v,
+					iconLeft: "calendar_today",
+					mode: "tertiary"
+				})]
+			}), /* @__PURE__ */ m(p, { children: /* @__PURE__ */ m(f, { children: /* @__PURE__ */ m(i, { mode: "single" }) }) })]
+		})
+	});
+}), _ = {
+	en: { openCalendar: "Open calendar " },
+	fr: { openCalendar: "Ouvrir le calendrier " }
+};
+//#endregion
+export { g as default };

package/dist/components/DatePicker/DatePicker.styled.js

@@ -0,0 +1,66 @@
+import { styled as e } from "styled-components";
+import { DateInput as t, DatePicker as n, Group as r } from "react-aria-components";
+//#region packages/components/DatePicker/DatePicker.styled.ts
+var i = e(n)`
+  display: flex;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, a = e(r)`
+  display: flex;
+  column-gap: var(--spacing-xxs);
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, o = e(t)`
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--color-content-neutral-primary-reversed);
+  outline: 1px solid var(--color-content-neutral-stroke);
+  outline-offset: -1px;
+  border-radius: var(--radius-rounded);
+  padding: var(--spacing-xs);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  color: var(--color-content-neutral-primary);
+
+  .react-aria-DateSegment {
+    padding: 0 var(--spacing-xxs);
+
+    &[data-type="literal"] {
+      padding: 0;
+    }
+
+    &[data-placeholder="true"] {
+      color: var(--color-content-neutral-tertiary);
+    }
+  }
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+
+  &[aria-disabled="true"] {
+    background: var(--color-content-neutral-tertiary);
+    color: var(--color-content-neutral-primary-reversed);
+    cursor: not-allowed;
+  }
+
+  &[data-nature="negative"] {
+    outline-color: var(--color-content-message-negative);
+  }
+
+  &[data-nature="positive"] {
+    outline-color: var(--color-content-message-positive-darker);
+  }
+
+  &[data-nature="warning"] {
+    outline-color: var(--color-content-message-warning-darker);
+  }
+`;
+//#endregion
+export { o as DateInput, i as DatePicker, a as Group };

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,100 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Button/Button.js";
+import n from "../../internal/stringDateToValue/stringDateToValue.js";
+import r from "../../internal/dateValueToString/dateValueToString.js";
+import i from "../Calendar/Calendar.js";
+import a from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import o from "../../internal/getNatureFromMessages/getNatureFromMessages.js";
+import { DateInput as s, DateRangePicker as c, Group as l, Inputs as u, Separator as d } from "./DateRangePicker.styled.js";
+import f from "react";
+import { DateSegment as p, Dialog as m, Popover as h } from "react-aria-components";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region packages/components/DateRangePicker/DateRangePicker.tsx
+var v = f.forwardRef(({ wrapperProps: f, id: v, label: x, labelIconRight: S, labelIconRightTooltip: C, helperTextIcon: w, helperText: T, errorHelperText: E, errorHelperTextIcon: D, successHelperText: O, successHelperTextIcon: k, warningHelperText: A, warningHelperTextIcon: j, orientation: M, required: N, nature: P, fullWidth: F, isDisabled: I, defaultValue: L, onChange: R, value: z, minValue: B, maxValue: V, isDateUnavailable: H, timeZone: U, ampm: W, ...G }, K) => {
+	let q = e(y), J = G["aria-label"] ?? String(x), Y = o({
+		nature: P,
+		successHelperText: O,
+		errorHelperText: E,
+		warningHelperText: A
+	}), X = {
+		...f,
+		htmlForId: v,
+		label: x,
+		labelIconRight: S,
+		labelIconRightTooltip: C,
+		helperTextIcon: w,
+		helperText: T,
+		errorHelperText: E,
+		errorHelperTextIcon: D,
+		successHelperText: O,
+		successHelperTextIcon: k,
+		warningHelperText: A,
+		warningHelperTextIcon: j,
+		orientation: M,
+		required: N
+	}, Z = U && n("2000-01-01T00:00:00", U) || void 0, Q;
+	return W === !0 && (Q = 12), W === !1 && (Q = 24), /* @__PURE__ */ g(a, {
+		...X,
+		ref: K,
+		children: /* @__PURE__ */ _(c, {
+			...G,
+			id: v,
+			isDisabled: I,
+			"aria-label": J,
+			isRequired: N,
+			"data-fullwidth": F,
+			hourCycle: Q,
+			placeholderValue: Z,
+			defaultValue: b(L, U),
+			onChange: (e) => R?.({
+				start: r(e?.start),
+				end: r(e?.end)
+			}),
+			value: z === null ? null : b(z, U),
+			minValue: B ? n(B, U) : void 0,
+			maxValue: V ? n(V, U) : void 0,
+			isDateUnavailable: H ? (e) => H(r(e)) : void 0,
+			children: [/* @__PURE__ */ _(l, {
+				"data-fullwidth": F,
+				children: [/* @__PURE__ */ _(u, {
+					"data-disabled": I,
+					"data-nature": Y,
+					"data-fullwidth": F,
+					children: [
+						/* @__PURE__ */ g(s, {
+							slot: "start",
+							"aria-disabled": I,
+							children: (e) => /* @__PURE__ */ g(p, { segment: e })
+						}),
+						/* @__PURE__ */ g(d, {
+							"aria-hidden": "true",
+							"data-disabled": I,
+							children: "–"
+						}),
+						/* @__PURE__ */ g(s, {
+							slot: "end",
+							"aria-disabled": I,
+							children: (e) => /* @__PURE__ */ g(p, { segment: e })
+						})
+					]
+				}), /* @__PURE__ */ g(t, {
+					"aria-label": q.openCalendar + x,
+					iconLeft: "calendar_today",
+					mode: "tertiary"
+				})]
+			}), /* @__PURE__ */ g(h, { children: /* @__PURE__ */ g(m, { children: /* @__PURE__ */ g(i, { mode: "range" }) }) })]
+		})
+	});
+}), y = {
+	en: { openCalendar: "Open calendar " },
+	fr: { openCalendar: "Ouvrir le calendrier " }
+};
+function b(e, t) {
+	if (e) return {
+		start: n(e.start, t),
+		end: n(e.end, t)
+	};
+}
+//#endregion
+export { v as default };

package/dist/components/DateRangePicker/DateRangePicker.styled.js

@@ -0,0 +1,86 @@
+import { styled as e } from "styled-components";
+import { DateInput as t, DateRangePicker as n, Group as r } from "react-aria-components";
+//#region packages/components/DateRangePicker/DateRangePicker.styled.ts
+var i = e(n)`
+  display: flex;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, a = e(r)`
+  display: flex;
+  column-gap: var(--spacing-xxs);
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, o = e.div`
+  display: flex;
+  align-items: center;
+  outline: 1px solid var(--color-content-neutral-stroke);
+  outline-offset: -1px;
+  border-radius: var(--radius-rounded);
+  padding: var(--spacing-xs);
+  background-color: var(--color-content-neutral-primary-reversed);
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+
+  &[data-disabled="true"] {
+    background: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+  }
+
+  &[data-nature="negative"] {
+    outline-color: var(--color-content-message-negative);
+  }
+
+  &[data-nature="positive"] {
+    outline-color: var(--color-content-message-positive-darker);
+  }
+
+  &[data-nature="warning"] {
+    outline-color: var(--color-content-message-warning-darker);
+  }
+`, s = e.span`
+  display: inline-block;
+  margin: 0 var(--spacing-xxs);
+
+  &[data-disabled="true"] {
+    color: var(--color-content-neutral-primary-reversed);
+  }
+`, c = e(t)`
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--color-content-neutral-primary-reversed);
+
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  color: var(--color-content-neutral-primary);
+
+  .react-aria-DateSegment {
+    padding: 0 var(--spacing-xxs);
+
+    &[data-type="literal"] {
+      padding: 0;
+    }
+
+    &[data-placeholder="true"] {
+      color: var(--color-content-neutral-tertiary);
+    }
+  }
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+
+  &[aria-disabled="true"] {
+    background: var(--color-content-neutral-tertiary);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+`;
+//#endregion
+export { c as DateInput, i as DateRangePicker, a as Group, o as Inputs, s as Separator };

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,30 @@
+"use client";
+import { CloseButton as e, DialogActions as t, DialogContent as n, DialogForm as r, Title as i, TitleSection as a } from "../../internal-components/DialogLayout/DialogLayout.styled.js";
+import { Dialog as o, Modal as s, ModalOverlay as c } from "./Drawer.styled.js";
+import "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region packages/components/Drawer/Drawer.tsx
+function f({ children: t, isOpen: n, onOpenChange: r, title: f, isDismissable: p = !0 }) {
+	return /* @__PURE__ */ u(c, {
+		"data-design-system-component": "Drawer",
+		isOpen: n,
+		onOpenChange: r,
+		isDismissable: p,
+		isKeyboardDismissDisabled: !p,
+		children: /* @__PURE__ */ u(s, { children: /* @__PURE__ */ u(o, {
+			"aria-label": f,
+			children: ({ close: n }) => /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d(a, { children: [/* @__PURE__ */ u(i, {
+				slot: "title",
+				children: f
+			}), /* @__PURE__ */ u(e, {
+				type: "button",
+				onClick: n,
+				"aria-label": "Close",
+				iconLeft: "clear",
+				mode: "tertiary"
+			})] }), t] })
+		}) })
+	});
+}
+//#endregion
+export { t as DrawerActions, n as DrawerContent, r as DrawerForm, f as default };

package/dist/components/Drawer/Drawer.styled.js

@@ -0,0 +1,65 @@
+import { CloseButton as e, DialogActions as t, DialogContent as n, DialogForm as r, Title as i, TitleSection as a, blur as o } from "../../internal-components/DialogLayout/DialogLayout.styled.js";
+import { keyframes as s, styled as c } from "styled-components";
+import { Dialog as l, Modal as u, ModalOverlay as d } from "react-aria-components";
+//#region packages/components/Drawer/Drawer.styled.ts
+var f = s`
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+`, p = c(d)`
+  position: fixed;
+  z-index: var(--z-index-modal);
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--visual-viewport-height);
+  background: rgba(0 12 51 / 0.7);
+
+  &[data-entering] {
+    animation: ${o} 300ms;
+  }
+
+  &[data-exiting] {
+    animation: ${o} 300ms reverse ease-in;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[data-entering],
+    &[data-exiting] {
+      animation: none;
+    }
+  }
+`, m = c(u)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: var(--visual-viewport-height);
+  width: 448px;
+  background: var(--color-content-neutral-primary-reversed);
+  outline: none;
+
+  &[data-entering] {
+    animation: ${f} 300ms;
+  }
+
+  &[data-exiting] {
+    animation: ${f} 300ms reverse ease-in;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[data-entering],
+    &[data-exiting] {
+      animation: none;
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    width: 100vw;
+  }
+`, h = c(l)`
+  outline: none;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+//#endregion
+export { e as CloseButton, h as Dialog, t as DrawerActions, n as DrawerContent, r as DrawerForm, m as Modal, p as ModalOverlay, i as Title, a as TitleSection };

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,13 @@
+"use client";
+import { Core as e } from "./Dropdown.styled.js";
+import t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/Dropdown/Dropdown.tsx
+var r = t.forwardRef(({ children: t, tallDropdown: r, ...i }, a) => /* @__PURE__ */ n(e, {
+	...i,
+	ref: a,
+	"data-tall": r || void 0,
+	children: t
+}));
+//#endregion
+export { r as default };

package/dist/components/Dropdown/Dropdown.styled.js

@@ -0,0 +1,19 @@
+import { css as e, styled as t } from "styled-components";
+//#region packages/components/Dropdown/Dropdown.styled.ts
+var n = e`
+  margin: 0;
+  max-height: 200px; /* 5 items of 40px height */
+  overflow-y: auto;
+  border-radius: var(--radius-rounded);
+  background: var(--color-content-neutral-primary-reversed);
+  box-shadow: var(--shadow-medium);
+  list-style: none;
+
+  &[data-tall="true"] {
+    max-height: 400px;
+  }
+`, r = t.div`
+  ${n}
+`;
+//#endregion
+export { r as Core, n as baseDropdownStyles };

package/dist/components/Dropdown/components/DropdownListItem/DropdownListItem.js

@@ -0,0 +1,28 @@
+import { Core as e, IconWrapper as t, Text as n } from "./DropdownListItem.styled.js";
+import r from "../../../Checkbox/Checkbox.js";
+import i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/components/Dropdown/components/DropdownListItem/DropdownListItem.tsx
+var s = i.forwardRef(({ text: i, iconLeft: s, iconRight: c, selected: l, disabled: u, isMultipleSelection: d, ...f }, p) => /* @__PURE__ */ o(e, {
+	...f,
+	ref: p,
+	"data-selected": !!l,
+	"data-disabled": u,
+	children: [
+		d && /* @__PURE__ */ a(r, {
+			label: `item ${i} ${l ? "selected" : "not selected"}`,
+			hideLabel: !0,
+			isSelected: l,
+			readOnly: !0,
+			disabled: u
+		}),
+		!!s && /* @__PURE__ */ a(t, { name: s }),
+		!!i && /* @__PURE__ */ a(n, {
+			"aria-label": `DropdownItem ${i}`,
+			children: i
+		}),
+		!!c && /* @__PURE__ */ a(t, { name: c })
+	]
+}));
+//#endregion
+export { s as default };

package/dist/components/Dropdown/components/DropdownListItem/DropdownListItem.styled.js

@@ -0,0 +1,60 @@
+import e from "../../../Icon/Icon.js";
+import { styled as t } from "styled-components";
+//#region packages/components/Dropdown/components/DropdownListItem/DropdownListItem.styled.ts
+var n = t(e)`
+  font-size: var(--text-font-size-xl);
+  color: var(--color-content-neutral-primary);
+`, r = t.div`
+  position: relative;
+  z-index: var(--z-index-base);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: none;
+  outline: none;
+  background-color: var(--color-content-neutral-primary-reversed);
+  color: var(--color-content-neutral-secondary);
+  text-align: left;
+  appearance: none;
+  cursor: pointer;
+
+  &:hover,
+  &:active,
+  &[data-hovered="true"],
+  &[data-pressed="true"],
+  &[data-force-hover="true"] {
+    background-color: var(--color-background-neutral-underground-1);
+  }
+
+  &[data-selected="true"] {
+    background-color: var(--color-content-action-action-lighter);
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"],
+  &[data-force-focus="true"] {
+    // Just above its siblings, so the outline is not hidden by them
+    z-index: calc(var(--z-index-base) + 1);
+    outline: 2px solid var(--color-background-highlight-focus);
+    outline-offset: -2px;
+    border-radius: var(--radius-rounded);
+  }
+
+  &[data-disabled="true"] {
+    background-color: var(--color-content-neutral-primary-reversed);
+    color: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+
+    ${n} {
+      color: var(--color-content-neutral-tertiary);
+    }
+  }
+`, i = t.span`
+  flex-grow: 1;
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+`;
+//#endregion
+export { r as Core, n as IconWrapper, i as Text };

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,16 @@
+import e from "../Icon/Icon.js";
+import { Actions as t, Content as n, Description as r, IconSlot as i, Main as a, Root as o, Title as s } from "./EmptyState.styled.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/components/EmptyState/EmptyState.tsx
+function u({ icon: u, title: d, description: f, children: p, variant: m = "default", className: h, style: g, ..._ }) {
+	return /* @__PURE__ */ l(o, {
+		className: h,
+		style: g,
+		"data-variant": m,
+		..._,
+		children: [/* @__PURE__ */ l(a, { children: [u && /* @__PURE__ */ c(i, { children: /* @__PURE__ */ c(e, { name: u }) }), /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(s, { children: d }), f && /* @__PURE__ */ c(r, { children: f })] })] }), p && /* @__PURE__ */ c(t, { children: p })]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/EmptyState/EmptyState.styled.js

@@ -0,0 +1,63 @@
+import { styled as e } from "styled-components";
+//#region packages/components/EmptyState/EmptyState.styled.ts
+var t = e.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-lg);
+  gap: var(--spacing-lg);
+  background-color: var(--color-background-neutral-overground);
+
+  &[data-variant="gray"] {
+    background: var(--color-background-neutral-underground-1);
+  }
+`, n = e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-sm);
+`, r = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xs);
+  width: 40px;
+  height: 40px;
+  border: var(--stroke-default) solid var(--color-content-neutral-stroke);
+  border-radius: var(--radius-full);
+  background-color: transparent;
+
+  svg {
+    width: 24px;
+    height: 24px;
+    color: var(--color-content-neutral-secondary);
+  }
+`, i = e.div`
+  width: 100%;
+  text-align: center;
+`, a = e.h2`
+  margin: 0;
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-lg);
+  line-height: var(--text-line-height-lg);
+  font-weight: 700;
+  text-align: center;
+`, o = e.div`
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  font-weight: 400;
+  text-align: center;
+`, s = e.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+`;
+//#endregion
+export { s as Actions, i as Content, o as Description, r as IconSlot, n as Main, t as Root, a as Title };