@agregio-solutions/design-system 2.3.0 → 2.3.1

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

@@ -0,0 +1,19 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Stepper/Stepper.styled.ts
+var t = e.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .DS-Step:last-child {
+    .DS-Step-Line {
+      display: none;
+    }
+  }
+`;
+//#endregion
+export { t as Root };

package/dist/components/Stepper/utils/stepperContext.js

@@ -0,0 +1,9 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region packages/components/Stepper/utils/stepperContext.tsx
+var r = e({ orientation: "horizontal" }), i = () => t(r), a = ({ children: e, orientation: t }) => /* @__PURE__ */ n(r.Provider, {
+	value: { orientation: t },
+	children: e
+});
+//#endregion
+export { r as StepperContext, a as StepperProvider, i as useStepperContext };

package/dist/components/Switch/Switch.js

@@ -0,0 +1,24 @@
+"use client";
+import { CheckIcon as e, Handle as t, Indicator as n, Switch as r } from "./Switch.styled.js";
+import i, { useImperativeHandle as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/components/Switch/Switch.tsx
+var l = i.forwardRef(({ label: i, size: l = "medium", labelPosition: u = "right", ...d }, f) => {
+	let p = o(null);
+	return a(f, () => p.current, []), /* @__PURE__ */ c(r, {
+		...d,
+		inputRef: p,
+		"data-size": l,
+		"data-has-label": !!i,
+		children: [
+			i && u === "left" && /* @__PURE__ */ s("span", { children: i }),
+			/* @__PURE__ */ s(n, {
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ s(t, { children: /* @__PURE__ */ s(e, { name: "check" }) })
+			}),
+			i && u === "right" && /* @__PURE__ */ s("span", { children: i })
+		]
+	});
+});
+//#endregion
+export { l as default };

package/dist/components/Switch/Switch.styled.js

@@ -0,0 +1,143 @@
+import e from "../Icon/Icon.js";
+import { styled as t } from "styled-components";
+import { Switch as n } from "react-aria-components";
+//#region packages/components/Switch/Switch.styled.ts
+var r = t(e)`
+  font-size: var(--text-font-size-md);
+`, i = t.div`
+  position: relative;
+  width: 40px;
+  height: 24px;
+  flex: none;
+  border-radius: 80px;
+  background: var(--color-content-neutral-primary-reversed);
+  outline: 2px solid var(--color-content-action-action);
+  outline-offset: -2px;
+  transition: all 0.3s linear;
+`, a = t.div`
+  position: absolute;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 80px;
+  border: 2px solid var(--color-content-action-action);
+  background: var(--color-content-neutral-primary-reversed);
+  transform: translate3d(0, 0, 0);
+  transition: all 0.2s linear;
+  color: var(--color-content-neutral-primary-reversed);
+`, o = t(n)`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  column-gap: var(--spacing-xs);
+  font-size: var(--text-font-size-md);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-md);
+  color: var(--color-content-neutral-secondary);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  &[data-has-label="true"][data-size="medium"] {
+    padding: var(--spacing-xs);
+  }
+
+  &[data-has-label="true"][data-size="large"] {
+    padding: var(--spacing-xxs) var(--spacing-xs);
+  }
+
+  &[data-size="large"] {
+    ${i} {
+      width: 48px;
+      height: 32px;
+    }
+
+    ${a} {
+      width: 32px;
+      height: 32px;
+    }
+
+    ${r} {
+      font-size: var(--text-font-size-xl);
+    }
+  }
+
+  &[data-selected] {
+    ${i} {
+      background-color: var(--color-content-action-action);
+    }
+
+    ${a} {
+      color: var(--color-content-neutral-primary);
+    }
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+
+    ${i} {
+      background: var(--color-content-neutral-tertiary);
+      outline-color: var(--color-content-neutral-tertiary);
+    }
+
+    ${a} {
+      border-color: var(--color-content-neutral-tertiary);
+    }
+  }
+
+  &[data-disabled][data-selected] {
+    ${a} {
+      color: var(--color-content-neutral-tertiary);
+    }
+  }
+
+  &[data-focus-visible],
+  &[data-force-focus-visible] {
+    ${i}::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 80px;
+      outline: 2px solid var(--color-background-highlight-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  /* Handle animation */
+  &[data-size="medium"],
+  &[data-size="large"] {
+    &[data-pressed] {
+      ${a} {
+        transform: translate3d(0, 0, 0);
+      }
+    }
+    &[data-selected] {
+      ${a} {
+        transform: translate3d(16px, 0, 0);
+      }
+    }
+    &[data-selected][data-pressed] {
+      ${a} {
+        transform: translate3d(12px, 0, 0);
+      }
+    }
+  }
+
+  &[data-size="medium"][data-pressed] {
+    ${a} {
+      width: 28px;
+    }
+  }
+
+  &[data-size="large"][data-pressed] {
+    ${a} {
+      width: 36px;
+    }
+  }
+  /* End - Handle animation */
+`;
+//#endregion
+export { r as CheckIcon, a as Handle, i as Indicator, o as Switch };

package/dist/components/Tabs/Tab/Tab.js

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

package/dist/components/Tabs/Tab/Tab.styled.js

@@ -0,0 +1,51 @@
+import e from "../../Badge/Badge.js";
+import { styled as t } from "styled-components";
+import { Tab as n } from "react-aria-components";
+//#region packages/components/Tabs/Tab/Tab.styled.ts
+var r = t.div`
+  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: 700;
+  white-space: nowrap;
+`, i = t(e)``, a = t(n)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: -1px;
+  column-gap: var(--spacing-xs);
+  padding: calc(var(--spacing-sm) - 1px);
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-decoration: none;
+  outline: none;
+
+  &[data-selected="true"] {
+    border-bottom-color: var(--color-content-action-action);
+
+    ${r} {
+      color: var(--color-content-action-action);
+    }
+  }
+
+  &[data-focus-visible="true"] {
+    border-color: var(--color-content-action-action);
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+
+    border-bottom-color: var(--color-content-neutral-stroke);
+
+    ${r} {
+      color: var(--color-content-neutral-stroke);
+    }
+
+    ${i} {
+      background-color: var(--color-background-neutral-underground-2);
+    }
+  }
+`;
+//#endregion
+export { a as AriaTab, i as Badge, r as Label };

package/dist/components/Tabs/TabList/TabList.js

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

package/dist/components/Tabs/TabList/TabList.styled.js

@@ -0,0 +1,13 @@
+import { styled as e } from "styled-components";
+import { TabList as t } from "react-aria-components";
+//#region packages/components/Tabs/TabList/TabList.styled.ts
+var n = e(t)`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-content-neutral-stroke);
+`, r = e.div`
+  overflow-x: auto;
+  width: 100%;
+`;
+//#endregion
+export { n as AriaTabList, r as TabListOverflowWrapper };

package/dist/components/Tabs/TabPanel/TabPanel.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/Tabs/TabPanel/TabPanel.tsx
+var r = e.forwardRef((e, r) => /* @__PURE__ */ n(t, {
+	ref: r,
+	...e
+}));
+//#endregion
+export { r as default };

package/dist/components/Tabs/Tabs/Tabs.js

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

package/dist/components/Tabs/Tabs/Tabs.styled.js

@@ -0,0 +1,6 @@
+import { styled as e } from "styled-components";
+import { Tabs as t } from "react-aria-components";
+//#region packages/components/Tabs/Tabs/Tabs.styled.ts
+var n = e(t)``;
+//#endregion
+export { n as AriaTabs };

package/dist/components/Tag/Tag.js

@@ -0,0 +1,16 @@
+"use client";
+import { Core as e, IconWrapper as t } from "./Tag.styled.js";
+import n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/components/Tag/Tag.tsx
+var a = n.forwardRef(({ children: n, nature: a = "default", mode: o = "default", iconLeft: s, ...c }, l) => /* @__PURE__ */ i(e, {
+	"data-design-system-component": "Tag",
+	"data-nature": a,
+	"data-mode": o,
+	"data-have-icon": !!s,
+	ref: l,
+	...c,
+	children: [!!s && /* @__PURE__ */ r(t, { name: s }), n]
+}));
+//#endregion
+export { a as default };

package/dist/components/Tag/Tag.styled.js

@@ -0,0 +1,169 @@
+import e from "../Icon/Icon.js";
+import { styled as t } from "styled-components";
+//#region packages/components/Tag/Tag.styled.ts
+var n = t.span`
+  // Core styles, here is the only place where CSS variables are *used*
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px var(--spacing-xs);
+  border-radius: var(--radius-minimal);
+  background: var(--background-color);
+  color: var(--color);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+  font-weight: bold;
+
+  &[data-have-icon="true"] {
+    padding-left: var(--spacing-xxs);
+  }
+
+  /**
+   * Starting here, we are only assigning colors depending on the nature and mode of the tag.
+   */
+  &[data-nature="default"] {
+    --color: var(--color-content-neutral-secondary-light);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-background-neutral-underground-1);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-background-neutral-underground-2);
+      --color: var(--color-content-neutral-secondary);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-neutral-secondary-light);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="informative"] {
+    --color: var(--color-content-message-informative-darkest);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-message-informative-lighter);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-ocean-2);
+      --color: var(--color-content-dataviz-ocean-4);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-ocean-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="negative"] {
+    --color: var(--color-content-message-negative-darker);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-message-negative-lighter);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-negative-2);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-negative-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="warning"] {
+    --color: var(--color-content-message-warning-darker);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-message-warning-lighter);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-brown-2);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-brown-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="positive"] {
+    --color: var(--color-content-message-positive-darker);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-message-positive-lighter);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-positive-2);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-positive-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="azure"] {
+    --color: var(--color-content-dataviz-azure-4);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-dataviz-azure-1);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-azure-2);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-azure-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="purple"] {
+    --color: var(--color-content-dataviz-purple-4);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-dataviz-purple-1);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-purple-2);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-purple-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="pink"] {
+    --color: var(--color-content-dataviz-pink-4);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-dataviz-pink-1);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-pink-2);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-pink-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+
+  &[data-nature="orange"] {
+    --color: var(--color-content-dataviz-orange-4);
+
+    &[data-mode="default"] {
+      --background-color: var(--color-content-dataviz-orange-1);
+    }
+    &[data-mode="enhanced"] {
+      --background-color: var(--color-content-dataviz-orange-2);
+    }
+    &[data-mode="reversed"] {
+      --background-color: var(--color-content-dataviz-orange-4);
+      --color: var(--color-content-neutral-primary-reversed);
+    }
+  }
+`, r = t(e)`
+  flex: none;
+  margin-right: var(--spacing-xxs);
+  font-size: var(--text-font-size-md);
+  line-height: var(--text-font-size-md);
+  width: var(--text-font-size-md);
+  height: var(--text-font-size-md);
+`;
+//#endregion
+export { n as Core, r as IconWrapper };

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,66 @@
+"use client";
+import e, { isIconName as t } from "../Icon/Icon.js";
+import n from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import { CoreTextInput as r } from "../../internal-components/CoreTextInput/CoreTextInput.styled.js";
+import i from "../../internal/getNatureFromMessages/getNatureFromMessages.js";
+import { CaracterCounterPositionFixer as a, CharacterCounter as o, IconWrapper as s, TextInputContainer as c } from "./TextInput.styled.js";
+import l, { useId as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region packages/components/TextInput/TextInput.tsx
+var p = l.forwardRef(({ nature: l, inputIcon: p, label: m, labelIconRight: h, labelIconRightTooltip: g, characterCounter: _, helperText: v, helperTextIcon: y, required: b, value: x, onChange: S, disabled: C, maxLength: w, type: T = "text", fullWidth: E, wrapperProps: D, errorHelperTextIcon: O, successHelperTextIcon: k, successHelperText: A, errorHelperText: j, warningHelperText: M, warningHelperTextIcon: N, orientation: P, as: F = "input", ...I }, L) => {
+	let R = u(), z = I.id || R, B = i({
+		nature: l,
+		successHelperText: A,
+		errorHelperText: j,
+		warningHelperText: M
+	});
+	return /* @__PURE__ */ d(n, {
+		...D,
+		htmlForId: z,
+		label: m,
+		labelIconRight: h,
+		labelIconRightTooltip: g,
+		helperTextIcon: y,
+		helperText: v,
+		errorHelperText: j,
+		errorHelperTextIcon: O,
+		successHelperText: A,
+		successHelperTextIcon: k,
+		warningHelperText: M,
+		warningHelperTextIcon: N,
+		orientation: P,
+		required: b,
+		characterCounter: _ && typeof x == "string" ? /* @__PURE__ */ f(o, {
+			"data-nature": B,
+			children: [x.length, !!w && ` / ${w}`]
+		}) : null,
+		children: /* @__PURE__ */ d(a, {
+			"data-fullwidth": E,
+			children: /* @__PURE__ */ f(c, {
+				"data-fullwidth": E,
+				children: [/* @__PURE__ */ d(r, {
+					...I,
+					as: F,
+					ref: L,
+					id: z,
+					type: F === "input" ? T : void 0,
+					"data-nature": B,
+					"aria-required": b,
+					required: b,
+					onChange: S,
+					value: x,
+					hasIcon: !!p,
+					disabled: C,
+					maxLength: w,
+					"data-fullwidth": E
+				}), !!p && /* @__PURE__ */ d(s, {
+					"data-nature": B,
+					"data-disabled": C,
+					children: t(p) ? /* @__PURE__ */ d(e, { name: p }) : p
+				})]
+			})
+		})
+	});
+});
+//#endregion
+export { p as default };

package/dist/components/TextInput/TextInput.styled.js

@@ -0,0 +1,85 @@
+import { styled as e } from "styled-components";
+//#region packages/components/TextInput/TextInput.styled.ts
+var t = e.div`
+  display: inline-flex;
+  flex-direction: column;
+  row-gap: var(--spacing-xs);
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, n = e.div`
+  display: inline-block;
+  position: relative;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, r = e.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color);
+  inset-block-end: var(--spacing-xs);
+  inset-inline-end: var(--spacing-xs);
+  width: var(--text-font-size-xl);
+  height: var(--text-font-size-xl);
+
+  svg {
+    font-size: var(--text-font-size-xl);
+  }
+
+  &[data-nature="default"] {
+    --color: var(--color-content-neutral-secondary);
+  }
+
+  &[data-nature="negative"] {
+    --color: var(--color-content-message-negative-darker);
+  }
+
+  &[data-nature="positive"] {
+    --color: var(--color-content-message-positive-darker);
+  }
+
+  &[data-nature="warning"] {
+    --color: var(--color-content-message-warning-darker);
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    --color: var(--color-content-neutral-primary-reversed);
+  }
+`, i = e.div`
+  color: var(--color);
+  column-gap: var(--spacing-xxs);
+  display: flex;
+  font-size: var(--text-font-size-xs);
+  font-style: normal;
+  font-weight: 400;
+  justify-content: end;
+  line-height: var(--text-line-height-xs);
+  text-align: end;
+
+  &[data-nature="disabled"] {
+    --color: var(--color-content-neutral-secondary);
+  }
+
+  &[data-nature="default"] {
+    --color: var(--color-content-neutral-secondary);
+  }
+
+  &[data-nature="negative"] {
+    --color: var(--color-content-message-negative-darker);
+  }
+
+  &[data-nature="positive"] {
+    --color: var(--color-content-message-positive-darker);
+  }
+
+  &[data-nature="warning"] {
+    --color: var(--color-content-message-warning-darker);
+  }
+`;
+//#endregion
+export { t as CaracterCounterPositionFixer, i as CharacterCounter, r as IconWrapper, n as TextInputContainer };