@yourdash/uikit 1.0.34 → 1.0.35

package/dist/utilityComponent/hasBeenShown/hasBeenShown.js

@@ -0,0 +1,23 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useState as i, useRef as a, useEffect as l } from "react";
+const v = ({ className: r, onSeen: t }) => {
+  const [s, o] = i(!1), e = a(null);
+  return l(() => {
+    if (!e.current) return;
+    const c = e.current, n = new IntersectionObserver((u) => {
+      u[0].isIntersecting && (t(), n.disconnect(), o(!0));
+    });
+    return n.observe(c), () => {
+      n.disconnect();
+    };
+  }, []), s ? null : /* @__PURE__ */ f(
+    "div",
+    {
+      ref: e,
+      className: r
+    }
+  );
+};
+export {
+  v as default
+};

package/dist/utilityComponent/index.js

@@ -0,0 +1,6 @@
+import { default as o } from "./hasBeenShown/hasBeenShown.js";
+import { default as n } from "./onInView/onInView.js";
+export {
+  o as HasBeenShown,
+  n as OnInView
+};

package/dist/utilityComponent/onInView/onInView.js

@@ -0,0 +1,54 @@
+import { jsx as I } from "react/jsx-runtime";
+import { useRef as p, useEffect as x } from "react";
+const R = ({ className: m, onEnterView: r, onLeaveView: t }) => {
+  const u = p(!1), s = p(null);
+  return x(() => {
+    if (!s.current) return;
+    const c = s.current, b = () => {
+      const { top: l, bottom: d, left: h, right: g } = c.getBoundingClientRect();
+      if (!u.current) {
+        if (l < 0) {
+          r == null || r("up"), u.current = !0;
+          return;
+        } else if (d > window.innerHeight) {
+          r == null || r("down"), u.current = !0;
+          return;
+        } else if (h < 0) {
+          r == null || r("left"), u.current = !0;
+          return;
+        } else if (g > window.innerWidth) {
+          r == null || r("right"), u.current = !0;
+          return;
+        }
+      }
+      if (l > window.innerHeight) {
+        t == null || t("down"), u.current = !1;
+        return;
+      } else if (d < 0) {
+        t == null || t("up"), u.current = !1;
+        return;
+      } else if (h > window.innerWidth) {
+        t == null || t("right"), u.current = !1;
+        return;
+      } else if (g < 0) {
+        t == null || t("left"), u.current = !1;
+        return;
+      }
+    }, f = new IntersectionObserver(() => {
+      b();
+    });
+    return f.observe(c), () => {
+      f.disconnect();
+    };
+  }, []), /* @__PURE__ */ I(
+    "div",
+    {
+      ref: s,
+      style: { height: 1, width: 1 },
+      className: m
+    }
+  );
+};
+export {
+  R as default
+};

package/dist/views/carousel/carousel.js

