@cfx-dev/ui-components 0.0.19 → 0.0.21

package/dist/style-guide/Colours/LightThemeSwatches.js

@@ -0,0 +1,105 @@
+import { jsxs as l, Fragment as a, jsx as e } from "react/jsx-runtime";
+const r = [
+  {
+    name: "$bg",
+    colorValue: "#ffffff"
+  },
+  {
+    name: "$fg",
+    colorValue: "#161923"
+  },
+  {
+    name: ".color-1",
+    colorValue: "#b71c1c"
+  },
+  // darken(#F44336, 30%)
+  {
+    name: ".color-2",
+    colorValue: "#2e7d32"
+  },
+  // darken(#4CAF50, 30%)
+  {
+    name: ".color-3",
+    colorValue: "#c6ff00"
+  },
+  // darken(#FFEB3B, 30%)
+  {
+    name: ".color-4",
+    colorValue: "#2962ff"
+  },
+  // darken(#42A5F5, 30%)
+  {
+    name: ".color-5",
+    colorValue: "#0277bd"
+  },
+  // darken(#03A9F4, 30%)
+  {
+    name: ".color-6",
+    colorValue: "#6a1b9a"
+  },
+  // darken(#9C27B0, 30%)
+  {
+    name: ".color-8",
+    colorValue: "#d84315"
+  },
+  // darken(#FF5722, 30%)
+  {
+    name: ".color-9",
+    colorValue: "#6d6d6d"
+  }
+  // darken(#9E9E9E, 30%)
+], i = function() {
+  return /* @__PURE__ */ l(a, { children: [
+    /* @__PURE__ */ e("h1", { children: " Light Theme " }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+          gap: "20px",
+          padding: "20px"
+        },
+        children: r.map((o) => /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              backgroundColor: o.colorValue,
+              color: "#FFF",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100px",
+              borderRadius: "8px",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+              padding: "10px",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "-50px",
+                  textAlign: "center",
+                  padding: "5px 10px",
+                  color: "#FFF"
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { children: o.name }),
+                  /* @__PURE__ */ e("br", {}),
+                  /* @__PURE__ */ e("span", { children: o.colorValue })
+                ]
+              }
+            )
+          },
+          o.name
+        ))
+      }
+    )
+  ] });
+};
+export {
+  i as default
+};

package/dist/style-guide/Colours/Swatches.d.ts

@@ -0,0 +1,6 @@
+interface SwatchProps {
+    name: string;
+    colorValue: string;
+}
+declare function Swatches({ name, colorValue, }: SwatchProps): import("react/jsx-runtime").JSX.Element;
+export default Swatches;

package/dist/style-guide/Colours/Swatches.js

@@ -0,0 +1,48 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+function n({
+  name: t,
+  colorValue: i
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        display: "inline-block",
+        margin: "10px",
+        padding: "10px",
+        border: "1px solid #ccc"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: "100px",
+              height: "100px",
+              backgroundColor: i,
+              border: "1px solid #000",
+              marginBottom: "5px"
+            }
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              fontFamily: "Arial, sans-serif"
+            },
+            children: [
+              t,
+              ": ",
+              i
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  n as default
+};

package/dist/style-guide/Icons/IconDisplayGrid.d.ts

@@ -0,0 +1,2 @@
+declare function IconDisplayGrid(): import("react/jsx-runtime").JSX.Element;
+export default IconDisplayGrid;

package/dist/style-guide/Icons/IconDisplayGrid.js

@@ -0,0 +1,42 @@
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { I as s } from "../../Icons-BlBKvJD8.js";
+function a() {
+  const i = Object.entries(s).map(([e, t]) => ({
+    name: e,
+    component: t
+  }));
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+        gap: "30px",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: i.map(({
+        name: e,
+        component: t
+      }) => /* @__PURE__ */ r(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: [
+            t,
+            /* @__PURE__ */ n("span", { style: { marginTop: "10px" }, children: e })
+          ]
+        },
+        e
+      ))
+    }
+  );
+}
+export {
+  a as default
+};

package/dist/style-guide/Icons/Icons.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import { B as n, I as p } from "../../Icons-BlBKvJD8.js";
+import "../../index.esm-BkynlSN6.js";
+export {
+  n as BrandIcon,
+  p as Icons
+};

package/dist/tslib.es6-CBKHJX9H.js

