@pareto-engineering/design-system 5.2.1 → 5.4.0

package/dist/ui/a/ProgressBar/ProgressBar.js

@@ -0,0 +1,70 @@
+import { jsx as g } from "react/jsx-runtime";
+import "react";
+import { P as s } from "../../../index-CxkFVI6N.js";
+import { s as r } from "../../../exports.module-DmUnHWIJ.js";
+import '../../../assets/ProgressBar.css';const c = r.base, f = "progress-bar", t = ({
+  id: a,
+  className: o,
+  style: i,
+  attached: m,
+  color: e,
+  progress: p,
+  height: l,
+  rounded: n
+  // ...otherProps
+}) => /* @__PURE__ */ g(
+  "div",
+  {
+    id: a,
+    className: [
+      c,
+      f,
+      m && r.modifierAttached,
+      e && `x-${e}`,
+      o,
+      n && "rounded"
+    ].filter((d) => d).join(" "),
+    style: {
+      "--progress": p,
+      "--height": l,
+      ...i
+    },
+    "data-length": "50%"
+  }
+);
+t.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: s.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: s.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: s.objectOf(s.string),
+  /**
+   *  The color of the logo
+   */
+  color: s.string,
+  /**
+   *  Whether the progress bar is attached to another element
+   */
+  attached: s.bool,
+  /**
+   * The current progress
+   */
+  progress: s.number.isRequired,
+  /**
+   * The height of the progress bar as a CSS value. 1em by default.
+   */
+  height: s.string
+};
+t.defaultProps = {
+  attached: !1
+};
+export {
+  t as default
+};

package/dist/ui/a/ProgressBar/index.js

@@ -0,0 +1,4 @@
+import { default as e } from "./ProgressBar.js";
+export {
+  e as ProgressBar
+};

package/dist/ui/a/Quote/Quote.js

@@ -0,0 +1,73 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "react";
+import { P as s } from "../../../index-CxkFVI6N.js";
+import { s as d } from "../../../exports.module-DmUnHWIJ.js";
+import '../../../assets/Quote.css';const h = d.base, N = "quote", c = ({
+  id: t,
+  className: o,
+  style: i,
+  children: r,
+  source: l,
+  author: n,
+  color: m
+  // ...otherProps
+}) => /* @__PURE__ */ a(
+  "figure",
+  {
+    id: t,
+    className: [
+      h,
+      N,
+      o,
+      `x-${m}`
+    ].filter((p) => p).join(" "),
+    style: i,
+    children: [
+      /* @__PURE__ */ e("blockquote", { cite: l, className: "blockquote", children: /* @__PURE__ */ a("p", { className: "quotation h2", children: [
+        /* @__PURE__ */ e("span", { className: "c-x", children: "“" }),
+        /* @__PURE__ */ e("span", { className: "c-x", children: r }),
+        /* @__PURE__ */ e("span", { className: "c-x", children: "”" })
+      ] }) }),
+      /* @__PURE__ */ a("figcaption", { className: "figcaption", children: [
+        /* @__PURE__ */ e("span", { className: "x-metadata c-x", children: "-" }),
+        /* @__PURE__ */ e("cite", { className: "x-metadata c-x", children: n })
+      ] })
+    ]
+  }
+);
+c.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: s.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: s.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: s.objectOf(s.string),
+  /**
+   * The children jsx
+   */
+  children: s.node.isRequired,
+  /**
+   * A URL for the source of the quotation
+   */
+  source: s.string,
+  /**
+   * text representation of the source
+   */
+  author: s.string,
+  /**
+   * The color of the quotation text
+   */
+  color: s.string
+};
+c.defaultProps = {
+  color: "highlighted"
+};
+export {
+  c as default
+};

package/dist/ui/a/Quote/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./Quote.js";
+export {
+  t as Quote
+};

package/dist/ui/a/Removable/Removable.js

