@agregio-solutions/design-system 2.3.0 → 2.3.1

package/dist/components/PageLayout/PageLayout.styled.js

@@ -0,0 +1,47 @@
+import { createGlobalStyle as e, styled as t } from "styled-components";
+//#region packages/components/PageLayout/PageLayout.styled.ts
+var n = e`
+  /* This hack is required when using the PageLayout component to avoid a bug in Chrome that creates a double scrollbar on the page */
+  html {
+    height: 100vh;
+    overflow: hidden;
+  }
+`, r = t.div`
+  display: flex;
+  overflow: hidden;
+`, i = t.main`
+  height: 100vh;
+  flex: 1;
+  overflow-y: auto;
+`, a = t.div`
+  @media screen and (max-width: 767px) {
+    position: absolute;
+    z-index: var(--z-index-fixed);
+    top: 0;
+    left: 0;
+    transition: left 0.3s ease-in-out;
+
+    &[data-page-layout-collapsed="true"] {
+      left: -300px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+`, o = t.div`
+  @media screen and (max-width: 767px) {
+    display: none;
+
+    &[data-navigation-overlay-collapsed="false"] {
+      display: block;
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      z-index: calc(var(--z-index-fixed) - 1);
+      background: rgba(0 12 51 / 0.7);
+    }
+  }
+`;
+//#endregion
+export { n as GlobalStyle, i as Main, a as NavigationComponent, o as NavigationOverlay, r as Root };

package/dist/components/PageLayout/context.js