@@ -0,0 +1,151 @@
+var y = function(c, a) {
+  return y = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(r, e) {
+    r.__proto__ = e;
+  } || function(r, e) {
+    for (var o in e) Object.prototype.hasOwnProperty.call(e, o) && (r[o] = e[o]);
+  }, y(c, a);
+};
+function h(c, a) {
+  if (typeof a != "function" && a !== null)
+    throw new TypeError("Class extends value " + String(a) + " is not a constructor or null");
+  y(c, a);
+  function r() {
+    this.constructor = c;
+  }
+  c.prototype = a === null ? Object.create(a) : (r.prototype = a.prototype, new r());
+}
+var p = function() {
+  return p = Object.assign || function(a) {
+    for (var r, e = 1, o = arguments.length; e < o; e++) {
+      r = arguments[e];
+      for (var t in r) Object.prototype.hasOwnProperty.call(r, t) && (a[t] = r[t]);
+    }
+    return a;
+  }, p.apply(this, arguments);
+};
+function _(c, a) {
+  var r = {};
+  for (var e in c) Object.prototype.hasOwnProperty.call(c, e) && a.indexOf(e) < 0 && (r[e] = c[e]);
+  if (c != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var o = 0, e = Object.getOwnPropertySymbols(c); o < e.length; o++)
+      a.indexOf(e[o]) < 0 && Object.prototype.propertyIsEnumerable.call(c, e[o]) && (r[e[o]] = c[e[o]]);
+  return r;
+}
+function d(c, a, r, e) {
+  function o(t) {
+    return t instanceof r ? t : new r(function(l) {
+      l(t);
+    });
+  }
+  return new (r || (r = Promise))(function(t, l) {
+    function i(u) {
+      try {
+        n(e.next(u));
+      } catch (s) {
+        l(s);
+      }
+    }
+    function f(u) {
+      try {
+        n(e.throw(u));
+      } catch (s) {
+        l(s);
+      }
+    }
+    function n(u) {
+      u.done ? t(u.value) : o(u.value).then(i, f);
+    }
+    n((e = e.apply(c, a || [])).next());
+  });
+}
+function w(c, a) {
+  var r = { label: 0, sent: function() {
+    if (t[0] & 1) throw t[1];
+    return t[1];
+  }, trys: [], ops: [] }, e, o, t, l;
+  return l = { next: i(0), throw: i(1), return: i(2) }, typeof Symbol == "function" && (l[Symbol.iterator] = function() {
+    return this;
+  }), l;
+  function i(n) {
+    return function(u) {
+      return f([n, u]);
+    };
+  }
+  function f(n) {
+    if (e) throw new TypeError("Generator is already executing.");
+    for (; l && (l = 0, n[0] && (r = 0)), r; ) try {
+      if (e = 1, o && (t = n[0] & 2 ? o.return : n[0] ? o.throw || ((t = o.return) && t.call(o), 0) : o.next) && !(t = t.call(o, n[1])).done) return t;
+      switch (o = 0, t && (n = [n[0] & 2, t.value]), n[0]) {
+        case 0:
+        case 1:
+          t = n;
+          break;
+        case 4:
+          return r.label++, { value: n[1], done: !1 };
+        case 5:
+          r.label++, o = n[1], n = [0];
+          continue;
+        case 7:
+          n = r.ops.pop(), r.trys.pop();
+          continue;
+        default:
+          if (t = r.trys, !(t = t.length > 0 && t[t.length - 1]) && (n[0] === 6 || n[0] === 2)) {
+            r = 0;
+            continue;
+          }
+          if (n[0] === 3 && (!t || n[1] > t[0] && n[1] < t[3])) {
+            r.label = n[1];
+            break;
+          }
+          if (n[0] === 6 && r.label < t[1]) {
+            r.label = t[1], t = n;
+            break;
+          }
+          if (t && r.label < t[2]) {
+            r.label = t[2], r.ops.push(n);
+            break;
+          }
+          t[2] && r.ops.pop(), r.trys.pop();
+          continue;
+      }
+      n = a.call(c, r);
+    } catch (u) {
+      n = [6, u], o = 0;
+    } finally {
+      e = t = 0;
+    }
+    if (n[0] & 5) throw n[1];
+    return { value: n[0] ? n[1] : void 0, done: !0 };
+  }
+}
+function b(c, a) {
+  var r = typeof Symbol == "function" && c[Symbol.iterator];
+  if (!r) return c;
+  var e = r.call(c), o, t = [], l;
+  try {
+    for (; (a === void 0 || a-- > 0) && !(o = e.next()).done; ) t.push(o.value);
+  } catch (i) {
+    l = { error: i };
+  } finally {
+    try {
+      o && !o.done && (r = e.return) && r.call(e);
+    } finally {
+      if (l) throw l.error;
+    }
+  }
+  return t;
+}
+function v(c, a, r) {
+  if (r || arguments.length === 2) for (var e = 0, o = a.length, t; e < o; e++)
+    (t || !(e in a)) && (t || (t = Array.prototype.slice.call(a, 0, e)), t[e] = a[e]);
+  return c.concat(t || Array.prototype.slice.call(a));
+}
+export {
+  p as _,
+  d as a,
+  w as b,
+  v as c,
+  b as d,
+  h as e,
+  _ as f
+};

