@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/Calendar/Calendar.styled.js

@@ -0,0 +1,159 @@
+import { css as e, styled as t } from "styled-components";
+import { Calendar as n, CalendarCell as r, CalendarGrid as i, Heading as a, RangeCalendar as o } from "react-aria-components";
+//#region packages/components/Calendar/Calendar.styled.ts
+var s = e`
+  display: inline-block;
+  background: var(--color-content-neutral-primary-reversed);
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-sm)
+    var(--spacing-xs);
+  box-shadow: var(--shadow-medium);
+
+  &[data-no-container="true"] {
+    padding: 0;
+    box-shadow: none;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+`, c = t(o)`
+  ${s}
+`, l = t(n)`
+  ${s}
+`, u = t(i)`
+  margin-left: auto;
+  margin-right: auto;
+  border-spacing: 0 var(--spacing-xs);
+  color: var(--color-content-neutral-secondary);
+
+  --cell-size: 48px;
+  --inner-cell-size: 40px;
+
+  &[data-size="compact"] {
+    --cell-size: 34px;
+    --inner-cell-size: 28px;
+  }
+
+  th,
+  td {
+    padding: 0;
+  }
+
+  .react-aria-CalendarHeaderCell {
+    color: var(--color-content-neutral-primary);
+    text-align: center;
+    font-size: var(--text-font-size-md);
+    line-height: var(--text-line-height-md);
+    font-style: normal;
+    font-weight: 700;
+    height: var(--cell-size);
+    width: var(--cell-size);
+  }
+
+  td[role="gridcell"] {
+    width: var(--cell-size);
+    height: var(--cell-size);
+    padding: 0 4px;
+    border-top: 8px solid #fff;
+    border-bottom: 8px solid #fff;
+
+    & > div[role="button"] {
+      width: var(--inner-cell-size);
+      height: var(--inner-cell-size);
+    }
+  }
+
+  &[data-mode="range"] {
+    td[role="gridcell"][aria-selected="true"]:not(
+        :has([data-selection-start="true"])
+      ) {
+      background-color: var(--color-content-action-action-lighter);
+      color: var(--color-content-action-action-darker);
+    }
+
+    td[role="gridcell"]:has(
+        [data-selection-start="true"]:not([data-selection-end="true"])
+      ) {
+      background: linear-gradient(
+        -90deg,
+        var(--color-content-action-action-lighter) 0%,
+        var(--color-content-action-action-lighter) 50%,
+        rgba(255, 255, 255, 1) 50%,
+        rgba(255, 255, 255, 1) 100%
+      );
+    }
+
+    td[role="gridcell"]:has(
+        [data-selection-end="true"]:not([data-selection-start="true"])
+      ) {
+      background: linear-gradient(
+        90deg,
+        var(--color-content-action-action-lighter) 0%,
+        var(--color-content-action-action-lighter) 50%,
+        rgba(255, 255, 255, 1) 50%,
+        rgba(255, 255, 255, 1) 100%
+      );
+    }
+  }
+`, d = t.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-xs);
+`, f = t(a)`
+  margin: 0;
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  color: var(--color-content-neutral-secondary);
+  font-weight: 700;
+  text-align: center;
+  font-style: normal;
+`, p = t(r)`
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  font-weight: 400;
+  cursor: pointer;
+  outline: none;
+  background-color: var(--color-content-neutral-primary-reversed);
+
+  &[data-focused="true"] {
+    outline: 1px solid var(--color-content-action-action);
+    outline-offset: -1px;
+  }
+
+  &[data-hovered="true"] {
+    background-color: var(--color-content-action-action-lighter);
+  }
+
+  &[data-selected="true"],
+  &[data-multiple-selected="true"] {
+    background-color: var(--color-content-action-action);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-disabled="true"] {
+    color: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+  }
+
+  &:not([data-disabled="true"])[data-unavailable="true"] {
+    cursor: not-allowed;
+    text-decoration: line-through;
+    color: var(--color-content-message-negative);
+  }
+
+  &[data-mode="range"] {
+    &[data-selected="true"]:not([data-selection-start="true"]):not(
+        [data-selection-end="true"]
+      ) {
+      background-color: transparent;
+      color: var(--color-content-action-action);
+    }
+  }
+`;
+//#endregion
+export { l as Calendar, p as CalendarCell, u as CalendarGrid, d as Header, f as Heading, c as RangeCalendar, s as baseCalendarStyles };

package/dist/components/Card/Card.js

@@ -0,0 +1,16 @@
+"use client";
+import { Root as e } from "./Card.styled.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/components/Card/Card.tsx
+function n({ children: n, size: r = "md", radius: i = "full", ...a }) {
+	return /* @__PURE__ */ t(e, {
+		"data-design-system-component": "Card",
+		"data-size": r === "no-padding" ? void 0 : r,
+		"data-radius": i,
+		...a,
+		children: n
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/Card/Card.styled.js

@@ -0,0 +1,35 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Card/Card.styled.ts
+var t = e.div`
+  background: var(--color-background-neutral-overground);
+  box-shadow: var(--shadow-light);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &[data-size="sm"] {
+    padding: var(--spacing-sm);
+  }
+
+  &[data-size="md"] {
+    padding: var(--spacing-md);
+  }
+
+  &[data-size="lg"] {
+    padding: var(--spacing-lg);
+  }
+
+  &[data-radius="minimal"] {
+    border-radius: var(--radius-minimal);
+  }
+
+  &[data-radius="rounded"] {
+    border-radius: var(--radius-rounded);
+  }
+
+  &[data-radius="full"] {
+    border-radius: var(--radius-full);
+  }
+`;
+//#endregion
+export { t as Root };

package/dist/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,21 @@
+"use client";
+import e from "../../internal-components/ChartIcon/ChartIcon.js";
+import { CoreButton as t, NoInteraction as n } from "./ChartLegend.styled.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/components/ChartLegend/ChartLegend.tsx
+function o({ text: o, chartColor: s, onClick: c, isSelected: l, icon: u = "circle", customIcon: d, circleOutlineColor: f, ...p }) {
+	let m = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(e, {
+		color: s,
+		icon: u,
+		customIcon: d,
+		outlineColor: f
+	}), o] });
+	return c ? /* @__PURE__ */ i(t, {
+		...p,
+		onPress: c,
+		"data-selected": l,
+		children: m
+	}) : /* @__PURE__ */ i(n, { children: m });
+}
+//#endregion
+export { o as default };

package/dist/components/ChartLegend/ChartLegend.styled.js

@@ -0,0 +1,77 @@
+import { css as e, styled as t } from "styled-components";
+import { Button as n } from "react-aria-components";
+//#region packages/components/ChartLegend/ChartLegend.styled.ts
+var r = e`
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  text-decoration: none;
+  font-style: normal;
+  font-weight: 400;
+  color: var(--color-content-neutral-secondary);
+  text-align: center;
+  white-space: nowrap;
+  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs)
+    var(--spacing-xxs);
+  border-radius: var(--radius-minimal);
+  font-size: var(--text-font-size-xs);
+  line-height: var(--text-line-height-xs);
+`, i = t.div`
+  ${r}
+`, a = t(n)`
+  ${r}
+
+  // 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(--color-content-neutral-primary) solid 1px;
+  outline-offset: -1px;
+  background: var(--color-background-neutral-ground);
+  color: var(--color-content-neutral-primary);
+  cursor: pointer;
+
+  &[data-hovered="true"],
+  &[data-force-hovered="true"] {
+    background: var(--color-content-action-action-lighter);
+  }
+
+  &[data-selected="true"],
+  &[data-force-selected="true"] {
+    background: var(--color-content-neutral-primary);
+    color: var(--color-background-neutral-ground);
+
+    &[data-hovered="true"],
+    &[data-force-hovered="true"] {
+      background-color: color-mix(
+        in srgb,
+        var(--color-content-neutral-primary) 90%,
+        transparent
+      );
+    }
+  }
+
+  // Manage pressed state
+  &[data-pressed="true"],
+  &[data-force-pressed="true"] {
+    transform: scale(0.96);
+  }
+
+  // Manage keyboard focus state
+  &[data-focus-visible="true"],
+  &[data-force-focus-visible="true"] {
+    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 */
+  &[data-focused="true"],
+  &[data-force-focused="true"] {
+    outline: var(--color-content-neutral-primary) solid 1px;
+  }
+`;
+//#endregion
+export { a as CoreButton, i as NoInteraction, r as coreLegendStyles };

package/dist/components/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,32 @@
+import e from "../../internal-components/ChartIcon/ChartIcon.js";
+import { Body as t, BodyContent as n, BodyTitle as r, Description as i, Header as a, ItemLabel as o, LegendItem as s, LegendList as c, Separator as l, Title as u, TooltipContainer as d } from "./ChartTooltip.styled.js";
+import "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region packages/components/ChartTooltip/ChartTooltip.tsx
+function m({ title: m, items: h, description: g, bodyTitle: _, bodyContent: v, footerSlot: y, ...b }) {
+	let x = !!m || !!h?.length || !!g, S = !!_ || !!v;
+	return /* @__PURE__ */ p(d, {
+		role: "tooltip",
+		...b,
+		children: [
+			x && /* @__PURE__ */ p(a, { children: [
+				m && /* @__PURE__ */ f(u, { children: m }),
+				!!h?.length && /* @__PURE__ */ f(c, { children: h.map((t, n) => /* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(e, {
+					color: t.color,
+					icon: t.icon,
+					customIcon: t.customIcon,
+					outlineColor: t.outlineColor
+				}), /* @__PURE__ */ f(o, { children: t.text })] }, n)) }),
+				g && /* @__PURE__ */ f(i, { children: g })
+			] }),
+			S && /* @__PURE__ */ p(t, { children: [
+				x && /* @__PURE__ */ f(l, {}),
+				_ && /* @__PURE__ */ f(r, { children: _ }),
+				v && /* @__PURE__ */ f(n, { children: v })
+			] }),
+			y
+		]
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/ChartTooltip/ChartTooltip.styled.js

@@ -0,0 +1,57 @@
+import { styled as e } from "styled-components";
+//#region packages/components/ChartTooltip/ChartTooltip.styled.ts
+var t = e.div`
+  display: flex;
+  padding: var(--spacing-xs);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xxs);
+  border-radius: var(--radius-rounded);
+  background: var(--color-background-neutral-overground);
+
+  box-shadow: var(--shadow-medium);
+
+  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);
+`, n = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+`, r = e.h3`
+  margin: 0;
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-md);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--text-line-height-md); /* 150% */
+  white-space: pre-line;
+`, i = e.div``, a = e.div`
+  display: flex;
+  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs)
+    var(--spacing-xxs);
+  align-items: center;
+  gap: var(--spacing-xs);
+  align-self: stretch;
+
+  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);
+`, o = e.div``, s = e.div``, c = e.hr`
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--color-content-neutral-stroke);
+  background: none;
+`, l = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+`, u = e(r)``, d = e.div``;
+//#endregion
+export { l as Body, d as BodyContent, u as BodyTitle, s as Description, n as Header, o as ItemLabel, a as LegendItem, i as LegendList, c as Separator, r as Title, t as TooltipContainer };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,50 @@
+"use client";
+import { OutlineWrapper as e, RootCheckbox as t, SvgCheckWrapper as n } from "./Checkbox.styled.js";
+import r, { useImperativeHandle as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region packages/components/Checkbox/Checkbox.tsx
+var c = r.forwardRef(({ label: r, hideLabel: c, disabled: l, defaultSelected: u, isIndeterminate: d, isSelected: f, onChange: p, readOnly: m, value: h, required: g, ..._ }, v) => {
+	let y = a(null);
+	return i(v, () => y.current, []), /* @__PURE__ */ o(t, {
+		..._,
+		inputRef: y,
+		"aria-label": c ? r : void 0,
+		isDisabled: l,
+		defaultSelected: u,
+		isIndeterminate: d,
+		isSelected: f,
+		onChange: p,
+		isReadOnly: m,
+		value: h,
+		isRequired: g,
+		"data-hide-label": c,
+		"data-design-system-component": "Checkbox",
+		children: /* @__PURE__ */ s(e, { children: [/* @__PURE__ */ o(n, {
+			"data-hide-label": c,
+			children: /* @__PURE__ */ s("svg", {
+				width: "16",
+				height: "17",
+				viewBox: "0 0 16 17",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: [
+					/* @__PURE__ */ o("path", {
+						className: "checkbox-svg-square",
+						d: "M0.5 2.0437C0.5 1.21527 1.17157 0.543701 2 0.543701H14C14.8284 0.543701 15.5 1.21527 15.5 2.0437V14.0437C15.5 14.8721 14.8284 15.5437 14 15.5437H2C1.17157 15.5437 0.5 14.8721 0.5 14.0437V2.0437Z"
+					}),
+					/* @__PURE__ */ o("path", {
+						className: "checkbox-svg-checkmark",
+						d: "M5.86331 10.6271L3.54998 8.31372C3.28998 8.05372 2.86998 8.05372 2.60998 8.31372C2.34998 8.57372 2.34998 8.99372 2.60998 9.25372L5.39665 12.0404C5.65665 12.3004 6.07664 12.3004 6.33664 12.0404L13.39 4.98705C13.65 4.72705 13.65 4.30705 13.39 4.04705C13.13 3.78705 12.71 3.78705 12.45 4.04705L5.86331 10.6271Z"
+					}),
+					/* @__PURE__ */ o("path", {
+						className: "checkbox-svg-indeterminate",
+						d: "M4.66667 7.37701H11.3333C11.7 7.37701 12 7.67701 12 8.04368C12 8.41035 11.7 8.71035 11.3333 8.71035H4.66667C4.3 8.71035 4 8.41035 4 8.04368C4 7.67701 4.3 7.37701 4.66667 7.37701Z",
+						fill: "white"
+					})
+				]
+			})
+		}), c ? "" : r] })
+	});
+});
+//#endregion
+export { c as default };

package/dist/components/Checkbox/Checkbox.styled.js

@@ -0,0 +1,111 @@
+import { styled as e } from "styled-components";
+import { Checkbox as t } from "react-aria-components";
+//#region packages/components/Checkbox/Checkbox.styled.ts
+var n = e.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: var(--spacing-xs);
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-line-height-md);
+  font-style: normal;
+  font-weight: 400;
+`, r = e(t)`
+  position: relative;
+  display: inline-block;
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)
+    var(--spacing-xxs);
+  cursor: pointer;
+
+  &[data-hide-label="true"] {
+    padding: var(--spacing-xxs);
+  }
+
+  .checkbox-svg-square {
+    fill: var(--color-content-neutral-primary-reversed);
+    stroke: var(--color-content-action-action);
+  }
+  .checkbox-svg-checkmark {
+    fill: var(--color-content-neutral-primary-reversed);
+    visibility: hidden;
+  }
+  .checkbox-svg-indeterminate {
+    fill: var(--color-content-neutral-primary-reversed);
+    visibility: hidden;
+  }
+
+  &[data-readonly] {
+    cursor: default;
+  }
+
+  &[data-selected] {
+    .checkbox-svg-square {
+      fill: var(--color-content-action-action);
+    }
+
+    .checkbox-svg-checkmark {
+      visibility: visible;
+    }
+  }
+
+  &[data-indeterminate] {
+    .checkbox-svg-square {
+      fill: var(--color-content-action-action);
+    }
+
+    .checkbox-svg-checkmark {
+      visibility: hidden;
+    }
+
+    .checkbox-svg-indeterminate {
+      visibility: visible;
+    }
+  }
+
+  &[data-force-focus]
+    > ${n}::before,
+    &[data-focus-visible]
+    > ${n}::before {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    right: -8px;
+    border: 2px solid var(--color-background-highlight-focus);
+    border-radius: var(--radius-full);
+  }
+
+  &[data-hide-label="true"] > ${n}::before {
+    inset: -4px;
+    bottom: -3px;
+    border-radius: 6px;
+  }
+
+  &[data-disabled] {
+    color: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+
+    .checkbox-svg-square {
+      fill: var(--color-content-neutral-tertiary);
+      stroke: var(--color-content-neutral-tertiary);
+    }
+
+    .checkbox-svg-checkmark {
+      visibility: hidden;
+    }
+  }
+`, i = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+
+  &[data-hide-label="true"] {
+    width: calc(20px - var(--spacing-xxs));
+    height: calc(20px - var(--spacing-xxs));
+  }
+`;
+//#endregion
+export { n as OutlineWrapper, r as RootCheckbox, i as SvgCheckWrapper };

package/dist/components/CheckboxGroup/CheckboxGroup.js

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

package/dist/components/Chip/Chip.js

@@ -0,0 +1,26 @@
+import e from "../../internal/usetranslations/usetranslations.js";
+import { CloseButton as t, CoreChip as n, IconWrapper as r } from "./Chip.styled.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/components/Chip/Chip.tsx
+var o = ({ value: o, size: c = "medium", onClose: l }) => {
+	let u = e(s);
+	return /* @__PURE__ */ a(n, {
+		"data-size": c,
+		"data-close": !!l,
+		children: [/* @__PURE__ */ i("span", { children: o }), l && /* @__PURE__ */ i(t, {
+			type: "button",
+			onClick: l,
+			"aria-label": `${u.close} ${o}`,
+			children: /* @__PURE__ */ i(r, {
+				name: "close",
+				"data-size": c
+			})
+		})]
+	});
+}, s = {
+	en: { close: "Close" },
+	fr: { close: "Fermer" }
+};
+//#endregion
+export { o as default };

package/dist/components/Chip/Chip.styled.js

@@ -0,0 +1,49 @@
+import e from "../Icon/Icon.js";
+import { styled as t } from "styled-components";
+//#region packages/components/Chip/Chip.styled.ts
+var n = t.span`
+  align-items: center;
+  background-color: var(--color-content-neutral-secondary);
+  border-radius: var(--spacing-xxs);
+  color: var(--color-content-neutral-primary-reversed);
+  display: inline-flex;
+  font-weight: 700;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+
+  &[data-close="true"] {
+    padding-right: var(--spacing-xxs);
+  }
+
+  &[data-size="small"] {
+    font-size: var(--text-font-size-xs);
+    line-height: var(--text-line-height-xs);
+  }
+
+  &[data-size="medium"] {
+    font-size: var(--text-font-size-sm);
+    line-height: var(--text-line-height-sm);
+  }
+`, r = t.button`
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-background-highlight-focus);
+    border-radius: var(--radius-rounded);
+  }
+`, i = t(e)`
+  color: var(--color-content-neutral-primary-reversed);
+
+  &[data-size="small"] {
+    width: var(--text-font-size-md);
+  }
+
+  &[data-size="medium"] {
+    width: var(--text-font-size-xl);
+  }
+`;
+//#endregion
+export { r as CloseButton, n as CoreChip, i as IconWrapper };