@@ -0,0 +1,15 @@
+import { createContext as e, useContext as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/components/PageLayout/context.tsx
+var i = e(void 0), a = () => t(i), o = ({ children: e, initialIsCollapsed: t = !0 }) => {
+	let [a, o] = n(t);
+	return /* @__PURE__ */ r(i.Provider, {
+		value: {
+			isCollapsed: a,
+			setIsCollapsed: o
+		},
+		children: e
+	});
+};
+//#endregion
+export { o as PageLayoutProvider, a as usePageLayoutContext };

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,138 @@
+"use client";
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Button/Button.js";
+import n from "../SelectItem/SelectItem.js";
+import r from "../Select/Select.js";
+import i from "../../internal/arrayOfLength/arrayOfLength.js";
+import { ArrowsSection as a, Core as o, ItemsPerPage as s, ItemsRange as c, ItemsSection as l, PageNumber as u, PagesSection as d } from "./Pagination.styled.js";
+import f, { useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/components/Pagination/Pagination.tsx
+var g = f.forwardRef(({ count: f, onPageChange: g, pageIndex: v, itemsPerPageOptions: y = [
+	10,
+	20,
+	30,
+	40,
+	50
+], itemsPerPage: b = 10, onItemsPerPageChange: x, ...S }, C) => {
+	let w = e(_), T = p(() => v * b + 1, [b, v]), E = p(() => Math.min((v + 1) * b, f), [
+		f,
+		b,
+		v
+	]), D = p(() => Math.ceil(f / b), [f, b]), O = p(() => Math.max(D - 1, 0), [D]);
+	return /* @__PURE__ */ h(o, {
+		...S,
+		ref: C,
+		children: [
+			/* @__PURE__ */ h(l, { children: [
+				/* @__PURE__ */ m(s, { children: w.itemsPerPage }),
+				/* @__PURE__ */ m(r, {
+					id: "table-pagination-items-per-page",
+					label: w.selectItemsPerPage,
+					mode: "single",
+					value: String(b),
+					onChange: (e) => x(Number(e)),
+					fullWidth: !0,
+					children: y.map((e) => /* @__PURE__ */ m(n, {
+						id: String(e),
+						text: String(e)
+					}, e))
+				}),
+				/* @__PURE__ */ h(c, {
+					"data-testid": "table-pagination-items-range",
+					children: [
+						/* @__PURE__ */ m("b", { children: T }),
+						" - ",
+						/* @__PURE__ */ m("b", { children: E }),
+						" ",
+						w.of,
+						" ",
+						/* @__PURE__ */ m("b", { children: f }),
+						" ",
+						w.items
+					]
+				})
+			] }),
+			/* @__PURE__ */ h(d, { children: [/* @__PURE__ */ m(r, {
+				id: "table-pagination-page-selector",
+				label: w.selectPageToDisplay,
+				mode: "single",
+				value: String(v),
+				onChange: (e) => g(Number(e)),
+				fullWidth: !0,
+				children: i(D).map((e) => /* @__PURE__ */ m(n, {
+					id: String(e),
+					text: String(e + 1)
+				}, e))
+			}), /* @__PURE__ */ h(u, {
+				"data-testid": "table-pagination-pages-range",
+				children: [
+					w.Of,
+					" ",
+					/* @__PURE__ */ m("b", { children: D }),
+					" ",
+					w.pages
+				]
+			})] }),
+			/* @__PURE__ */ h(a, { children: [
+				/* @__PURE__ */ m(t, {
+					iconLeft: "first_page",
+					"aria-label": w.goToFirstPage,
+					onClick: () => g(0),
+					disabled: v === 0,
+					mode: "tertiary"
+				}),
+				/* @__PURE__ */ m(t, {
+					iconLeft: "chevron_left",
+					"aria-label": w.goToPreviousPage,
+					onClick: () => g(v - 1),
+					disabled: v === 0,
+					mode: "tertiary"
+				}),
+				/* @__PURE__ */ m(t, {
+					iconLeft: "chevron_right",
+					"aria-label": w.goToNextPage,
+					onClick: () => g(v + 1),
+					disabled: v === O,
+					mode: "tertiary"
+				}),
+				/* @__PURE__ */ m(t, {
+					iconLeft: "last_page",
+					"aria-label": w.goToLastPage,
+					onClick: () => g(O),
+					disabled: v === O,
+					mode: "tertiary"
+				})
+			] })
+		]
+	});
+}), _ = {
+	en: {
+		itemsPerPage: "Item per page",
+		selectItemsPerPage: "Select the number of items per page",
+		of: "of",
+		Of: "Of",
+		items: "items",
+		pages: "pages",
+		selectPageToDisplay: "Select page to display",
+		goToFirstPage: "Go to first page",
+		goToPreviousPage: "Go to previous page",
+		goToNextPage: "Go to next page",
+		goToLastPage: "Go to last page"
+	},
+	fr: {
+		itemsPerPage: "Élément par page",
+		selectItemsPerPage: "Sélectionner le nombre d'éléments par page",
+		of: "sur",
+		Of: "Sur",
+		items: "éléments",
+		pages: "pages",
+		selectPageToDisplay: "Sélectionner la page à afficher",
+		goToFirstPage: "Aller à la première page",
+		goToPreviousPage: "Aller à la page précédente",
+		goToNextPage: "Aller à la page suivante",
+		goToLastPage: "Aller à la dernière page"
+	}
+};
+//#endregion
+export { g as default };

package/dist/components/Pagination/Pagination.styled.js

@@ -0,0 +1,63 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Pagination/Pagination.styled.ts
+var t = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  gap: var(--spacing-sm);
+
+  .Label {
+    display: none;
+  }
+`, n = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`, r = e.div`
+  margin-right: var(--spacing-xs);
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-sm);
+`, i = e.div`
+  margin-left: var(--spacing-sm);
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-xs);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-xs);
+`, a = e.div`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--spacing-sm);
+
+  @media (max-width: 768px) {
+    order: 2;
+    width: 100%;
+    justify-content: center;
+  }
+`, o = e.div`
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-xs);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-xs);
+`, s = e.div`
+  @media (max-width: 768px) {
+    order: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+`;
+//#endregion
+export { s as ArrowsSection, t as Core, r as ItemsPerPage, i as ItemsRange, n as ItemsSection, o as PageNumber, a as PagesSection };

package/dist/components/Popover/Popover.js

@@ -0,0 +1,39 @@
+import { AriaPopover as e, CloseButton as t, Dialog as n, DialogHeader as r, Heading as i, OverlayArrow as a, UnstyledPopoverTrigger as o } from "./Popover.styled.js";
+import "react";
+import { DialogTrigger as s } from "react-aria-components";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region packages/components/Popover/Popover.tsx
+function d({ trigger: o, title: d, children: f, defaultOpen: p, isOpen: m, onOpenChange: h, placement: g = "top", hideArrow: _ = !1, hideCloseButton: v = !1 }) {
+	let y = !!d || !v;
+	return /* @__PURE__ */ u(s, {
+		defaultOpen: p,
+		isOpen: m,
+		onOpenChange: h,
+		children: [o, /* @__PURE__ */ u(e, {
+			placement: g,
+			children: [!_ && /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l("svg", {
+				width: 8,
+				height: 8,
+				viewBox: "0 0 8 8",
+				fill: "#FFF",
+				children: /* @__PURE__ */ l("path", { d: "M0 0 L4 4 L8 0" })
+			}) }), /* @__PURE__ */ l(n, { children: ({ close: e }) => /* @__PURE__ */ u(c, { children: [y && /* @__PURE__ */ u(r, { children: [!!d && /* @__PURE__ */ l(i, {
+				slot: "title",
+				children: d
+			}), !v && /* @__PURE__ */ l(t, {
+				iconRight: "close",
+				mode: "tertiary",
+				size: "small",
+				onClick: e
+			})] }), f] }) })]
+		})]
+	});
+}
+function f({ children: e, triggerButtonProps: t }) {
+	return /* @__PURE__ */ l(o, {
+		...t,
+		children: e
+	});
+}
+//#endregion
+export { f as PopoverTrigger, d as default };

