@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/SearchBar/SearchBar.js

@@ -0,0 +1,61 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import { Dialog as t, Modal as n, ModalOverlay as r, ResultsCount as i, ScrollZone as a } from "./SearchBar.styled.js";
+import o from "./components/SearchBarInput/SearchBarInput.js";
+import s from "./components/SearchBarLegend/SearchBarLegend.js";
+import { useEffect as c } from "react";
+import { Autocomplete as l } from "react-aria-components";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region packages/components/SearchBar/SearchBar.tsx
+function f({ children: f, isOpen: m, onOpenChange: h, onClear: g, resultsCount: _, width: v, inputProps: y }) {
+	let b = e(p), { value: x, onChange: S, ...C } = y;
+	c(() => {
+		let e = (e) => {
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), m || h(!0));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [m, h]);
+	let w = b.noResults;
+	return _ === 1 ? w = `1 ${b.result}` : _ > 1 && (w = `${_} ${b.results}`), /* @__PURE__ */ u(r, {
+		isOpen: m,
+		onOpenChange: h,
+		isDismissable: !0,
+		children: /* @__PURE__ */ u(n, {
+			style: { "--modal-width": v || "800px" },
+			children: /* @__PURE__ */ u(t, {
+				"aria-label": b.title,
+				children: /* @__PURE__ */ d(l, {
+					inputValue: x,
+					onInputChange: S,
+					children: [
+						/* @__PURE__ */ u(o, {
+							...C,
+							onClear: g,
+							withResults: !!_,
+							autoFocus: !0
+						}),
+						!!x && /* @__PURE__ */ u(i, { children: /* @__PURE__ */ u("div", { children: w }) }),
+						/* @__PURE__ */ u(a, { children: f }),
+						!!_ && /* @__PURE__ */ u(s, {})
+					]
+				})
+			})
+		})
+	});
+}
+var p = {
+	en: {
+		title: "Search",
+		result: "result",
+		results: "results",
+		noResults: "No results found"
+	},
+	fr: {
+		title: "Rechercher",
+		result: "résultat",
+		results: "résultats",
+		noResults: "Aucun résultat trouvé"
+	}
+};
+//#endregion
+export { f as default };

package/dist/components/SearchBar/SearchBar.styled.js

@@ -0,0 +1,90 @@
+import { keyframes as e, styled as t } from "styled-components";
+import { Dialog as n, Modal as r, ModalOverlay as i } from "react-aria-components";
+//#region packages/components/SearchBar/SearchBar.styled.ts
+var a = e`
+  from {
+    transform: translate(-50%, 50px) scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: translate(-50%, 0) scale(1);
+    opacity: 1;
+  }
+`, o = e`
+  from { background: rgba(0 0 0 / 0); }
+  to { background: rgba(0 12 51 / 0.7); }
+`, s = t(i)`
+  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} 100ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[data-entering],
+    &[data-exiting] {
+      animation: none;
+    }
+  }
+`, c = t(r)`
+  position: fixed;
+  top: 12vh;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: min(var(--modal-width), calc(100vw - var(--spacing-md)));
+  background: var(--color-content-neutral-primary-reversed);
+  outline: none;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+
+  &[data-entering] {
+    animation: ${a} 100ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[data-entering],
+    &[data-exiting] {
+      animation: none;
+    }
+  }
+`, l = t(n)`
+  outline: none;
+  max-height: min(calc(100vh - 12vh - var(--spacing-md)), 632px);
+  display: flex;
+  flex-direction: column;
+`, u = t.div`
+  padding: var(--spacing-xxs);
+
+  div {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-rounded);
+    background: var(--color-content-action-action-lighter);
+    color: var(--color-content-neutral-primary);
+    font-size: var(--text-font-size-md);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--text-line-height-md);
+  }
+`, d = t.div`
+  flex: 1;
+  overflow-y: auto;
+  display: inline;
+  position: relative;
+
+  [data-component="tab-list"] {
+    margin-top: var(--spacing-xs);
+  }
+
+  .react-aria-ListBox > section > header {
+    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-xs)
+      var(--spacing-sm) !important;
+  }
+`;
+//#endregion
+export { l as Dialog, c as Modal, s as ModalOverlay, u as ResultsCount, d as ScrollZone };