@@ -0,0 +1,55 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import "react";
+import { P as s } from "../../../index-CxkFVI6N.js";
+import { s as i } from "../../../exports.module-DmUnHWIJ.js";
+import '../../../assets/Removable.css';const p = i.base, d = "removable", o = ({
+  id: a,
+  className: t,
+  style: l,
+  handleClose: n,
+  children: r
+  // ...otherProps
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    id: a,
+    className: [
+      p,
+      d,
+      t
+    ].filter((c) => c).join(" "),
+    style: l,
+    children: [
+      r,
+      /* @__PURE__ */ e("button", { type: "button", className: "close-button", onClick: n || (() => null), children: /* @__PURE__ */ e("span", { className: "icon", children: "Y" }) })
+    ]
+  }
+);
+o.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: s.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: s.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: s.objectOf(s.string),
+  /**
+   * The function to call when the close button is clicked
+   */
+  handleClose: s.func,
+  /**
+   *  The children JSX
+   */
+  children: s.node
+};
+o.defaultProps = {
+  // someProp:false
+};
+export {
+  o as default
+};

package/dist/ui/a/Removable/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Removable.js";
+export {
+  o as Removable
+};

package/dist/ui/a/SVG/SVG.js

@@ -0,0 +1,152 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as x, createElement as j } from "react";
+import { P as e } from "../../../index-CxkFVI6N.js";
+import { s as f } from "../../../exports.module-DmUnHWIJ.js";
+import c from "./common/UseSVG/UseSVG.js";
+import '../../../assets/SVG.css';const k = f.base, A = "svg", d = ({
+  id: v,
+  className: b,
+  style: u,
+  width: t,
+  height: r,
+  viewBox: N,
+  preserveAspectRatio: h,
+  useClassName: i,
+  sprite: o,
+  target: a,
+  targets: n,
+  source: m,
+  strokeWidth: p,
+  animated: w,
+  ...y
+}) => {
+  const g = x(() => ({
+    className: i,
+    source: m,
+    target: a,
+    sprite: o,
+    strokeWidth: p
+  }), [
+    i,
+    m,
+    a,
+    p,
+    o
+  ]);
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      className: [
+        k,
+        A,
+        b,
+        w && f.modifierAnimated
+      ].filter((s) => s).join(" "),
+      id: v,
+      style: u,
+      xmlns: "http://www.w3.org/2000/svg",
+      version: "1.1",
+      preserveAspectRatio: h,
+      width: t || (r ? void 0 : "512"),
+      height: r || (t ? void 0 : "512"),
+      viewBox: N,
+      ...y,
+      children: n ? n.map((s) => /* @__PURE__ */ j(
+        c,
+        {
+          ...g,
+          ...s,
+          key: s.target
+        }
+      )) : /* @__PURE__ */ l(
+        c,
+        {
+          ...g
+        }
+      )
+    }
+  );
+};
+d.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: e.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: e.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: e.objectOf(
+    e.oneOfType([
+      e.string,
+      e.number
+    ])
+  ),
+  /**
+   * The height of the element
+   */
+  height: e.string,
+  /**
+   * The width of the element
+   */
+  width: e.string,
+  /**
+   * The viewBox property of the svg html container
+   */
+  viewBox: e.string,
+  /**
+   * The class to apply to the target's use tag
+   */
+  useClassName: e.string,
+  /**
+   *  The preserverveAspectRatio property of the svg html container
+   */
+  preserveAspectRatio: e.string,
+  /**
+   * The url to the sprite
+   */
+  sprite: e.string,
+  /**
+   * The id of the target in the sprite
+   */
+  target: e.string,
+  /**
+   * In case this is not a sprite but a standalone svg.
+   * Not recommended here, better use Figure.
+   * The only reason you would wanna use this instead of target
+   * is in the case you need to dynamically pass css classes
+   * to the inner svg components
+   * TODO remove and also from UseSVG
+   */
+  source: e.string,
+  /**
+   * An array of targets
+   */
+  targets: e.arrayOf(
+    e.shape({
+      target: e.string,
+      className: e.number,
+      stroke: e.boolean,
+      strokeWidth: e.number
+    })
+  ),
+  /**
+   * The SVG property stroke-width to apply in case of a single target
+   */
+  strokeWidth: e.number,
+  /**
+   * Whether to apply an animation class (C.anim)
+   */
+  animated: e.bool
+};
+d.defaultProps = {
+  preserveAspectRatio: "xMinYMin meet",
+  viewBox: "0 0 512 512",
+  sprite: "/sprite.svg"
+};
+export {
+  d as default
+};