package/dist/components/Popover/Popover.styled.js

@@ -0,0 +1,108 @@
+import e from "../Button/Button.js";
+import { styled as t } from "styled-components";
+import { Button as n, Dialog as r, Heading as i, OverlayArrow as a, Popover as o } from "react-aria-components";
+//#region packages/components/Popover/Popover.styled.ts
+var s = t(o)`
+  padding: var(--spacing-sm);
+  border-radius: var(--radius-rounded);
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-sm);
+  text-align: left;
+  background: var(--color-background-neutral-overground);
+
+  box-shadow: var(--shadow-strong);
+
+  forced-color-adjust: none;
+  outline: none;
+  /* fixes FF gap */
+  transform: translate3d(0, 0, 0);
+  transition:
+    transform 200ms,
+    opacity 200ms;
+
+  &[data-entering],
+  &[data-exiting] {
+    transform: var(--origin);
+    opacity: 0;
+  }
+
+  &[data-placement="top"] {
+    margin-bottom: var(--spacing-xs);
+    --origin: translateY(4px);
+  }
+
+  &[data-placement="bottom"] {
+    margin-top: var(--spacing-xs);
+    --origin: translateY(-4px);
+  }
+
+  &[data-placement="right"] {
+    margin-left: var(--spacing-xs);
+    --origin: translateX(-4px);
+  }
+
+  &[data-placement="left"] {
+    margin-right: var(--spacing-xs);
+    --origin: translateX(4px);
+  }
+`, c = t(a)`
+  line-height: 0;
+
+  &[data-placement="bottom"] svg {
+    transform: rotate(180deg);
+  }
+
+  &[data-placement="right"] svg {
+    transform: rotate(90deg);
+  }
+
+  &[data-placement="left"] svg {
+    transform: rotate(-90deg);
+  }
+`, l = t(n)`
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  display: inline;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+`, u = t(r)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  outline: none;
+`, d = t.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`, f = t(i)`
+  margin: 0;
+  padding: 0;
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-lg);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--text-line-height-lg);
+`, p = t(e)`
+  margin-left: auto;
+`;
+//#endregion
+export { s as AriaPopover, p as CloseButton, u as Dialog, d as DialogHeader, f as Heading, c as OverlayArrow, l as UnstyledPopoverTrigger };

package/dist/components/Radio/Radio.js

@@ -0,0 +1,23 @@
+"use client";
+import { Core as e, Input as t, Label as n, Text as r } from "./Radio.styled.js";
+import i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/components/Radio/Radio.tsx
+var s = i.forwardRef(({ label: i, labelProps: s, wrapperProps: c, disabled: l, ...u }, d) => /* @__PURE__ */ a(e, {
+	...c,
+	"data-has-label": !!i,
+	"data-design-system-component": "Radio",
+	children: /* @__PURE__ */ o(n, {
+		...s,
+		"aria-disabled": !!l,
+		"data-has-label": !!i,
+		children: [/* @__PURE__ */ a(t, {
+			...u,
+			type: "radio",
+			ref: d,
+			disabled: l
+		}), !!i && /* @__PURE__ */ a(r, { children: i })]
+	})
+}));
+//#endregion
+export { s as default };

package/dist/components/Radio/Radio.styled.js