package/dist/components/SearchBar/components/SearchBarInput/SearchBarInput.js

@@ -0,0 +1,44 @@
+import e from "../../../../internal/usetranslations/usetranslations.js";
+import { ClearButton as t, ClearButtonIcon as n, SearchBarInputContainer as r, SearchBarInputField as i, SearchBarInputIcon as a } from "./SearchBarInput.styled.js";
+import o, { forwardRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/components/SearchBar/components/SearchBarInput/SearchBarInput.tsx
+var u = s(({ value: o, onChange: s, onClear: u, withResults: f, ...p }, m) => {
+	let h = e(d);
+	return /* @__PURE__ */ l(r, {
+		...o !== void 0 && { value: o },
+		...s && { onChange: s },
+		onClear: u,
+		"aria-label": p["aria-label"] || h.placeholder,
+		"data-with-results": f,
+		children: [
+			/* @__PURE__ */ c(a, {
+				name: "search",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ c(i, {
+				...p,
+				ref: m,
+				placeholder: p.placeholder || h.placeholder
+			}),
+			/* @__PURE__ */ c(t, {
+				"aria-label": h.clearButton,
+				children: /* @__PURE__ */ c(n, {
+					name: "close",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}), d = {
+	en: {
+		placeholder: "Search",
+		clearButton: "Clear"
+	},
+	fr: {
+		placeholder: "Rechercher",
+		clearButton: "Effacer"
+	}
+}, f = o.memo(u);
+//#endregion
+export { f as default };

package/dist/components/SearchBar/components/SearchBarInput/SearchBarInput.styled.js

@@ -0,0 +1,70 @@
+import e from "../../../Icon/Icon.js";
+import { styled as t } from "styled-components";
+import { Button as n, Input as r, SearchField as i } from "react-aria-components";
+//#region packages/components/SearchBar/components/SearchBarInput/SearchBarInput.styled.ts
+var a = t(i)`
+  width: 100%;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  background: var(--color-background-neutral-overground);
+  padding: var(--spacing-sm);
+  border-bottom: 1px solid var(--color-content-neutral-stroke);
+
+  &:focus-within {
+    background: var(--color-background-neutral-underground-1);
+  }
+`, o = t(e)`
+  width: 24px;
+  height: 24px;
+  color: var(--color-content-neutral-primary);
+  flex-shrink: 0;
+
+  ${a}:focus-within & {
+    color: var(--color-content-action-action);
+  }
+`, s = t(r)`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  color: var(--color-content-neutral-secondary);
+  font-weight: 700;
+  font-style: normal;
+
+  &::placeholder {
+    color: var(--color-content-neutral-secondary);
+    font-weight: 400;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  // Safari adds its own clear button on a search input
+  &::-webkit-search-cancel-button {
+    display: none;
+  }
+`, c = t(n)`
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  // react-aria keeps the clear button mounted
+  ${a}[data-empty] & {
+    display: none;
+  }
+`, l = t(e)`
+  width: 24px;
+  height: 24px;
+  color: var(--color-content-action-action);
+  flex-shrink: 0;
+`;
+//#endregion
+export { c as ClearButton, l as ClearButtonIcon, a as SearchBarInputContainer, s as SearchBarInputField, o as SearchBarInputIcon };

package/dist/components/SearchBar/components/SearchBarLegend/SearchBarLegend.js

@@ -0,0 +1,46 @@
+import e from "../../../Icon/Icon.js";
+import t from "../../../../internal/usetranslations/usetranslations.js";
+import { KeyFrame as n, KeySection as r, KeyText as i, LabelText as a, LegendItem as o, SearchBarLegendContainer as s } from "./SearchBarLegend.styled.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/components/SearchBar/components/SearchBarLegend/SearchBarLegend.tsx
+function u({ className: u, style: f }) {
+	let p = t(d);
+	return /* @__PURE__ */ l(s, {
+		className: u,
+		style: f,
+		children: [
+			/* @__PURE__ */ l(o, { children: [/* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(n, {
+				"data-type": "icon",
+				children: /* @__PURE__ */ c(e, { name: "arrow_upward" })
+			}), /* @__PURE__ */ c(n, {
+				"data-type": "icon",
+				children: /* @__PURE__ */ c(e, { name: "arrow_downward" })
+			})] }), /* @__PURE__ */ c(a, { children: p.navigation })] }),
+			/* @__PURE__ */ l(o, { children: [/* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(n, {
+				"data-type": "icon",
+				children: /* @__PURE__ */ c(e, { name: "arrow_enter" })
+			}) }), /* @__PURE__ */ c(a, { children: p.choose })] }),
+			/* @__PURE__ */ l(o, { children: [/* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(n, {
+				"data-type": "text",
+				children: /* @__PURE__ */ c(i, { children: p.esc })
+			}) }), /* @__PURE__ */ c(a, { children: p.close })] })
+		]
+	});
+}
+var d = {
+	en: {
+		navigation: "Navigation",
+		choose: "Choose",
+		close: "Close",
+		esc: "esc"
+	},
+	fr: {
+		navigation: "Navigation",
+		choose: "Choisir",
+		close: "Fermer",
+		esc: "ech"
+	}
+};
+//#endregion
+export { u as default };

