@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/Button/Button.styled.js

@@ -0,0 +1,340 @@
+import e from "../Icon/Icon.js";
+import { css as t, styled as n } from "styled-components";
+import { Button as r, Link as i } from "react-aria-components";
+//#region packages/components/Button/Button.styled.ts
+var a = n(e)`
+  // Icons font-sizes are not equal to the font-size of the text (see Figma file)
+  &[data-size="small"] {
+    font-size: var(--text-font-size-md);
+  }
+  &[data-size="medium"],
+  &[data-size="large"] {
+    font-size: var(--text-font-size-xl);
+  }
+`, o = t`
+  // Core styles, here is the only place where CSS variables are *used*
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  text-decoration: none;
+  // Little trick to manage the "border"
+  // this is needed to reflect the same behavior as in the Figma file (border have "inside" position)
+  border: none;
+  outline: var(--border-color) solid 1px;
+  outline-offset: -1px;
+
+  background: var(--background-color);
+  font-style: normal;
+  font-weight: 700;
+  color: var(--color);
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+
+  // Manage hover state
+  &[data-hovered],
+  &[data-force-hovered] {
+    color: var(--hover-color);
+    background: var(--hover-background-color);
+    outline-color: var(--hover-border-color);
+  }
+
+  // Manage pressed state
+  &[data-pressed],
+  &[data-force-pressed] {
+    transform: scale(0.96);
+  }
+
+  // Manage the "hold to submit" state: hide the content without giving up its
+  // space so the button never changes size, and drop the pressed scale so the
+  // progress circle does not breathe. The text is a bare text node, hidden by
+  // its fill color: "color" must stay, the progress circle draws with currentColor.
+  &[data-holding="true"] {
+    transform: none;
+    -webkit-text-fill-color: transparent;
+
+    ${a} {
+      visibility: hidden;
+    }
+  }
+
+  // Manage keyboard focus state
+  &:not([data-disabled])[data-focus-visible],
+  &:not([data-disabled])[data-force-focus-visible] {
+    color: var(--hover-color);
+    background: var(--hover-background-color);
+    outline-color: var(--hover-border-color);
+    box-shadow:
+      #fff 0 0 0 2px,
+      var(--color-background-highlight-focus) 0 0 0 4px,
+      rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  }
+
+  // Manage the main focus state
+  &:not([data-disabled])[data-focused],
+  &:not([data-disabled])[data-force-focused] {
+    outline: var(--border-color) solid 1px;
+  }
+  &:not([data-disabled])[data-focused][data-hovered],
+  &:not([data-disabled])[data-force-focused][data-hovered] {
+    outline: var(--hover-border-color) solid 1px;
+  }
+
+  // Manage the size variations
+  &[data-size="small"] {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-minimal);
+    font-size: var(--text-font-size-xs);
+    line-height: var(--text-line-height-xs);
+  }
+
+  &[data-size="medium"] {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-rounded);
+    font-size: var(--text-font-size-sm);
+    // The 4px reflect the little space between text and y-axis paddings (see Figma file)
+    line-height: calc(var(--text-line-height-sm) + 4px);
+  }
+
+  &[data-size="large"] {
+    padding: var(--spacing-sm);
+    border-radius: var(--radius-full);
+    font-size: var(--text-font-size-md);
+    line-height: var(--text-line-height-md);
+  }
+
+  // Adjust the paddings when there is an icon
+  &[data-has-icon-left="true"] {
+    padding-left: var(--spacing-xs);
+  }
+
+  &[data-has-icon-right="true"] {
+    padding-right: var(--spacing-xs);
+  }
+
+  &[data-has-no-text="true"] {
+    padding: var(--spacing-xs);
+
+    &[data-size="large"] {
+      padding: var(--spacing-sm);
+    }
+  }
+
+  /**
+   * Starting here, we are mainly just changing colors depending on the nature and mode of the button.
+   */
+  &[data-nature="action"]:not([data-disabled]):not([data-is-loading="true"]) {
+    &[data-mode="primary"] {
+      --color: var(--color-content-neutral-primary-reversed);
+      --background-color: var(--color-content-action-action);
+      --border-color: transparent;
+      --hover-color: var(--color-content-neutral-primary-reversed);
+      --hover-background-color: var(--color-content-action-action-darker);
+      --hover-border-color: transparent;
+    }
+
+    &[data-mode="secondary"] {
+      --color: var(--color-content-action-action);
+      --background-color: var(--color-content-neutral-primary-reversed);
+      --border-color: var(--color-content-action-action);
+      --hover-color: var(--color-content-action-action-darker);
+      --hover-background-color: var(--color-content-action-action-lighter);
+      --hover-border-color: var(--color-content-action-action-darker);
+    }
+
+    &[data-mode="tertiary"] {
+      --color: var(--color-content-action-action);
+      --background-color: transparent;
+      --border-color: transparent;
+      --hover-color: var(--color-content-action-action-darker);
+      --hover-background-color: var(--color-content-action-action-lighter);
+      --hover-border-color: transparent;
+    }
+  }
+
+  &[data-nature="informative"]:not([data-disabled]):not(
+      [data-is-loading="true"]
+    ) {
+    &[data-mode="primary"] {
+      --color: var(--color-content-neutral-primary-reversed);
+      --background-color: var(--color-content-message-informative-darker);
+      --border-color: transparent;
+      --hover-color: var(--color-content-neutral-primary-reversed);
+      --hover-background-color: var(
+        --color-content-message-informative-darkest
+      );
+      --hover-border-color: transparent;
+    }
+
+    &[data-mode="secondary"] {
+      --color: var(--color-content-message-informative-darkest);
+      --background-color: var(--color-content-message-informative-lighter);
+      --border-color: var(--color-content-neutral-stroke);
+      --hover-color: var(--color-content-message-informative-darkest);
+      --hover-background-color: var(
+        --color-content-message-informative-lighter
+      );
+      --hover-border-color: var(--color-content-message-informative-darker);
+    }
+
+    &[data-mode="tertiary"] {
+      --color: var(--color-content-message-informative-darker);
+      --background-color: transparent;
+      --border-color: transparent;
+      --hover-color: var(--color-content-message-informative-darker);
+      --hover-background-color: transparent;
+      --hover-border-color: transparent;
+    }
+  }
+
+  &[data-nature="negative"]:not([data-disabled]):not([data-is-loading="true"]) {
+    &[data-mode="primary"] {
+      --color: var(--color-content-neutral-primary-reversed);
+      --background-color: var(--color-content-message-negative-darker);
+      --border-color: transparent;
+      --hover-color: var(--color-content-neutral-primary-reversed);
+      --hover-background-color: var(--color-content-message-negative-darkest);
+      --hover-border-color: transparent;
+    }
+
+    &[data-mode="secondary"] {
+      --color: var(--color-content-message-negative-darker);
+      --background-color: var(--color-content-message-negative-lighter);
+      --border-color: var(--color-content-neutral-stroke);
+      --hover-color: var(--color-content-message-negative-darker);
+      --hover-background-color: var(--color-content-message-negative-lighter);
+      --hover-border-color: var(--color-content-message-negative-darker);
+    }
+
+    &[data-mode="tertiary"] {
+      --color: var(--color-content-message-negative-darker);
+      --background-color: transparent;
+      --border-color: transparent;
+      --hover-color: var(--color-content-message-negative-darker);
+      --hover-background-color: transparent;
+      --hover-border-color: transparent;
+    }
+  }
+
+  &[data-nature="positive"]:not([data-disabled]):not([data-is-loading="true"]) {
+    &[data-mode="primary"] {
+      --color: var(--color-content-neutral-primary-reversed);
+      --background-color: var(--color-content-message-positive-darker);
+      --border-color: transparent;
+      --hover-color: var(--color-content-neutral-primary-reversed);
+      --hover-background-color: var(--color-content-message-positive-darkest);
+      --hover-border-color: transparent;
+    }
+
+    &[data-mode="secondary"] {
+      --color: var(--color-content-message-positive-darker);
+      --background-color: var(--color-content-message-positive-lighter);
+      --border-color: var(--color-content-neutral-stroke);
+      --hover-color: var(--color-content-message-positive-darker);
+      --hover-background-color: var(--color-content-message-positive-lighter);
+      --hover-border-color: var(--color-content-message-positive-darker);
+    }
+
+    &[data-mode="tertiary"] {
+      --color: var(--color-content-message-positive-darker);
+      --background-color: transparent;
+      --border-color: transparent;
+      --hover-color: var(--color-content-message-positive-darker);
+      --hover-background-color: transparent;
+      --hover-border-color: transparent;
+    }
+  }
+
+  &[data-nature="warning"]:not([data-disabled]):not([data-is-loading="true"]) {
+    &[data-mode="primary"] {
+      --color: var(--color-content-neutral-primary-reversed);
+      --background-color: var(--color-content-message-warning-darker);
+      --border-color: transparent;
+      --hover-color: var(--color-content-neutral-primary-reversed);
+      --hover-background-color: var(--color-content-message-warning-darkest);
+      --hover-border-color: transparent;
+    }
+
+    &[data-mode="secondary"] {
+      --color: var(--color-content-message-warning-darker);
+      --background-color: var(--color-content-message-warning-lighter);
+      --border-color: var(--color-content-neutral-stroke);
+      --hover-color: var(--color-content-message-warning-darker);
+      --hover-background-color: var(--color-content-message-warning-lighter);
+      --hover-border-color: var(--color-content-message-warning-darker);
+    }
+
+    &[data-mode="tertiary"] {
+      --color: var(--color-content-message-warning-darker);
+      --background-color: transparent;
+      --border-color: transparent;
+      --hover-color: var(--color-content-message-warning-darker);
+      --hover-background-color: transparent;
+      --hover-border-color: transparent;
+    }
+  }
+
+  // Remove box-shadow and add text-decoration on hover/focus/active, but not for "action" buttons
+  // (nor while holding, where the text is hidden)
+  /* prettier-ignore */
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-is-loading="true"]):not([data-nature="action"]):not([data-holding="true"])[data-hovered],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-is-loading="true"]):not([data-nature="action"]):not([data-holding="true"])[data-force-hovered],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-is-loading="true"]):not([data-nature="action"]):not([data-holding="true"])[data-focus-visible],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-is-loading="true"]):not([data-nature="action"]):not([data-holding="true"])[data-force-focus-visible],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-is-loading="true"]):not([data-nature="action"]):not([data-holding="true"])[data-pressed],
+  &[data-mode="tertiary"]:not([data-disabled]):not([data-is-loading="true"]):not([data-nature="action"]):not([data-holding="true"])[data-force-pressed] {
+    box-shadow: none;
+    text-decoration: underline;
+  }
+
+  // The loading state shares the disabled palette. It needs its own selector
+  // because react-aria's "isPending" deliberately does not set data-disabled:
+  // the button stays focusable and keeps firing hover events, which the
+  // hover variables redefined below neutralise visually.
+  &[data-disabled],
+  &[data-is-loading="true"] {
+    cursor: not-allowed;
+    --color: var(--color-content-neutral-primary-reversed);
+    --hover-color: var(--color);
+    --hover-background-color: var(--background-color);
+    --hover-border-color: var(--border-color);
+
+    &[data-mode="primary"] {
+      --background-color: var(--color-content-neutral-tertiary);
+      --border-color: transparent;
+    }
+
+    &[data-mode="secondary"] {
+      --background-color: var(--color-content-neutral-tertiary);
+      --border-color: var(--color-content-neutral-primary);
+    }
+
+    &[data-mode="tertiary"] {
+      --background-color: transparent;
+      --hover-background-color: transparent;
+      --color: var(--color-content-neutral-tertiary);
+    }
+  }
+
+  &[data-is-loading="true"] {
+    --color: var(--color-content-neutral-primary);
+  }
+`, s = n(r)`
+  ${o}
+`, c = n(i)`
+  ${o}
+`, l = n.div`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  transform: translate(50%, -50%);
+`;
+//#endregion
+export { l as BadgeWrapper, s as CoreButton, c as CoreLink, a as IconWrapper, o as coreButtonStyles };