package/dist/ui/a/SVG/common/UseSVG/UseSVG.js

@@ -0,0 +1,59 @@
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { P as s } from "../../../../../index-CxkFVI6N.js";
+const c = ({
+  id: i,
+  className: o,
+  style: r,
+  sprite: m,
+  target: e,
+  source: p,
+  strokeWidth: t
+}) => /* @__PURE__ */ n(
+  "use",
+  {
+    className: [
+      o
+    ].filter((a) => a).join(" "),
+    href: p || m + (e ? `#${e}` : ""),
+    style: t ? {
+      ...r,
+      "--sw": Number(t)
+    } : { style: r },
+    id: i
+  }
+);
+c.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: s.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: s.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: s.objectOf(s.string),
+  /**
+   * The url to the svg sprite, from the root of the site, for instance : `/myimage.svg`
+   */
+  sprite: s.string,
+  /**
+   * The target image id in the sprite
+   */
+  target: s.string,
+  /**
+   * The source image in case this is not a sprite
+   */
+  // TODO check if this works
+  source: s.string,
+  /**
+   * The SVG property stroke-width
+   */
+  strokeWidth: s.number
+};
+export {
+  c as default
+};

package/dist/ui/a/SVG/common/UseSVG/index.js

@@ -0,0 +1,4 @@
+import { default as f } from "./UseSVG.js";
+export {
+  f as UseSVG
+};

package/dist/ui/a/SVG/common/index.js

@@ -0,0 +1,4 @@
+import { default as f } from "./UseSVG/UseSVG.js";
+export {
+  f as UseSVG
+};

package/dist/ui/a/SVG/index.js

@@ -0,0 +1,4 @@
+import { default as f } from "./SVG.js";
+export {
+  f as SVG
+};

package/dist/ui/a/SnapScroller/SnapScroller.js

@@ -0,0 +1,72 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useState as n, useRef as y } from "react";
+import { P as s } from "../../../index-CxkFVI6N.js";
+import { s as j } from "../../../exports.module-DmUnHWIJ.js";
+import '../../../assets/SnapScroller.css';const v = j.base, D = "snap-scroller", l = ({
+  id: a,
+  className: c,
+  style: i,
+  children: u,
+  noScrollOnDesktop: e
+  // ...otherProps
+}) => {
+  const [f, r] = n(!1), [p, m] = n(0), [g, d] = n(0), t = y(null), M = (o) => {
+    r(!0), m(o.clientX), d(t.current.scrollLeft);
+  }, X = () => {
+    r(!1);
+  }, N = (o) => {
+    if (f) {
+      const S = o.clientX - p;
+      t.current.scrollLeft = g - S;
+    }
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ b(
+      "div",
+      {
+        id: a,
+        className: [
+          v,
+          D,
+          c,
+          e && "desktop-no-scroll"
+        ].filter((o) => o).join(" "),
+        style: i,
+        ref: t,
+        onMouseDown: e ? null : M,
+        onMouseUp: e ? null : X,
+        onMouseMove: e ? null : N,
+        children: u
+      }
+    )
+  );
+};
+l.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: s.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: s.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: s.objectOf(s.string),
+  /**
+   *  The children JSX
+   */
+  children: s.node,
+  /**
+   * Whether to snap scroll on desktop (false will enable a flexbox)
+   */
+  noScrollOnDesktop: s.bool
+};
+l.defaultProps = {
+  noScrollOnDesktop: !1
+};
+export {
+  l as default
+};

package/dist/ui/a/SnapScroller/index.js

@@ -0,0 +1,4 @@
+import { default as e } from "./SnapScroller.js";
+export {
+  e as SnapScroller
+};

package/dist/ui/a/Spinner/Spinner.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { P as s } from "../../../index-CxkFVI6N.js";
+import { s as n } from "../../../exports.module-DmUnHWIJ.js";
+import '../../../assets/Spinner.css';const l = n.base, p = "spinner", o = ({
+  id: a,
+  className: r,
+  style: t,
+  color: i
+  // ...otherProps
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    id: a,
+    className: [
+      l,
+      p,
+      r,
+      `x-${i}`
+    ].filter((m) => m).join(" "),
+    style: t,
+    children: /* @__PURE__ */ e("div", { className: "loader" })
+  }
+);
+o.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: s.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: s.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: s.objectOf(s.string),
+  /**
+   *  The color of the spinner
+   */
+  color: s.node
+};
+o.defaultProps = {
+  color: "main1"
+};
+export {
+  o as default
+};