package/dist/components/SearchBar/components/SearchBarLegend/SearchBarLegend.styled.js

@@ -0,0 +1,52 @@
+import { styled as e } from "styled-components";
+//#region packages/components/SearchBar/components/SearchBarLegend/SearchBarLegend.styled.ts
+var t = e.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-sm);
+  background: var(--color-background-neutral-overground);
+`, n = e.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`, r = e.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+`, i = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--spacing-xs);
+  border: var(--stroke-default) solid var(--color-content-neutral-stroke);
+  border-radius: var(--radius-full);
+  min-width: 32px;
+  height: 32px;
+
+  &[data-type="text"] {
+    padding: var(--spacing-xs);
+    min-width: auto;
+  }
+
+  /* Icon styling */
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--color-content-neutral-secondary);
+  }
+`, a = e.span`
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+  color: var(--color-content-neutral-secondary);
+  text-align: center;
+`, o = e.span`
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  font-weight: 700;
+  color: var(--color-content-neutral-secondary);
+`;
+//#endregion
+export { i as KeyFrame, r as KeySection, a as KeyText, o as LabelText, n as LegendItem, t as SearchBarLegendContainer };

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,20 @@
+"use client";
+import e from "react";
+import { Tabs as t } from "react-aria-components";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/SegmentedControl/SegmentedControl.tsx
+var r = e.forwardRef((e, r) => {
+	let { children: i, isDisabled: a, selectedKey: o, onSelectionChange: s, defaultSelectedKey: c, className: l, style: u } = e;
+	return /* @__PURE__ */ n(t, {
+		ref: r,
+		isDisabled: a,
+		selectedKey: o,
+		onSelectionChange: (e) => s?.(String(e)),
+		defaultSelectedKey: c,
+		className: l,
+		style: u,
+		children: i
+	});
+});
+//#endregion
+export { r as default };

package/dist/components/SegmentedControl/SegmentedControlButton/SegmentedControlButton.js

@@ -0,0 +1,22 @@
+"use client";
+import { AriaTab as e, IconWrapper as t, Label as n } from "./SegmentedControlButton.styled.js";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/components/SegmentedControl/SegmentedControlButton/SegmentedControlButton.tsx
+var o = r.forwardRef((r, o) => {
+	let { id: s, href: c, target: l, text: u, icon: d, style: f, className: p, isDisabled: m, routerOptions: h, ...g } = r;
+	return !u && !d ? null : /* @__PURE__ */ a(e, {
+		...g,
+		ref: o,
+		id: s,
+		href: c,
+		style: f,
+		className: p,
+		isDisabled: m,
+		routerOptions: h,
+		target: l,
+		children: [!!d && /* @__PURE__ */ i(t, { name: d }), !!u && /* @__PURE__ */ i(n, { children: u })]
+	});
+});
+//#endregion
+export { o as default };