@@ -0,0 +1,51 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Radio/Radio.styled.ts
+var t = e.div`
+  display: flex;
+
+  &[data-has-label="true"] {
+    padding: var(--spacing-xs) var(--spacing-xxs);
+  }
+`, n = e.label`
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-rounded);
+  cursor: pointer;
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+
+  &[aria-disabled="true"] {
+    color: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+  }
+
+  &:has(input:focus-visible),
+  &[data-force-focus="true"] {
+    outline: 2px solid var(--color-background-highlight-focus);
+    outline-offset: 2px;
+  }
+
+  &[data-has-label="false"] {
+    border-radius: 9999px;
+    outline-offset: -2px;
+  }
+`, r = e.input`
+  margin: var(--spacing-xxs);
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-content-action-action);
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`, i = e.span`
+  padding: 0 var(--spacing-xs);
+`;
+//#endregion
+export { t as Core, r as Input, n as Label, i as Text };

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,37 @@
+"use client";
+import e from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import { StyledReactAriaRadioGroup as t } from "./RadioGroup.styled.js";
+import n, { useImperativeHandle as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region packages/components/RadioGroup/RadioGroup.tsx
+var o = n.forwardRef(({ children: n, direction: o = "vertical", "aria-label": s, wrapperProps: c, label: l, labelIconRight: u, labelIconRightTooltip: d, helperTextIcon: f, helperText: p, errorHelperText: m, errorHelperTextIcon: h, successHelperText: g, successHelperTextIcon: _, warningHelperText: v, warningHelperTextIcon: y, orientation: b, required: x, ...S }, C) => {
+	let w = s ?? (typeof l == "string" ? l : void 0), T = i(null);
+	return r(C, () => ({ focus: (e) => T.current?.querySelector("input[tabindex=\"0\"]")?.focus(e) }), []), /* @__PURE__ */ a(e, {
+		...c,
+		label: l,
+		labelIconRight: u,
+		labelIconRightTooltip: d,
+		helperTextIcon: f,
+		helperText: p,
+		errorHelperText: m,
+		errorHelperTextIcon: h,
+		successHelperText: g,
+		successHelperTextIcon: _,
+		warningHelperText: v,
+		warningHelperTextIcon: y,
+		orientation: b,
+		required: x,
+		children: /* @__PURE__ */ a(t, {
+			ref: T,
+			"aria-label": w,
+			orientation: o,
+			isRequired: x,
+			isInvalid: !!m,
+			"data-design-system-component": "RadioGroup",
+			...S,
+			children: n
+		})
+	});
+});
+//#endregion
+export { o as default };

package/dist/components/RadioGroup/RadioGroup.styled.js

@@ -0,0 +1,15 @@
+import { styled as e } from "styled-components";
+import { RadioGroup as t } from "react-aria-components";
+//#region packages/components/RadioGroup/RadioGroup.styled.ts
+var n = e(t)`
+  display: flex;
+  flex-direction: column;
+
+  &[data-orientation="horizontal"] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--spacing-md);
+  }
+`;
+//#endregion
+export { n as StyledReactAriaRadioGroup };

package/dist/components/RadioGroupItem/RadioGroupItem.js

@@ -0,0 +1,25 @@
+"use client";
+import { Description as e, Indicator as t, ReadOnlyIcon as n, RootRadioField as r, StyledRadioButton as i, Text as a } from "./RadioGroupItem.styled.js";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/components/RadioGroupItem/RadioGroupItem.tsx
+var u = o.forwardRef(({ value: o, label: u, "aria-label": d, description: f, isDisabled: p }, m) => /* @__PURE__ */ l(r, {
+	ref: m,
+	value: o,
+	"aria-label": d,
+	isDisabled: p,
+	"data-has-label": !!u,
+	"data-design-system-component": "RadioGroupItem",
+	children: [/* @__PURE__ */ c(i, {
+		"data-has-label": !!u,
+		children: ({ isReadOnly: e, isSelected: r }) => /* @__PURE__ */ l(s, { children: [e ? /* @__PURE__ */ c(n, {
+			name: r ? "check_circle_outline" : "close",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ c(t, {}), !!u && /* @__PURE__ */ c(a, { children: u })] })
+	}), !!f && /* @__PURE__ */ c(e, {
+		slot: "description",
+		children: f
+	})]
+}));
+//#endregion
+export { u as default };

package/dist/components/RadioGroupItem/RadioGroupItem.styled.js

@@ -0,0 +1,76 @@
+import e from "../Icon/Icon.js";
+import { styled as t } from "styled-components";
+import { RadioButton as n, RadioField as r, Text as i } from "react-aria-components";
+//#region packages/components/RadioGroupItem/RadioGroupItem.styled.ts
+var a = t(r)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  &[data-has-label="true"] {
+    padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-xxs);
+  }
+`, o = t.span`
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: var(--spacing-xxs);
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-content-action-action);
+  border-radius: var(--radius-full);
+  background: var(--color-background-neutral-ground);
+`, s = t(e)`
+  flex-shrink: 0;
+  font-size: var(--text-font-size-md);
+`, c = t(n)`
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-rounded);
+  cursor: pointer;
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+
+  &[data-selected] ${o} {
+    background: var(--color-content-action-action);
+    box-shadow: inset 0 0 0 2px var(--color-background-neutral-ground);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+  }
+
+  &[data-disabled] {
+    color: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] ${o} {
+    border-color: var(--color-content-neutral-tertiary);
+    background: var(--color-content-neutral-tertiary);
+    box-shadow: none;
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--color-background-highlight-focus);
+    outline-offset: 2px;
+  }
+
+  &[data-has-label="false"] {
+    border-radius: var(--radius-full);
+    outline-offset: -2px;
+  }
+`, l = t.span`
+  padding: 0 var(--spacing-xs);
+`, u = t(i)`
+  padding-left: calc(16px + 2 * var(--spacing-xxs) + var(--spacing-xs));
+  color: var(--color-content-neutral-tertiary);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+
+  ${a}[data-readonly] & {
+    padding-left: calc(16px + var(--spacing-xs));
+  }
+`;
+//#endregion
+export { u as Description, o as Indicator, s as ReadOnlyIcon, a as RootRadioField, c as StyledRadioButton, l as Text };

package/dist/components/RouterProvider/RouterProvider.js

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