@@ -0,0 +1,102 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useRef as h, useState as _, useEffect as C } from "react";
+import v from "../../components/card/card.js";
+import b from "../../components/container/container.js";
+import { UKIcon as m } from "../../components/icon/iconDictionary.js";
+import u from "../../components/iconButton/iconButton.js";
+import { c as d } from "../../clippy-B98VypDQ.js";
+import '../../assets/carousel.css';const I = "_containerComponent_sue6z_6", E = "_component_sue6z_16", N = "_page_sue6z_34", R = "_controls_sue6z_48", w = "_indicator_sue6z_58", z = "_pageIndicator_sue6z_65", T = "_selected_sue6z_72", o = {
+  containerComponent: I,
+  component: E,
+  page: N,
+  controls: R,
+  indicator: w,
+  pageIndicator: z,
+  selected: T
+}, j = ({ items: i, className: g }) => {
+  const c = h(null), [l, p] = _(0);
+  return C(() => {
+    const e = c.current;
+    if (!e) return;
+    console.log(Array.from(e.children));
+    let t, n = () => {
+      clearTimeout(t), t = setTimeout(function() {
+        Array.from(e.children).forEach((s, f) => {
+          if (Math.abs(
+            s.getBoundingClientRect().left + s.getBoundingClientRect().width / 2 - (e.getBoundingClientRect().left + e.getBoundingClientRect().width / 2)
+          ) < s.getBoundingClientRect().width / 2) {
+            p(f);
+            return;
+          }
+        });
+      }, 25);
+    };
+    return e.addEventListener("scroll", n), () => {
+      e.removeEventListener("scroll", n), clearTimeout(t);
+    };
+  }, []), /* @__PURE__ */ a(b, { className: d(o.containerComponent, g), children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: o.component,
+        ref: c,
+        children: i.map((e) => /* @__PURE__ */ r(
+          "div",
+          {
+            className: o.page,
+            children: e.element
+          },
+          e.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: o.controls, children: [
+      /* @__PURE__ */ r(
+        u,
+        {
+          accessibleLabel: "previous page",
+          icon: m.ChevronLeft,
+          className: o.pageControl,
+          onClick: () => {
+            const e = c.current;
+            if (!e)
+              return;
+            const t = e.children[l - 1];
+            t && t.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+      ),
+      /* @__PURE__ */ r(v, { className: o.indicator, children: i.map((e, t) => /* @__PURE__ */ r(
+        "button",
+        {
+          className: d(o.pageIndicator, t === l && o.selected),
+          onClick: () => {
+            const n = c.current;
+            if (!n)
+              return;
+            n.scrollIntoView({ behavior: "smooth" }), n.children[t].scrollIntoView({ behavior: "smooth" });
+          }
+        },
+        e.id
+      )) }),
+      /* @__PURE__ */ r(
+        u,
+        {
+          accessibleLabel: "next page",
+          icon: m.ChevronRight,
+          className: o.pageControl,
+          onClick: () => {
+            const e = c.current;
+            if (!e)
+              return;
+            const t = e.children[l + 1];
+            t && t.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  j as default
+};

package/dist/views/dialog/dialog.js

@@ -0,0 +1,18 @@
+import { jsx as n } from "react/jsx-runtime";
+import e from "../../components/card/card.js";
+import '../../assets/dialog.css';const s = "_background_t6st2_26", d = "_backgroundFadeIn_t6st2_1", r = "_view_t6st2_39", c = "_fadeIn_t6st2_1", a = {
+  background: s,
+  backgroundFadeIn: d,
+  view: r,
+  fadeIn: c
+}, u = ({ children: t, className: o }) => /* @__PURE__ */ n("div", { className: a.background, children: /* @__PURE__ */ n(
+  e,
+  {
+    containerClassName: a.view,
+    className: o,
+    children: t
+  }
+) });
+export {
+  u as default
+};

package/dist/views/header/header.js

@@ -0,0 +1,21 @@
+import { jsx as e, Fragment as a } from "react/jsx-runtime";
+import i from "../../components/heading/heading.js";
+import '../../assets/header.css';const n = "_view_1q1ur_10", s = {
+  view: n
+}, o = ({ backgroundImage: r, heading: t }) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+  "div",
+  {
+    className: s.view,
+    style: r ? { backgroundImage: r } : { backgroundImage: "linear-gradient(-45deg, #ff8093aa, #ffd264aa)" },
+    children: /* @__PURE__ */ e(
+      i,
+      {
+        level: 1,
+        text: t
+      }
+    )
+  }
+) });
+export {
+  o as default
+};

package/dist/views/index.js

@@ -0,0 +1,26 @@
+import { default as o } from "./carousel/carousel.js";
+import { default as t } from "./dialog/dialog.js";
+import { default as d } from "./header/header.js";
+import { default as m } from "./infiniteScroll/infiniteScroll.js";
+import { default as s } from "./navBar/navBar.js";
+import { default as x } from "./navBar/components/navImage/navImage.js";
+import { default as n } from "./navBar/components/navTitle/navTitle.js";
+import { default as S } from "./onBoarding/onBoarding.js";
+import { default as v } from "./panAndZoom/panAndZoom.js";
+import { default as N } from "./sidebar/sidebar.js";
+import { default as I } from "./sidebar/sidebarContainer.js";
+import { default as c } from "./sidebar/sidebarToggleButton.js";
+export {
+  o as Carousel,
+  t as Dialog,
+  d as Header,
+  m as InfiniteScroll,
+  s as NavBar,
+  x as NavImage,
+  n as NavTitle,
+  S as OnBoarding,
+  v as PanAndZoom,
+  N as Sidebar,
+  I as SidebarContainer,
+  c as SidebarToggleButton
+};

package/dist/views/infiniteScroll/infiniteScroll.js

@@ -0,0 +1,62 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { c as u } from "../../clippy-B98VypDQ.js";
+import d, { useState as p, useEffect as g } from "react";
+import h from "../../components/heading/heading.js";
+import I from "../../components/separator/separator.js";
+import i from "../../components/text/text.js";
+import '../../assets/infiniteScroll.css';const L = "_component_tlgec_10", P = "_items_tlgec_19", R = "_endOfItems_tlgec_23", s = {
+  component: L,
+  items: P,
+  endOfItems: R
+}, E = ({ children: t, fetchNextPage: _, containerClassName: v, className: x, resetState: b }) => {
+  const o = d.useRef(null), n = d.useRef(-1), [m, r] = p(!1), [N, l] = p(!1);
+  g(() => {
+    n.current = -1, r(!1), l(!1), f();
+  }, [b]);
+  async function f() {
+    if (m) return;
+    r(!0);
+    const { hasAnotherPage: c } = await _(n.current + 1);
+    n.current++, r(!1), l(c || !1);
+  }
+  return g(() => {
+    if (!o.current) return;
+    const c = o.current;
+    new IntersectionObserver((O) => {
+      console.log("observer update"), O[0].isIntersecting && f();
+    }).observe(c);
+  }, []), /* @__PURE__ */ a("div", { className: u(v, s.component), children: [
+    (t == null ? void 0 : t.length) > 0 ? /* @__PURE__ */ e("div", { className: u(x, s.items), children: t }) : /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(
+        h,
+        {
+          level: 1,
+          text: "Whoops."
+        }
+      ),
+      /* @__PURE__ */ e(I, { direction: "column" }),
+      /* @__PURE__ */ e(i, { text: "It looks like nothing could be found..." })
+    ] }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: s.endOfItems,
+        children: [
+          m && /* @__PURE__ */ e(i, { text: "Loading more content" }),
+          /* @__PURE__ */ e(I, { direction: "column" }),
+          N && /* @__PURE__ */ e(
+            i,
+            {
+              text: "No more items to load",
+              className: s.endOfItems
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  E as default
+};

package/dist/views/navBar/components/navImage/navImage.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "../../../../components/image/image.js";
+import '../../../../assets/navImage.css';const n = "_component_q2khg_6", m = {
+  component: n
+}, a = ({ src: o }) => /* @__PURE__ */ e(
+  t,
+  {
+    accessibleLabel: "",
+    src: o,
+    className: m.component
+  }
+);
+export {
+  a as default
+};

package/dist/views/navBar/components/navTitle/navTitle.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "../../../../components/heading/heading.js";
+const i = ({ title: t }) => /* @__PURE__ */ e(
+  r,
+  {
+    text: t,
+    level: 2
+  }
+);
+export {
+  i as default
+};

package/dist/views/navBar/navBar.js

@@ -0,0 +1,36 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import i from "../../components/box/box.js";
+import n from "../../components/flex/flex.js";
+import { c as a } from "../../clippy-B98VypDQ.js";
+import '../../assets/navBar.css';const l = "_component_178hu_6", p = "_segment_178hu_20", e = {
+  component: l,
+  segment: p
+}, f = ({ leftSection: s, centerSection: t, rightSection: m, className: r }) => /* @__PURE__ */ c(i, { className: a(e.component, r), children: [
+  /* @__PURE__ */ o(
+    n,
+    {
+      className: e.segment,
+      direction: "row",
+      children: s
+    }
+  ),
+  /* @__PURE__ */ o(
+    n,
+    {
+      className: e.segment,
+      direction: "row",
+      children: t
+    }
+  ),
+  /* @__PURE__ */ o(
+    n,
+    {
+      className: e.segment,
+      direction: "row",
+      children: m
+    }
+  )
+] });
+export {
+  f as default
+};

package/dist/views/onBoarding/onBoarding.js

@@ -0,0 +1,125 @@
+import { jsx as t, jsxs as d, Fragment as m } from "react/jsx-runtime";
+import * as l from "react";
+import g from "../../components/card/card.js";
+import { UKIcon as _ } from "../../components/icon/iconDictionary.js";
+import f from "../../components/iconButton/iconButton.js";
+import h from "../../components/image/image.js";
+import p from "../../components/heading/heading.js";
+import u from "../../components/text/text.js";
+import b from "../../components/buttonWithIcon/buttonWithIcon.js";
+import k from "../../components/button/button.js";
+import { O as I } from "../../index-D4kASGu5.js";
+import B from "../../components/flex/flex.js";
+import { c as i } from "../../clippy-B98VypDQ.js";
+import '../../assets/onBoarding.css';const C = "_page_107gf_6", x = "_fadeIn_107gf_1", N = "_card_107gf_40", y = "_cardContainer_107gf_51", v = "_goBackButton_107gf_55", w = "_headerImage_107gf_61", T = "_header_107gf_61", L = "_body_107gf_70", a = {
+  page: C,
+  fadeIn: x,
+  card: N,
+  cardContainer: y,
+  goBackButton: v,
+  headerImage: w,
+  header: T,
+  body: L
+}, R = ({ pages: c, meta: s }) => {
+  const [o, r] = l.useState(0), n = c[o];
+  return localStorage.getItem(`yourdash-application-visited-${s.id}`) || o > c.length - 1 ? (localStorage.setItem(`yourdash-application-visited-${s.id}`, "true"), /* @__PURE__ */ t(I, {})) : /* @__PURE__ */ t("div", { className: a.page, children: /* @__PURE__ */ d(
+    g,
+    {
+      className: a.card,
+      containerClassName: a.cardContainer,
+      children: [
+        n.allowGoBack && /* @__PURE__ */ t(
+          f,
+          {
+            className: i(a.goBackButton, "animate__animated animate__fadeInDown"),
+            accessibleLabel: "Go back to the last page",
+            icon: _.ChevronLeft,
+            onClick: () => {
+              r(o - 1);
+            }
+          }
+        ),
+        /* @__PURE__ */ t(
+          h,
+          {
+            className: a.headerImage,
+            src: n.headerImage,
+            accessibleLabel: ""
+          }
+        ),
+        /* @__PURE__ */ t(
+          p,
+          {
+            className: a.header,
+            text: n.header
+          }
+        ),
+        /* @__PURE__ */ t(
+          u,
+          {
+            className: a.body,
+            text: n.body
+          }
+        ),
+        /* @__PURE__ */ t(
+          B,
+          {
+            className: a.actions,
+            direction: "row",
+            children: n.actions.map((e) => e.icon ? /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
+              b,
+              {
+                className: i(a.action, a.actionWithIcon, "animate__animated animate__fadeInUp"),
+                text: e.label,
+                icon: e.icon,
+                onClick: () => {
+                  if (e.onClick(), e.changeTo)
+                    switch (e.changeTo) {
+                      case "next":
+                        r(o + 1);
+                        break;
+                      case "previous":
+                        o > 0 && r(o - 1);
+                        break;
+                      case "remain":
+                        break;
+                      case "completed":
+                        r(c.length + 1);
+                        break;
+                    }
+                }
+              },
+              e.label
+            ) }) : /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
+              k,
+              {
+                className: i(a.action, a.actionWithoutIcon, "animate__animated animate__fadeInUp"),
+                text: e.label,
+                onClick: () => {
+                  if (e.onClick(), e.changeTo)
+                    switch (e.changeTo) {
+                      case "next":
+                        r(o + 1);
+                        break;
+                      case "previous":
+                        o > 0 && r(o - 1);
+                        break;
+                      case "remain":
+                        break;
+                      case "completed":
+                        r(c.length + 1);
+                        break;
+                    }
+                }
+              },
+              e.icon
+            ) }))
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  R as default
+};

package/dist/views/panAndZoom/panAndZoom.js

@@ -0,0 +1,74 @@
+import { jsx as T } from "react/jsx-runtime";
+import { useRef as P, useState as m, useEffect as x } from "react";
+const W = ({
+  children: g,
+  minZoom: Y,
+  maxZoom: E,
+  onScaleChange: p
+}) => {
+  const X = P(null), [l, f] = m(0), [d, v] = m(0), [c, M] = m(1);
+  return p && x(() => {
+    p(c);
+  }, [c]), /* @__PURE__ */ T(
+    "div",
+    {
+      ref: X,
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      onWheel: (t) => {
+        t.stopPropagation();
+        const e = t.deltaY, n = c + e / 1e3;
+        M(Math.min(Math.max(n, Y ?? 0.1), E ?? 10));
+      },
+      onMouseDown: (t) => {
+        t.stopPropagation();
+        const e = t.clientX, n = t.clientY, i = l, r = d, s = (o) => {
+          o.stopPropagation();
+          const u = o.clientX - e, h = o.clientY - n;
+          f(i + u), v(r + h);
+        }, a = () => {
+          t.stopPropagation(), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", a);
+        };
+        document.addEventListener("mousemove", s), document.addEventListener("mouseup", a);
+      },
+      onTouchStart: (t) => {
+        t.stopPropagation();
+        const e = t.touches, n = l, i = d, r = (a) => {
+          a.stopPropagation();
+          const o = a.touches, u = o[0].clientX - e[0].clientX, h = o[0].clientY - e[0].clientY;
+          f(n + u), v(i + h);
+        }, s = () => {
+          t.stopPropagation(), document.removeEventListener("touchmove", r), document.removeEventListener("touchend", s);
+        };
+        document.addEventListener("touchmove", r), document.addEventListener("touchend", s);
+      },
+      onDragStart: (t) => {
+        t.stopPropagation(), t.preventDefault();
+      },
+      onContextMenu: (t) => {
+        t.preventDefault(), t.stopPropagation();
+      },
+      children: /* @__PURE__ */ T(
+        "div",
+        {
+          style: {
+            transform: `translate(${l}px, ${d}px) scale(${c})`,
+            transformOrigin: "center center",
+            maxWidth: "max-content",
+            pointerEvents: "none"
+          },
+          children: g
+        }
+      )
+    }
+  );
+};
+export {
+  W as default
+};

package/dist/views/sidebar/sidebar.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as s } from "../../clippy-B98VypDQ.js";
+import m from "../../components/flex/flex.js";
+import p from "../../core/incrementLevel.js";
+import { u as c, a as i } from "../../level-o2-EzyQS.js";
+import l from "./sidebarContext.js";
+import { useContext as a } from "react";
+import '../../assets/sidebar.css';const d = "_component_kdw27_10", f = "_open_kdw27_40", e = {
+  component: d,
+  open: f
+}, k = ({ children: t }) => {
+  const n = a(l), r = c();
+  return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(
+    m,
+    {
+      direction: "column",
+      className: s(e.component, n.isOpen && e.open, i(r + 1)),
+      children: t
+    }
+  ) });
+};
+export {
+  k as default
+};

package/dist/views/sidebar/sidebarContainer.js

@@ -0,0 +1,34 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useState as s } from "react";
+import a from "./sidebarContext.js";
+import { c } from "../../clippy-B98VypDQ.js";
+import '../../assets/sidebarContainer.css';const m = "_component_3jgyq_10", p = {
+  component: m
+}, f = ({
+  children: r,
+  showSidebarByDefault: n,
+  className: i
+}) => {
+  const [o, e] = s(n || !0);
+  return /* @__PURE__ */ t(
+    a.Provider,
+    {
+      value: {
+        closeSidebar: () => {
+          e(!1);
+        },
+        toggleSidebar: () => {
+          e(!o);
+        },
+        openSidebar: () => {
+          e(!0);
+        },
+        isOpen: o
+      },
+      children: /* @__PURE__ */ t("div", { className: c(p.component, i), children: r })
+    }
+  );
+};
+export {
+  f as default
+};

package/dist/views/sidebar/sidebarContext.js

@@ -0,0 +1,13 @@
+import { createContext as e } from "react";
+const o = e({
+  openSidebar: () => {
+  },
+  closeSidebar: () => {
+  },
+  toggleSidebar: () => {
+  },
+  isOpen: !0
+});
+export {
+  o as default
+};

package/dist/views/sidebar/sidebarToggleButton.js

@@ -0,0 +1,21 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as t } from "react";
+import { UKIcon as e } from "../../components/icon/iconDictionary.js";
+import i from "./sidebarContext.js";
+import a from "../../components/iconButton/iconButton.js";
+const l = () => {
+  const o = t(i);
+  return /* @__PURE__ */ r(
+    a,
+    {
+      accessibleLabel: o.isOpen ? "Collapse Sidebar" : "Expand Sidebar",
+      icon: o.isOpen ? e.SidebarCollapse : e.SidebarExpand,
+      onClick: () => {
+        o.toggleSidebar();
+      }
+    }
+  );
+};
+export {
+  l as default
+};