@agregio-solutions/design-system 2.3.0 → 2.3.1

package/dist/components/Select/Select.styled.js

@@ -0,0 +1,102 @@
+import e from "../Icon/Icon.js";
+import { baseDropdownStyles as t } from "../Dropdown/Dropdown.styled.js";
+import { styled as n } from "styled-components";
+import { Button as r, ListBox as i, Popover as a, Select as o, SelectValue as s } from "react-aria-components";
+//#region packages/components/Select/Select.styled.ts
+var c = n(o)`
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, l = n(r)`
+  position: relative;
+  display: inline-flex;
+  justify-content: space-between;
+  min-width: 120px;
+  align-items: center;
+  column-gap: var(--spacing-xxs);
+  border: none;
+  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);
+  cursor: pointer;
+  appearance: none;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+    min-width: auto;
+  }
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-content-neutral-stroke);
+  }
+
+  &[data-state="open"]::before,
+  &:focus::before,
+  &[data-force-focus]::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    bottom: -2px;
+    left: -2px;
+    outline: 2px solid var(--color-background-highlight-focus);
+    border-radius: var(--radius-rounded);
+  }
+
+  & span[data-placeholder] {
+    color: var(--color-content-neutral-tertiary);
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    background: var(--color-content-neutral-tertiary);
+    color: var(--color-content-neutral-secondary);
+    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);
+  }
+`, u = s, d = n(e)`
+  flex: none;
+  font-size: var(--text-font-size-xl);
+  color: var(--color-content-neutral-tertiary);
+
+  &[data-disabled="true"] {
+    color: var(--color-content-neutral-secondary);
+  }
+`, f = a, p = n(i)`
+  ${t};
+  z-index: var(--z-index-dropdown);
+  outline: none;
+  width: var(--trigger-width);
+`, m = n.span`
+  display: flex;
+  align-items: center;
+  column-gap: var(--spacing-xs);
+`, h = n.div`
+  display: flex;
+  align-items: center;
+  column-gap: var(--spacing-xs);
+`;
+//#endregion
+export { d as ArrowIcon, l as Button, p as ListBox, m as MultipleSelectValue, f as Popover, c as RootSelect, u as SelectValue, h as TriggerContentRight };

package/dist/components/SelectItem/SelectItem.js

@@ -0,0 +1,34 @@
+"use client";
+import e from "../Dropdown/components/DropdownListItem/DropdownListItem.js";
+import { ListBoxItem as t } from "react-aria-components";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/SelectItem/SelectItem.tsx
+function r({ text: r, id: i, iconRight: a, iconLeft: o, isSelected: s, href: c, target: l, routerOptions: u, className: d, selectionMode: f, ...p }) {
+	return /* @__PURE__ */ n(t, {
+		...p,
+		textValue: r,
+		id: i,
+		style: {
+			outline: "none",
+			textDecoration: "none"
+		},
+		href: c,
+		target: l,
+		routerOptions: u,
+		className: d,
+		children: (t) => /* @__PURE__ */ n(e, {
+			text: r,
+			disabled: t.isDisabled,
+			selected: s ?? t.isSelected,
+			"data-hovered": t.isHovered,
+			"data-pressed": t.isPressed,
+			"data-focused": t.isFocused,
+			"data-focus-visible": t.isFocusVisible,
+			iconLeft: o,
+			iconRight: a,
+			isMultipleSelection: f === "multiple" || t.selectionMode === "multiple"
+		})
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,21 @@
+import { SkeletonStyled as e } from "./Skeleton.styled.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/components/Skeleton/Skeleton.tsx
+function n({ variant: n = "text", color: r = "neutral", width: i, height: a, style: o, className: s, ...c }) {
+	return /* @__PURE__ */ t(e, {
+		...c,
+		"data-variant": n,
+		"data-color": r,
+		className: s,
+		"aria-hidden": "true",
+		style: {
+			width: i || o?.width,
+			height: a || o?.height,
+			...o
+		},
+		children: "\xA0"
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/Skeleton/Skeleton.styled.js

@@ -0,0 +1,42 @@
+import { keyframes as e, styled as t } from "styled-components";
+//#region packages/components/Skeleton/Skeleton.styled.ts
+var n = e`
+0% { opacity:1; }
+50% { opacity:0.4; }
+100% { opacity:1; }
+`, r = t.span`
+  display: block;
+  background-color: var(--color-content-neutral-stroke);
+  height: 1.2em;
+  margin: 0;
+  border-radius: var(--radius-rounded);
+  animation-duration: 2s;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0.5s;
+  animation-iteration-count: infinite;
+  animation-name: ${n};
+
+  &[data-variant="text"] {
+    transform-origin: 0 55%;
+    transform: scale(1, 0.6);
+  }
+
+  &[data-variant="rectangular"] {
+    border-radius: 0;
+  }
+
+  &[data-variant="circular"] {
+    border-radius: 50%;
+    transform: none;
+  }
+
+  &[data-color="white"] {
+    background-color: var(--color-content-neutral-primary-reversed);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+//#endregion
+export { r as SkeletonStyled };

package/dist/components/Slider/Slider.js

@@ -0,0 +1,118 @@
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import n from "../TextInput/TextInput.js";
+import { InputAndTrackWrapper as r, MinMax as i, SliderStyled as a, SliderThumbStyled as o, SliderTrackDot as s, SliderTrackDots as c, SliderTrackStyled as l } from "./Slider.styled.js";
+import { useEffect as u, useId as d, useMemo as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/components/Slider/Slider.tsx
+function g({ id: g, label: v, minValue: y = 0, maxValue: b = 100, step: x = 1, isDisabled: S, style: C, className: w, onChange: T, onChangeEnd: E, value: D, thumbLabels: O, labelIconRight: te, labelIconRightTooltip: ne, helperText: re, helperTextIcon: k, errorHelperText: A, errorHelperTextIcon: j, successHelperText: M, successHelperTextIcon: N, isInvalid: P, withTrackDots: F = !1, ...I }) {
+	let [L, R] = p(D), z = d(), B = g ?? z, V = I["aria-label"] ?? String(v), H = e(ee), U = L.length > 1, [W, G] = p(L[0]), [K, q] = p(L[1]), J = {
+		htmlForId: g,
+		label: v,
+		labelIconRight: te,
+		labelIconRightTooltip: ne,
+		helperTextIcon: k,
+		helperText: re,
+		errorHelperText: A,
+		errorHelperTextIcon: j,
+		successHelperText: M,
+		successHelperTextIcon: N
+	};
+	u(() => R(D), [D]), u(() => {
+		G(L[0]), q(L[1]);
+	}, [L]);
+	let Y = (e) => {
+		R(e), T?.(e);
+	}, X = (e) => {
+		R(e), T?.(e), E?.(e);
+	}, Z = f(() => {
+		let e = [];
+		for (let t = y; t <= b; t += x) e.push(t);
+		return e;
+	}, [
+		y,
+		b,
+		x
+	]), ie = f(() => !!(!Z.includes(W) || U && K < W), [
+		W,
+		Z,
+		U,
+		K
+	]), ae = f(() => !!(!Z.includes(K) || U && K < W), [
+		K,
+		Z,
+		U,
+		W
+	]), Q = (e, t) => {
+		let n = parseInt(e.target.value || "0");
+		isNaN(n) || (t === "first" ? G(n) : q(n)), Z.includes(n) && (t === "first" && n > K || t === "second" && n < W || (t === "first" && X(U ? [n, K] : [n]), t === "second" && X([W, n])));
+	}, $ = /* @__PURE__ */ m(n, {
+		"aria-label": `${H.valueForInput} ${O?.[0]}`,
+		value: W,
+		onChange: (e) => Q(e, "first"),
+		nature: ie ? "negative" : "default",
+		disabled: S,
+		style: {
+			width: 64,
+			minWidth: 64
+		}
+	}), oe = /* @__PURE__ */ m(n, {
+		"aria-label": `${H.valueForInput} ${O?.[1]}`,
+		value: K,
+		onChange: (e) => Q(e, "second"),
+		nature: ae ? "negative" : "default",
+		disabled: S,
+		style: {
+			width: 64,
+			minWidth: 64
+		}
+	});
+	return /* @__PURE__ */ m(a, {
+		id: B,
+		isDisabled: S,
+		minValue: y,
+		maxValue: b,
+		step: x,
+		style: C,
+		className: w,
+		onChange: (e) => {
+			Y(Array.isArray(e) ? e : [e]);
+		},
+		onChangeEnd: (e) => {
+			X(Array.isArray(e) ? e : [e]);
+		},
+		value: L,
+		"aria-label": V,
+		children: ({ state: e }) => /* @__PURE__ */ m(t, {
+			...J,
+			children: /* @__PURE__ */ h(r, { children: [
+				U && $,
+				/* @__PURE__ */ m(i, { children: y }),
+				/* @__PURE__ */ h(l, {
+					"data-invalid": P?.(e.values) || !1,
+					"data-range-mode": U,
+					style: {
+						"--thumb-1-percent": e.getThumbPercent(0) * 100 + "%",
+						"--thumb-2-percent": e.getThumbPercent(1) * 100 + "%"
+					},
+					children: [F && /* @__PURE__ */ m(c, {
+						"data-disabled": S,
+						children: Z.map((t) => /* @__PURE__ */ m(s, { "data-active": _(t, e.values[0], e.values[1]) }, t))
+					}), e.values.map((t, n) => /* @__PURE__ */ m(o, {
+						index: n,
+						"aria-label": O?.[n],
+						"data-invalid": P?.(e.values) || !1
+					}, n))]
+				}),
+				/* @__PURE__ */ m(i, { children: b }),
+				U ? oe : $
+			] })
+		})
+	});
+}
+var ee = {
+	en: { valueForInput: "Value for" },
+	fr: { valueForInput: "Valeur pour" }
+}, _ = (e, t, n) => n == null ? e < t : e > t && e < n;
+//#endregion
+export { g as default };

package/dist/components/Slider/Slider.styled.js

@@ -0,0 +1,125 @@
+import { styled as e } from "styled-components";
+import { Slider as t, SliderThumb as n, SliderTrack as r } from "react-aria-components";
+//#region packages/components/Slider/Slider.styled.ts
+var i = e(t)`
+  flex-direction: column;
+  width: 100%;
+`, a = e.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+`, o = e.div`
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+`, s = e(r)`
+  position: relative;
+  display: flex;
+  width: 100%;
+
+  --primary-color: var(--color-content-action-action);
+
+  &[data-invalid="true"] {
+    --primary-color: var(--color-content-message-negative);
+  }
+
+  &[data-disabled="true"] {
+    --primary-color: var(--color-content-neutral-tertiary);
+  }
+
+  /* track line */
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 3px;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: var(--radius-minimal);
+    background: var(--color-content-action-action-lighter);
+    cursor: pointer;
+  }
+
+  /* fill line */
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 3px;
+    width: var(--thumb-1-percent);
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: var(--radius-minimal);
+    background: var(--primary-color);
+    cursor: pointer;
+  }
+
+  /* fill line for range mode */
+  &[data-range-mode="true"]:after {
+    width: auto;
+    left: var(--thumb-1-percent);
+    right: calc(100% - var(--thumb-2-percent));
+  }
+
+  &[data-disabled="true"]:after,
+  &[data-disabled="true"]:before {
+    cursor: not-allowed;
+  }
+`, c = e(n)`
+  z-index: 3;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  outline: 1px solid var(--color-background-neutral-ground);
+  forced-color-adjust: none;
+  cursor: grab;
+  transition:
+    width 0.1s ease-in-out,
+    height 0.1s ease-in-out;
+
+  &[data-focus-visible]:not([data-disabled="true"]),
+  &[data-hovered]:not([data-disabled="true"]) {
+    width: 22px;
+    height: 22px;
+  }
+
+  &[data-dragging]:not([data-disabled="true"]) {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-background-neutral-ground);
+    outline: 1px solid var(--primary-color);
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+  }
+`, l = e.div`
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  cursor: pointer;
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+  }
+`, u = e.div`
+  width: 2px;
+  height: 2px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--color-background-neutral-ground-reversed);
+
+  &[data-active="true"] {
+    background: var(--color-background-neutral-ground);
+  }
+`;
+//#endregion
+export { a as InputAndTrackWrapper, o as MinMax, i as SliderStyled, c as SliderThumbStyled, u as SliderTrackDot, l as SliderTrackDots, s as SliderTrackStyled };

package/dist/components/Stepper/Step/Step.js

@@ -0,0 +1,65 @@
+import { useStepperContext as e } from "../utils/stepperContext.js";
+import { Content as t, Description as n, IndicatorCircle as r, IndicatorContainer as i, IndicatorIcon as a, IndicatorNeutral as o, Line as s, Root as c, Title as l } from "./Step.styled.js";
+import "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region packages/components/Stepper/Step/Step.tsx
+function f({ title: a, description: o, children: f, nature: m = "default", indicator: h, href: g, onClick: _, isCompleted: v, isActive: y, isDisabled: b, className: x, ...S }) {
+	let C = !y && (!!g || !!_), { orientation: w } = e();
+	return /* @__PURE__ */ d(c, {
+		"data-nature": m,
+		"data-orientation": w,
+		className: "DS-Step " + x || "",
+		...S,
+		children: [/* @__PURE__ */ d(i, {
+			"data-orientation": w,
+			children: [/* @__PURE__ */ u(r, {
+				"data-is-completed": v,
+				"data-is-active": y,
+				"data-is-disabled": b,
+				"data-primary-color": m !== "default",
+				children: /* @__PURE__ */ u(p, {
+					indicator: h,
+					nature: m,
+					isCompleted: v,
+					isActive: y
+				})
+			}), /* @__PURE__ */ u(s, {
+				"data-is-completed": v,
+				"data-orientation": w,
+				className: "DS-Step-Line"
+			})]
+		}), /* @__PURE__ */ d(t, {
+			"data-orientation": w,
+			children: [
+				/* @__PURE__ */ u(l, {
+					as: C ? void 0 : "div",
+					href: y ? void 0 : g,
+					onClick: y ? void 0 : _,
+					"data-is-disabled": b,
+					isDisabled: b,
+					"data-has-link-or-action": C,
+					tabIndex: C ? void 0 : -1,
+					children: a
+				}),
+				/* @__PURE__ */ u(n, {
+					"data-is-disabled": b,
+					children: o
+				}),
+				f
+			]
+		})]
+	});
+}
+var p = (e) => {
+	let { indicator: t, nature: n, isCompleted: r, isActive: i } = e;
+	if (typeof t == "number") return t;
+	if (t) return /* @__PURE__ */ u(a, { name: t });
+	switch (n) {
+		case "default": return i || r ? /* @__PURE__ */ u(a, { name: "check" }) : /* @__PURE__ */ u(o, { name: "record_full" });
+		case "warning": return /* @__PURE__ */ u(a, { name: "error_outline" });
+		case "negative": return /* @__PURE__ */ u(a, { name: "close" });
+		case "positive": return /* @__PURE__ */ u(a, { name: "check" });
+	}
+};
+//#endregion
+export { f as default };

package/dist/components/Stepper/Step/Step.styled.js

@@ -0,0 +1,167 @@
+import e from "../../Icon/Icon.js";
+import { styled as t } from "styled-components";
+import { Link as n } from "react-aria-components";
+//#region packages/components/Stepper/Step/Step.styled.ts
+var r = t.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+
+  &[data-orientation="vertical"] {
+    flex-direction: row;
+  }
+
+  --primary-color: var(--color-content-action-action);
+
+  &[data-nature="warning"] {
+    --primary-color: var(--color-content-message-warning);
+  }
+
+  &[data-nature="negative"] {
+    --primary-color: var(--color-content-message-negative);
+  }
+
+  &[data-nature="positive"] {
+    --primary-color: var(--color-content-message-positive);
+  }
+`, i = t.div`
+  padding-right: var(--spacing-sm);
+
+  &[data-orientation="vertical"] {
+    padding-right: 0;
+    padding-bottom: var(--spacing-sm);
+  }
+`, a = t(n)`
+  margin: 0;
+  text-decoration: none;
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-md);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--text-line-height-md);
+
+  &[data-has-link-or-action="true"]:not([data-is-disabled="true"]) {
+    cursor: pointer;
+
+    &[data-hovered="true"] {
+      color: var(--color-content-action-action);
+      text-decoration: underline;
+    }
+
+    &[data-focus-visible="true"],
+    &:focus-visible {
+      color: var(--color-content-action-action);
+      outline: none;
+      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-is-disabled="true"] {
+    color: var(--color-content-neutral-tertiary);
+    cursor: not-allowed;
+  }
+`, o = t.div`
+  margin: 0;
+  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);
+
+  &[data-is-disabled="true"] {
+    color: var(--color-content-neutral-tertiary);
+  }
+`, s = t.div`
+  display: flex;
+  align-items: center;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+`, c = t.div`
+  position: relative;
+  z-index: 1;
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  border: var(--stroke-default, 1px) solid
+    var(--color-content-neutral-secondary);
+  background: var(--color-background-neutral-ground);
+  color: var(--color-content-neutral-secondary);
+  text-align: center;
+  font-size: var(--text-font-size-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-sm);
+
+  &[data-primary-color="true"] {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+  }
+
+  &[data-is-completed="true"],
+  &[data-is-active="true"] {
+    border-color: var(--primary-color);
+    background: var(--primary-color);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-is-active="true"] {
+    box-shadow:
+      0 0 0 2px var(--color-content-neutral-primary-reversed),
+      0 0 0 4px var(--primary-color);
+  }
+
+  &[data-is-disabled="true"] {
+    border-color: var(--color-content-neutral-tertiary);
+    color: var(--color-content-neutral-tertiary);
+  }
+`, l = t(e)`
+  font-size: 16px;
+`, u = t(l)`
+  color: var(--color-content-neutral-tertiary);
+`, d = t.div`
+  width: 100%;
+  height: 1px;
+  background: var(--color-content-neutral-secondary);
+
+  &[data-orientation="vertical"] {
+    width: 1px;
+    height: 100%;
+  }
+
+  &[data-is-completed="true"] {
+    background: var(--primary-color);
+    height: 2px;
+
+    &[data-orientation="vertical"] {
+      height: 100%;
+      width: 2px;
+    }
+  }
+`;
+t.div`
+  display: flex;
+  padding: var(--spacing-xxs);
+  align-items: center;
+  gap: var(--spacing-xs);
+  align-self: stretch;
+  border: var(--stroke-default, 1px) solid
+    var(--color-content-message-warning-darker);
+  background: var(--color-content-message-warning-lighter);
+  color: var(--color-content-message-warning-darker, #bb5002);
+  font-size: var(--text-font-size-xs);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-xs);
+`;
+//#endregion
+export { i as Content, o as Description, c as IndicatorCircle, s as IndicatorContainer, l as IndicatorIcon, u as IndicatorNeutral, d as Line, r as Root, a as Title };

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,17 @@
+import { Root as e } from "./Stepper.styled.js";
+import { StepperProvider as t } from "./utils/stepperContext.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/Stepper/Stepper.tsx
+function r({ children: r, orientation: i, ...a }) {
+	return /* @__PURE__ */ n(t, {
+		orientation: i,
+		children: /* @__PURE__ */ n(e, {
+			"data-orientation": i,
+			...a,
+			children: r
+		})
+	});
+}
+//#endregion
+export { r as default };