package/dist/components/SegmentedControl/SegmentedControlButton/SegmentedControlButton.styled.js

@@ -0,0 +1,81 @@
+import e from "../../Icon/Icon.js";
+import { styled as t } from "styled-components";
+import { Tab as n } from "react-aria-components";
+//#region packages/components/SegmentedControl/SegmentedControlButton/SegmentedControlButton.styled.ts
+var r = t.div``, i = t(n)`
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  padding: calc(var(--spacing-xs) - 1px) var(--spacing-sm);
+  border: var(--color-content-neutral-stroke) solid 1px;
+  background: var(--color-background-neutral-ground);
+  font-style: normal;
+  font-weight: 700;
+  color: var(--color-content-action-action);
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-md);
+  outline: none;
+
+  // Manage rounded corners
+  &:first-child {
+    border-radius: var(--radius-rounded) 0px 0px var(--radius-rounded);
+  }
+  &:last-child {
+    border-radius: 0px var(--radius-rounded) var(--radius-rounded) 0px;
+  }
+
+  // Manage border-between
+  &:not(:last-child) {
+    border-right: none;
+  }
+
+  // Manage hover state
+  &:not([data-disabled])[data-hovered],
+  &:not([data-disabled])[data-force-hovered] {
+    background: var(--color-content-action-action-lighter);
+  }
+
+  // Manage selected state
+  &:not([data-disabled])[data-selected] {
+    color: var(--color-content-neutral-primary-reversed);
+    background: var(--color-content-action-action);
+  }
+  &:not([data-disabled])[data-selected][data-hovered],
+  &:not([data-disabled])[data-selected][data-force-hovered] {
+    color: var(--color-content-neutral-primary-reversed);
+    background: var(--color-content-action-action-darker);
+  }
+
+  // Manage keyboard focus state (and temporary active state as well)
+  &:not([data-disabled])[data-focus-visible],
+  &:not([data-disabled])[data-force-focus-visible] {
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      border-radius: inherit;
+      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;
+    }
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    background: var(--color-content-neutral-tertiary);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+`, a = t(e)`
+  font-size: var(--text-font-size-xl);
+`;
+//#endregion
+export { i as AriaTab, a as IconWrapper, r as Label };

package/dist/components/SegmentedControl/SegmentedControlList/SegmentedControlList.js

@@ -0,0 +1,16 @@
+"use client";
+import { AriaTabList as e } from "./SegmentedControlList.styled.js";
+import t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/SegmentedControl/SegmentedControlList/SegmentedControlList.tsx
+var r = t.forwardRef((t, r) => {
+	let { children: i, className: a, style: o } = t;
+	return /* @__PURE__ */ n(e, {
+		ref: r,
+		className: a,
+		style: o,
+		children: i
+	});
+});
+//#endregion
+export { r as default };

package/dist/components/SegmentedControl/SegmentedControlList/SegmentedControlList.styled.js

@@ -0,0 +1,9 @@
+import { styled as e } from "styled-components";
+import { TabList as t } from "react-aria-components";
+//#region packages/components/SegmentedControl/SegmentedControlList/SegmentedControlList.styled.ts
+var n = e(t)`
+  display: flex;
+  align-items: center;
+`;
+//#endregion
+export { n as AriaTabList };

package/dist/components/SegmentedControl/SegmentedControlPanel/SegmentedControlPanel.js

@@ -0,0 +1,11 @@
+"use client";
+import e from "react";
+import { TabPanel as t } from "react-aria-components";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/SegmentedControl/SegmentedControlPanel/SegmentedControlPanel.tsx
+var r = e.forwardRef((e, r) => /* @__PURE__ */ n(t, {
+	ref: r,
+	...e
+}));
+//#endregion
+export { r as default };