package/dist/utils/functional.js

@@ -1,8 +1,21 @@
-import { i as e, b as n, n as s, a as o, r as t } from "../functional-C0pE183N.js";
+function t() {
+}
+function r() {
+  return !0;
+}
+function e() {
+  return !1;
+}
+function u(n) {
+  return n;
+}
+function o(n) {
+  n();
+}
 export {
-  e as identity,
-  n as invoke,
-  s as noop,
-  o as returnFalse,
-  t as returnTrue
+  u as identity,
+  o as invoke,
+  t as noop,
+  e as returnFalse,
+  r as returnTrue
 };

package/dist/utils/hooks.d.ts

@@ -11,4 +11,5 @@ export declare namespace useKeyboardClose {
     var isCloseEvent: (event: KeyboardEvent) => boolean;
 }
 export declare function useWindowResize<T extends () => void>(callback: T): void;
-export declare function useOutlet(id: string): React.FC<React.PropsWithChildren>;
+export type OutletPosition = 'original' | 'before' | 'after';
+export declare function useOutlet(id: string, position?: OutletPosition): React.FC<React.PropsWithChildren>;

package/dist/utils/hooks.js

@@ -1,12 +1,79 @@
-import "react/jsx-runtime";
-import "react";
-import "../index-C75OpfGQ.js";
-import { u, e as r, d as i, c as m, a as n, b } from "../hooks-GAujvL7d.js";
+import { jsx as E } from "react/jsx-runtime";
+import o from "react";
+import { R as m } from "../index-2hJuj4UN.js";
+const a = Symbol("Uninitialized");
+function h(e, ...t) {
+  const r = o.useRef(a);
+  return r.current === a && (r.current = e(...t)), r.current;
+}
+function l(e) {
+  const t = o.useRef(e);
+  return t.current = e, t;
+}
+function i(e, t = "keydown", r) {
+  o.useEffect(() => {
+    const s = (n) => {
+      i.shouldProcessEvent(n) && e.current(n);
+    };
+    return window.addEventListener(t, s, r), () => {
+      window.removeEventListener(t, s, r);
+    };
+  }, [t, r]);
+}
+i.shouldProcessEvent = (e) => {
+  if (e.target instanceof Element) {
+    if (e.target.hasAttribute("contenteditable"))
+      return !1;
+    switch (e.target.tagName) {
+      case "INPUT":
+      case "SELECT":
+      case "TEXTAREA":
+        return !1;
+      default:
+        return !0;
+    }
+  }
+  return !0;
+};
+function d(e) {
+  const t = l((r) => {
+    d.isCloseEvent(r) && e();
+  });
+  i(t);
+}
+d.isCloseEvent = (e) => e.key === "Escape";
+function v(e) {
+  const t = l(e);
+  o.useEffect(() => {
+    const r = () => t.current();
+    return window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
+  }, []);
+}
+function b(e) {
+  const {
+    children: t
+  } = e;
+  return /* @__PURE__ */ E("div", { style: { display: "none" }, children: t });
+}
+function g(e, t = "original") {
+  const [r, s] = o.useState(() => b);
+  return o.useEffect(() => {
+    let n = document.getElementById(e);
+    if (n || (n = document.createElement("div"), n.id = e, document.body.appendChild(n)), t !== "original") {
+      const c = n, u = `${e}_${t}`;
+      n = document.getElementById(u), n || (n = document.createElement("div"), n.id = u, t === "before" ? document.body.insertBefore(n, c) : c.after(n));
+    }
+    const f = ({
+      children: c
+    }) => m.createPortal(c, n);
+    s(() => f);
+  }, [e, t]), r;
+}
 export {
-  u as useDynamicRef,
-  r as useGlobalKeyboardEvent,
-  i as useInstance,
-  m as useKeyboardClose,
-  n as useOutlet,
-  b as useWindowResize
+  l as useDynamicRef,
+  i as useGlobalKeyboardEvent,
+  h as useInstance,
+  d as useKeyboardClose,
+  g as useOutlet,
+  v as useWindowResize
 };