package/dist/ui/a/Spinner/index.js

@@ -0,0 +1,4 @@
+import { default as a } from "./Spinner.js";
+export {
+  a as Spinner
+};

package/dist/ui/a/TextSteps/TextSteps.js

@@ -0,0 +1,58 @@
+import { jsxs as a, jsx as e, Fragment as c } from "react/jsx-runtime";
+import "react";
+import { P as s } from "../../../index-CxkFVI6N.js";
+import { s as o } from "../../../exports.module-DmUnHWIJ.js";
+import '../../../assets/TextSteps.css';const d = o.base, h = "text-steps", N = ({
+  id: i,
+  className: n,
+  style: m,
+  items: p,
+  title: r
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    id: i,
+    className: [
+      d,
+      h,
+      n,
+      "grid"
+    ].filter((t) => t).join(" "),
+    style: m,
+    children: [
+      r && /* @__PURE__ */ e("p", { className: "title h4", children: r }),
+      p.map((t, l) => /* @__PURE__ */ a(c, { children: [
+        /* @__PURE__ */ e("div", { className: " number h3 start-1 span-2 md-start-1 md-span-2", children: /* @__PURE__ */ e("p", { children: l + 1 }) }),
+        /* @__PURE__ */ e("div", { className: " description", children: /* @__PURE__ */ e("p", { children: t }) })
+      ] }))
+    ]
+  }
+);
+N.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: s.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: s.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: s.objectOf(s.string),
+  /**
+   *  The steps to iterate
+   */
+  items: s.arrayOf(s.shape({
+    title: s.string,
+    description: s.node
+  })).isRequired,
+  /**
+   * The title to pass to the component
+   */
+  title: s.string
+};
+export {
+  N as default
+};

package/dist/ui/a/TextSteps/index.js

@@ -0,0 +1,4 @@
+import { default as a } from "./TextSteps.js";
+export {
+  a as TextSteps
+};

package/dist/ui/a/ThroughPutIndicator/ThroughPutIndicator.js

@@ -0,0 +1,57 @@
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import "react";
+import { P as a } from "../../../index-CxkFVI6N.js";
+import { s as v } from "../../../exports.module-DmUnHWIJ.js";
+import '../../../assets/ThroughPutIndicator.css';const d = v.base, m = "throughput-indicator", b = ({ data: e, keyName: c = "reserved" }) => {
+  const n = () => /* @__PURE__ */ i(
+    "div",
+    {
+      className: [
+        d,
+        m
+      ].filter((t) => t).join(" "),
+      children: /* @__PURE__ */ i("span", { className: "no-change-text", children: "No change" })
+    }
+  ), p = (t, f, g = t === "positive" ? "S" : "R") => /* @__PURE__ */ l(
+    "div",
+    {
+      className: [
+        d,
+        m
+      ].filter((N) => N).join(" "),
+      children: [
+        /* @__PURE__ */ i("span", { className: `ai-icon ${t}-throughput-indicator`, children: g }),
+        /* @__PURE__ */ l("p", { children: [
+          f,
+          "%"
+        ] })
+      ]
+    }
+  );
+  if (!e || e.length < 2)
+    return n();
+  const s = e[0][c], r = e[e.length - 1][c];
+  if (s === 0 && r === 0)
+    return n();
+  if (s === 0 && r !== 0)
+    return p("positive", "100");
+  const o = (r - s) / Math.abs(s) * 100, u = Math.abs(o).toFixed(1);
+  if (o === 0)
+    return n();
+  const h = o > 0 ? "positive" : "negative";
+  return p(h, u, h === "positive" ? "S" : "R");
+};
+b.propTypes = {
+  /**
+   * The data to be displayed in the throughput indicator
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data: a.arrayOf(a.object).isRequired,
+  /**
+   * The key name to be displayed in the throughput indicator
+   */
+  keyName: a.string
+};
+export {
+  b as default
+};