package/dist/components/Select/Select.js

@@ -0,0 +1,96 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Badge/Badge.js";
+import n from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import r from "../../internal/getNatureFromMessages/getNatureFromMessages.js";
+import { ArrowIcon as i, Button as a, ListBox as o, MultipleSelectValue as s, Popover as c, RootSelect as l, SelectValue as u, TriggerContentRight as d } from "./Select.styled.js";
+import f from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/components/Select/Select.tsx
+var g = f.forwardRef((f, g) => {
+	let v = e(_), y = f["aria-label"] ?? String(f.label), b = r({
+		nature: f.nature,
+		successHelperText: f.successHelperText,
+		errorHelperText: f.errorHelperText,
+		warningHelperText: f.warningHelperText
+	}), x = {
+		...f.wrapperProps,
+		htmlForId: f.id,
+		label: f.label,
+		labelIconRight: f.labelIconRight,
+		labelIconRightTooltip: f.labelIconRightTooltip,
+		helperTextIcon: f.helperTextIcon,
+		helperText: f.helperText,
+		errorHelperText: f.errorHelperText,
+		errorHelperTextIcon: f.errorHelperTextIcon,
+		successHelperText: f.successHelperText,
+		successHelperTextIcon: f.successHelperTextIcon,
+		warningHelperText: f.warningHelperText,
+		warningHelperTextIcon: f.warningHelperTextIcon,
+		orientation: f.orientation,
+		required: f.required
+	}, S = f.mode === "multiple" ? {
+		selectionMode: "multiple",
+		value: f.selectedKeys,
+		onChange: (e) => {
+			Array.isArray(e) && f.onSelectionChange(e.map(String));
+		}
+	} : {
+		selectionMode: "single",
+		value: f.value,
+		onChange: (e) => {
+			Array.isArray(e) || f.onChange(String(e));
+		},
+		name: f.name
+	};
+	return /* @__PURE__ */ m(n, {
+		...x,
+		children: /* @__PURE__ */ h(l, {
+			ref: g,
+			id: f.id,
+			isDisabled: f.disabled,
+			isRequired: f.required,
+			disabledKeys: f.disabledIds,
+			defaultOpen: f.defaultOpen,
+			isOpen: f.open,
+			onOpenChange: f.onOpenChange,
+			"data-fullwidth": f.fullWidth,
+			"aria-label": y,
+			...S,
+			children: [/* @__PURE__ */ h(a, {
+				...f.buttonProps,
+				type: "button",
+				"data-nature": b,
+				"data-fullwidth": f.fullWidth,
+				children: [f.mode === "multiple" ? /* @__PURE__ */ h(p, { children: [!f.selectedKeys?.length && /* @__PURE__ */ m("span", {
+					"data-placeholder": !0,
+					children: f.placeholder || ""
+				}), !!f.selectedKeys?.length && /* @__PURE__ */ h(s, { children: [/* @__PURE__ */ m(t, {
+					value: f.selectedKeys.length,
+					nature: "informative"
+				}), f.selectedKeys.length === 1 ? ` ${v.itemSelected}` : ` ${v.itemsSelected}`] })] }) : /* @__PURE__ */ m(u, { children: (e) => e.isPlaceholder ? f.placeholder || "" : e.selectedText }), /* @__PURE__ */ h(d, { children: [f.triggerContentRight, /* @__PURE__ */ m(i, {
+					name: "expand_more",
+					"data-disabled": f.disabled
+				})] })]
+			}), /* @__PURE__ */ m(c, {
+				offset: 4,
+				placement: "bottom",
+				children: /* @__PURE__ */ m(o, {
+					"data-tall": f.tallDropdown || void 0,
+					children: f.children
+				})
+			})]
+		})
+	});
+}), _ = {
+	en: {
+		itemsSelected: " items selected",
+		itemSelected: " item selected"
+	},
+	fr: {
+		itemsSelected: " éléments sélectionnés",
+		itemSelected: " élément sélectionné"
+	}
+};
+//#endregion
+export { g as default };