package/dist/components/Button/components/HoldProgress/HoldProgress.js

@@ -0,0 +1,29 @@
+"use client";
+import e from "../../../../internal/usetranslations/usetranslations.js";
+import { HoldProgressCircle as t, HoldProgressSvg as n } from "./HoldProgress.styled.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/components/Button/components/HoldProgress/HoldProgress.tsx
+function i({ size: i, duration: o }) {
+	let s = e(a);
+	return /* @__PURE__ */ r(n, {
+		viewBox: "0 0 24 24",
+		role: "progressbar",
+		"aria-label": s.label,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": 0,
+		"data-size": i,
+		style: { "--hold-to-submit-duration": `${o}ms` },
+		children: /* @__PURE__ */ r(t, {
+			cx: "12",
+			cy: "12",
+			r: "8"
+		})
+	});
+}
+var a = {
+	en: { label: "Keep holding to confirm" },
+	fr: { label: "Maintenez pour confirmer" }
+};
+//#endregion
+export { i as default };

package/dist/components/Button/components/HoldProgress/HoldProgress.styled.js

@@ -0,0 +1,42 @@
+import { keyframes as e, styled as t } from "styled-components";
+//#region packages/components/Button/components/HoldProgress/HoldProgress.styled.ts
+var n = 50.27, r = e`
+  from {
+    stroke-dashoffset: ${n};
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+`, i = t.svg`
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  // Start filling at 12 o'clock instead of 3 o'clock
+  transform: rotate(-90deg);
+
+  &[data-size="small"] {
+    width: 14px;
+    height: 14px;
+  }
+  &[data-size="medium"] {
+    width: 18px;
+    height: 18px;
+  }
+  &[data-size="large"] {
+    width: 22px;
+    height: 22px;
+  }
+`, a = t.circle`
+  fill: none;
+  stroke: currentColor;
+  // Deliberately thick (the hole is a third of the outer diameter) so the shape
+  // reads as a filling gauge and never as a pending spinner. With a stroke that
+  // thick, a round linecap would show up as a blob, hence the default butt one.
+  stroke-width: 8;
+  stroke-dasharray: ${n};
+  // No prefers-reduced-motion guard here on purpose: this animation is not
+  // decorative, it *is* the "how much longer" information.
+  animation: ${r} var(--hold-to-submit-duration) linear forwards;
+`;
+//#endregion
+export { a as HoldProgressCircle, i as HoldProgressSvg };

package/dist/components/Button/components/IconLeftElement/IconLeftElement.js

@@ -0,0 +1,13 @@
+"use client";
+import { IconWrapper as e } from "../../Button.styled.js";
+import t from "../../../Loader/Loader.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/Button/components/IconLeftElement/IconLeftElement.tsx
+function r({ iconLeft: r, isLoading: i, size: a }) {
+	return i ? /* @__PURE__ */ n(t, { size: a === "small" ? "small" : "medium" }) : r ? /* @__PURE__ */ n(e, {
+		name: r,
+		"data-size": a
+	}) : null;
+}
+//#endregion
+export { r as default };

package/dist/components/Button/components/IconRightElement/IconRightElement.js

@@ -0,0 +1,12 @@
+"use client";
+import { IconWrapper as e } from "../../Button.styled.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/components/Button/components/IconRightElement/IconRightElement.tsx
+function n({ iconRight: n, text: r, isLoading: i, size: a }) {
+	return i && !r || !n ? null : /* @__PURE__ */ t(e, {
+		name: n,
+		"data-size": a
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,113 @@
+import e from "../Button/Button.js";
+import { Calendar as t, CalendarCell as n, CalendarGrid as r, Header as i, Heading as a, RangeCalendar as o } from "./Calendar.styled.js";
+import s from "../../internal/stringDateToValue/stringDateToValue.js";
+import c from "../../internal/dateValueToString/dateValueToString.js";
+import "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region packages/components/Calendar/Calendar.tsx
+function f({ mode: e, renderCalendarCell: n, visibleDuration: i, minValue: a, maxValue: f, isDateUnavailable: g, isDisabled: _, isReadOnly: v, autoFocus: y, focusedValue: b, defaultFocusedValue: x, pageBehavior: S, firstDayOfWeek: C, className: w, style: T, size: E = "default", noContainer: D, noHeading: O, onFocusChange: k, ...A }) {
+	let j = {
+		visibleDuration: i,
+		minValue: s(a) ?? void 0,
+		maxValue: s(f) ?? void 0,
+		isDateUnavailable: g ? (e) => g(c(e)) : void 0,
+		isDisabled: _,
+		isReadOnly: v,
+		autoFocus: y,
+		focusedValue: s(b) ?? void 0,
+		defaultFocusedValue: s(x) ?? void 0,
+		pageBehavior: S,
+		firstDayOfWeek: C,
+		className: w,
+		style: T,
+		"data-no-container": D,
+		onFocusChange: (e) => {
+			k && k(c(e));
+		}
+	};
+	if (e === "single") {
+		let e = A;
+		return /* @__PURE__ */ d(t, {
+			...j,
+			value: typeof e.value == "string" ? s(e.value) : e.value,
+			onChange: e.onChange ? (t) => e.onChange?.(c(t)) : void 0,
+			children: [!O && /* @__PURE__ */ u(m, {}), /* @__PURE__ */ u(r, {
+				"data-mode": "single",
+				"data-size": E,
+				children: (e) => n ? /* @__PURE__ */ u(l, { children: n(c(e)) }) : /* @__PURE__ */ u(h, {
+					date: c(e),
+					mode: "single"
+				})
+			})]
+		});
+	}
+	if (e === "range") {
+		let e = A;
+		return /* @__PURE__ */ d(o, {
+			...j,
+			onFocusChange: e.onFocusChange ? (t) => e.onFocusChange?.(c(t)) : void 0,
+			allowsNonContiguousRanges: e.allowsNonContiguousRanges,
+			onChange: (t) => e.onChange?.({
+				start: c(t?.start),
+				end: c(t?.end)
+			}),
+			value: e.value === null ? null : p(e.value),
+			children: [!O && /* @__PURE__ */ u(m, {}), /* @__PURE__ */ u(r, {
+				"data-mode": "range",
+				"data-size": E,
+				children: (e) => n ? /* @__PURE__ */ u(l, { children: n(c(e)) }) : /* @__PURE__ */ u(h, {
+					date: c(e),
+					mode: "range"
+				})
+			})]
+		});
+	}
+	if (e === "multiple") {
+		let e = A;
+		return /* @__PURE__ */ d(t, {
+			...j,
+			value: null,
+			onChange: e.onChange ? (t) => {
+				let n = e.value ?? [], r = c(t);
+				return n.includes(r) ? e.onChange?.(n.filter((e) => e !== r)) : e.onChange?.([...n, r]);
+			} : void 0,
+			children: [!O && /* @__PURE__ */ u(m, {}), /* @__PURE__ */ u(r, {
+				"data-mode": "single",
+				"data-size": E,
+				children: (t) => n ? /* @__PURE__ */ u(l, { children: n(c(t)) }) : /* @__PURE__ */ u(h, {
+					date: c(t),
+					mode: "single",
+					"data-multiple-selected": e.value?.includes(c(t))
+				})
+			})]
+		});
+	}
+}
+function p(e) {
+	if (e) return {
+		start: s(e.start),
+		end: s(e.end)
+	};
+}
+var m = () => /* @__PURE__ */ d(i, { children: [
+	/* @__PURE__ */ u(e, {
+		iconLeft: "chevron_left",
+		slot: "previous",
+		mode: "tertiary"
+	}),
+	/* @__PURE__ */ u(a, {}),
+	/* @__PURE__ */ u(e, {
+		iconLeft: "chevron_right",
+		slot: "next",
+		mode: "tertiary"
+	})
+] }), h = ({ date: e, mode: t, ...r }) => {
+	let i = t === "multiple" ? "single" : t;
+	return /* @__PURE__ */ u(n, {
+		...r,
+		"data-mode": i,
+		date: s(e)
+	});
+};
+//#endregion
+export { h as CalendarCell, f as default };