@ed.yakovich/component-library 0.0.15 → 0.0.17

package/dist/components/Accordion/context/index.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as n, useContext as c } from "react";
+const t = n({}), s = () => c(t), d = ({ model: o, children: e }) => /* @__PURE__ */ r(t.Provider, { value: { ...o }, children: e });
+export {
+  d as AccordionContextProvider,
+  s as useAccordionContext
+};

package/dist/components/Accordion/index.js

@@ -0,0 +1,38 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c as B } from "../../index-CIJ0X8ia.js";
+import { useAccordionContext as F } from "./context/index.js";
+const $ = (n) => {
+  const { children: a, isHidden: d, componentId: i = "", label: c = "", description: r = "", labelSecondary: s = "", onClick: t, tone: p = "", collapsed: b } = n, l = F(), C = l == null ? void 0 : l.isHidden, V = (l == null ? void 0 : l.label) || "", m = (l == null ? void 0 : l.description) || "", S = (l == null ? void 0 : l.labelSecondary) || "", k = (l == null ? void 0 : l.onClick) || "", u = (l == null ? void 0 : l.tone) || "", y = l == null ? void 0 : l.collapsed, H = () => ({
+    isHiddenVal: C || d,
+    labelVal: V || c,
+    descriptionVal: m || r,
+    labelSecondaryVal: S || s,
+    onClickVal: k || t,
+    toneVal: u || p,
+    collapsedVal: y || b
+  }), { isHiddenVal: A, labelVal: f, descriptionVal: g, labelSecondaryVal: h, onClickVal: j, toneVal: v, collapsedVal: o } = H();
+  return A ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-component-id": `Accordion--${i}`,
+      className: "border-3 border-blue-500 border-solid rounded-lg @container/accordion",
+      children: /* @__PURE__ */ e(
+        B,
+        {
+          label: f,
+          labelSecondary: h,
+          description: g,
+          onClick: j,
+          tone: v,
+          ...o && {
+            collapsed: !!o
+          },
+          children: a
+        }
+      )
+    }
+  );
+};
+export {
+  $ as Accordion
+};

package/dist/components/Accordion/types/index.js

@@ -0,0 +1 @@
+

package/dist/components/Cart/index.js

@@ -0,0 +1,34 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { P as d } from "../../index-CIJ0X8ia.js";
+const o = (l) => {
+  const { backUrl: r, nextUrl: t } = l;
+  return /* @__PURE__ */ e("nav", { "data-component-id": "Cart", className: "mt-4 border-t-3 border-blue-500 border-solid @container/cart", children: /* @__PURE__ */ e("div", { className: "w-full flex justify-center @lg/cart:justify-end", children: /* @__PURE__ */ s("div", { className: "flex justify-center", children: [
+    /* @__PURE__ */ e("div", { className: "px-12 py-3 @lg/cart:border-l-3 border-blue-500 border-solid", children: /* @__PURE__ */ e(
+      d,
+      {
+        size: "xs",
+        display: "menu",
+        tone: "info",
+        type: "button",
+        disabled: !r,
+        href: r,
+        children: /* @__PURE__ */ e("strong", { children: "Back" })
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "px-12 py-3 border-l-3 border-blue-500 border-solid", children: /* @__PURE__ */ e(
+      d,
+      {
+        size: "xs",
+        display: "menu",
+        tone: "info",
+        type: "button",
+        disabled: !t,
+        href: t,
+        children: /* @__PURE__ */ e("strong", { children: "Next" })
+      }
+    ) })
+  ] }) }) });
+};
+export {
+  o as Cart
+};

package/dist/components/EquipmentSummary/context/index.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as n, useContext as m } from "react";
+const e = n({}), c = () => m(e), i = ({
+  model: t,
+  children: o
+}) => /* @__PURE__ */ r(e.Provider, { value: { ...t }, children: o });
+export {
+  i as EquipmentSummaryContextProvider,
+  c as useEquipmentSummaryContext
+};

package/dist/components/EquipmentSummary/index.js

@@ -0,0 +1,65 @@
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { c as P, b as S, a as j, d as E } from "../../index-CIJ0X8ia.js";
+import { useEquipmentSummaryContext as $ } from "./context/index.js";
+const I = (m) => {
+  const {
+    isHidden: o,
+    componentId: u = "",
+    heading: c = "",
+    description: p = "",
+    isLoading: h = !1,
+    equipmentList: g = []
+  } = m, e = $(), q = e == null ? void 0 : e.isHidden, L = (e == null ? void 0 : e.heading) || "", b = (e == null ? void 0 : e.description) || "", r = (e == null ? void 0 : e.equipmentList) || [], f = (e == null ? void 0 : e.isLoading) || "", V = () => ({
+    isHiddenVal: q || o,
+    headingVal: L || c,
+    descriptionVal: b || p,
+    isLoadingVal: f || h,
+    equipmentListVal: r.length > 0 ? r : g
+  }), { isHiddenVal: v, headingVal: y, descriptionVal: x, isLoadingVal: C, equipmentListVal: t } = V(), N = (n) => {
+    switch (n) {
+      case "return":
+        return "caution";
+      case "keep":
+        return "positive";
+      default:
+        return "neutral";
+    }
+  };
+  return v ? null : /* @__PURE__ */ i(
+    "div",
+    {
+      "data-component-id": `EquipmentSummary--${u}`,
+      className: "border-3 border-blue-500 border-solid rounded-lg p-8 @container/equipmentsummary",
+      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
+        P,
+        {
+          label: y,
+          description: x,
+          tone: "neutral2-inverse",
+          collapsed: !1,
+          children: /* @__PURE__ */ i("div", { children: C ? /* @__PURE__ */ i(S, { display: "inline", type: "dots" }) : /* @__PURE__ */ i("div", { children: t.length > 0 && /* @__PURE__ */ i("ul", { className: "space-y-4", children: t.map(({ icon: n, title: d, description: l, actionType: s }, H) => /* @__PURE__ */ a("li", { children: [
+            /* @__PURE__ */ a("div", { className: "@xs/equipmentsummary:flex @xs/equipmentsummary:justify-between", children: [
+              /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+                n && /* @__PURE__ */ i(j, { name: n, tone: "info", theme: "outline", size: "sm" }),
+                d && /* @__PURE__ */ i("span", { children: d })
+              ] }),
+              s && /* @__PURE__ */ i("div", { className: "ml-8 mb-2 @xs/equipmentsummary:ml-0 @xs/equipmentsummary:mb-0", children: /* @__PURE__ */ i(
+                E,
+                {
+                  label: s,
+                  size: "md",
+                  tone: N(s),
+                  children: s
+                }
+              ) })
+            ] }),
+            l && /* @__PURE__ */ i("p", { className: "ml-8 text-xs", children: /* @__PURE__ */ i("em", { children: l }) })
+          ] }, `${d}-${H}`)) }) }) })
+        }
+      ) })
+    }
+  );
+};
+export {
+  I as EquipmentSummary
+};

package/dist/components/EquipmentSummary/types/index.js

@@ -0,0 +1 @@
+

package/dist/components/Grid/index.js

@@ -0,0 +1,19 @@
+import { jsx as o } from "react/jsx-runtime";
+const p = (d) => {
+  const { flushX: i, flushY: c, maxWidth: e = "", maxColAmount: r = "1", colSpan: s = "", gapX: l = "gap-x-6", gapY: t = "gap-y-6", children: g } = d, a = () => {
+    switch (r) {
+      case "4":
+        return "@2xl/gridcomp:grid-cols-4";
+      case "3":
+        return "@2xl/gridcomp:grid-cols-3";
+      case "2":
+        return "@2xl/gridcomp:grid-cols-2";
+      default:
+        return "@2xl/gridcomp:grid-cols-1";
+    }
+  };
+  return /* @__PURE__ */ o("section", { "data-component-id": "Grid", className: "@container/gridcomp", children: /* @__PURE__ */ o("div", { className: `w-full mx-auto grid grid-cols-1 ${e} ${parseInt(r) > 2 ? "@md/gridcomp:grid-cols-2" : "@md/gridcomp:grid-cols-1"} ${a()} ${l} ${t} ${s} ${i ? "" : "px-4"} ${c ? "" : "py-4"}`, children: g }) });
+};
+export {
+  p as Grid
+};

package/dist/components/HeroBanner/context/index.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as n, useContext as x } from "react";
+const e = n({}), a = () => x(e), u = ({ model: t, children: o }) => /* @__PURE__ */ r(e.Provider, { value: { ...t }, children: o });
+export {
+  u as HeroBannerContextProvider,
+  a as useHeroBannerContext
+};

package/dist/components/HeroBanner/index.js

@@ -0,0 +1,33 @@
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
+import { a as c } from "../../index-CIJ0X8ia.js";
+import { useHeroBannerContext as j } from "./context/index.js";
+const z = (h) => {
+  const { isHidden: m, componentId: g = "", icon: p = "", heading: x = "", description: b = "", listData: u = [] } = h, e = j(), V = e == null ? void 0 : e.isHidden, f = (e == null ? void 0 : e.icon) || "", H = (e == null ? void 0 : e.heading) || "", C = (e == null ? void 0 : e.description) || "", r = (e == null ? void 0 : e.listData) || [], N = () => ({
+    isHiddenVal: V || m,
+    iconVal: f || p,
+    headingVal: H || x,
+    descriptionVal: C || b,
+    listDataVal: r.length > 0 ? r : u
+  }), { isHiddenVal: D, iconVal: l, headingVal: o, descriptionVal: s, listDataVal: t } = N();
+  return D ? null : /* @__PURE__ */ n(
+    "div",
+    {
+      "data-component-id": `HeroBanner--${g}`,
+      className: "border-3 border-blue-500 border-solid rounded-lg p-8 @container/herobanner",
+      children: /* @__PURE__ */ a("div", { className: "@lg/herobanner:flex @lg/herobanner:justify-between gap-2", children: [
+        /* @__PURE__ */ a("div", { children: [
+          l && /* @__PURE__ */ n(c, { name: l, tone: "info", theme: "outline", size: "lg" }),
+          o && /* @__PURE__ */ n("h2", { className: "text-xl @xl/herobanner:text-2xl @3xl/herobanner:text-4xl", children: /* @__PURE__ */ n("strong", { children: o }) }),
+          s && /* @__PURE__ */ n("p", { className: "text-xs", children: s })
+        ] }),
+        t.length > 0 && /* @__PURE__ */ n("div", { className: "@lg/herobanner:w-[250px] @lg/herobanner:shrink-0", children: /* @__PURE__ */ n("ul", { children: t.map(({ icon: d, description: i }, v) => /* @__PURE__ */ a("li", { className: "flex gap-2", children: [
+          d && /* @__PURE__ */ n(c, { name: d, tone: "info", theme: "outline", size: "sm" }),
+          i && /* @__PURE__ */ n("span", { children: i })
+        ] }, `${i}-${v}`)) }) })
+      ] })
+    }
+  );
+};
+export {
+  z as HeroBanner
+};

package/dist/components/HeroBanner/types/index.js

@@ -0,0 +1 @@
+

package/dist/components/InfoBanner/index.js

@@ -1,6 +1,26 @@
-import "react/jsx-runtime";
-import { I as p } from "../../index-D9BZSjMp.js";
-import "./context/index.js";
+import { jsx as e, jsxs as V } from "react/jsx-runtime";
+import { a as u } from "../../index-CIJ0X8ia.js";
+import { useInfoBannerContext as N } from "./context/index.js";
+const I = (t) => {
+  const { isHidden: a, componentId: d = "", heading: r = "", description: c = "", icon: l = "" } = t, n = N(), m = n == null ? void 0 : n.isHidden, h = (n == null ? void 0 : n.icon) || "", p = (n == null ? void 0 : n.heading) || "", g = (n == null ? void 0 : n.description) || "", f = () => ({
+    isHiddenVal: m || a,
+    iconVal: h || l,
+    headingVal: p || r,
+    descriptionVal: g || c
+  }), { isHiddenVal: x, iconVal: i, headingVal: s, descriptionVal: o } = f();
+  return x ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-component-id": `InfoBanner--${d}`,
+      className: "bg-blue-500 p-4 text-white @container/infobanner",
+      children: /* @__PURE__ */ e("div", { className: "text-center", children: /* @__PURE__ */ V("div", { className: "space-y-1", children: [
+        i && /* @__PURE__ */ e(u, { name: i, tone: "info", theme: "outline", size: "md" }),
+        s && /* @__PURE__ */ e("div", { className: "text-center @lg/infobanner:px-14", children: /* @__PURE__ */ e("h2", { className: "text-3xl", children: /* @__PURE__ */ e("strong", { children: s }) }) }),
+        o && /* @__PURE__ */ e("p", { className: "text-xs mb-2", children: /* @__PURE__ */ e("strong", { children: o }) })
+      ] }) })
+    }
+  );
+};
 export {
-  p as InfoBanner
+  I as InfoBanner
 };

package/dist/components/Nav/index.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { P as o } from "../../index-CIJ0X8ia.js";
+const d = (r) => {
+  const { pages: t } = r;
+  return /* @__PURE__ */ e("nav", { "data-component-id": "Nav", className: "p-6", children: /* @__PURE__ */ e("div", { className: "flex justify-center gap-4", children: t.map(({ name: n, url: i }, s) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+    o,
+    {
+      size: "xs",
+      display: "menu",
+      tone: "info",
+      type: "button",
+      href: i,
+      children: /* @__PURE__ */ e("strong", { children: n })
+    }
+  ) }, `${n}-${s}`)) }) });
+};
+export {
+  d as Nav
+};

package/dist/components/OfferCards/context/index.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as n, useContext as s } from "react";
+const e = n({}), C = () => s(e), c = ({ model: t, children: r }) => /* @__PURE__ */ o(e.Provider, { value: { ...t }, children: r });
+export {
+  c as OfferCardsContextProvider,
+  C as useOfferCardsContext
+};

package/dist/components/OfferCards/index.js

@@ -0,0 +1,30 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { a as N, b as $ } from "../../index-CIJ0X8ia.js";
+import b from "./subComponents/OfferCard.js";
+import { useOfferCardsContext as j } from "./context/index.js";
+const z = (o) => {
+  const {
+    isHidden: t,
+    componentId: c = "",
+    icon: f = "",
+    heading: m = "",
+    isLoading: g = !1,
+    offerCardList: h = []
+  } = o, i = j(), p = i == null ? void 0 : i.isHidden, C = (i == null ? void 0 : i.icon) || "", L = (i == null ? void 0 : i.heading) || "", V = (i == null ? void 0 : i.isLoading) || "", a = (i == null ? void 0 : i.offerCardList) || [], x = i == null ? void 0 : i.handleOfferCardAction, u = () => ({
+    isHiddenVal: p || t,
+    iconVal: C || f,
+    headingVal: L || m,
+    isLoadingVal: V || g,
+    offerCardListVal: a.length > 0 ? a : h
+  }), { isHiddenVal: O, iconVal: n, headingVal: d, isLoadingVal: H, offerCardListVal: r } = u();
+  return O ? null : /* @__PURE__ */ l("div", { "data-component-id": `OfferCards--${c}`, className: "@container/offercards", children: [
+    (d || n) && /* @__PURE__ */ l("div", { className: "mb-4 flex items-center gap-2 mt-10", children: [
+      n && /* @__PURE__ */ s(N, { name: n, tone: "expressive", theme: "fill", size: "md" }),
+      d && /* @__PURE__ */ s("h2", { className: "text-xl @2xl/offercards:text-2xl", children: /* @__PURE__ */ s("strong", { children: d }) })
+    ] }),
+    H ? /* @__PURE__ */ s($, { display: "inline", type: "dots" }) : /* @__PURE__ */ s("div", { children: r.length > 0 && /* @__PURE__ */ s("ul", { className: "grid grid-cols-1 gap-4 @xl/offercards:grid-cols-2 @3xl/offercards:grid-cols-3", children: r.map((e, v) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(b, { ...e, handleOfferCardAction: x }) }, `${e == null ? void 0 : e.id}-${v}`)) }) })
+  ] });
+};
+export {
+  z as OfferCards
+};

package/dist/components/OfferCards/subComponents/OfferCard.js

@@ -0,0 +1,61 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { b as N, a as h, P as v } from "../../../index-CIJ0X8ia.js";
+const P = (f) => {
+  const {
+    isLoading: p = !1,
+    id: s = "",
+    icon: n = "",
+    heading: a = "",
+    description: i = "",
+    iconList: r = [],
+    price: d = "",
+    buttonLabel: o = "",
+    buttonHref: c = "",
+    buttonDisabled: x,
+    perMonth: b = !1,
+    handleOfferCardAction: u = () => {
+    }
+  } = f;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-component-id": `OfferCard--${s}`,
+      className: "border-3 border-blue-500 border-solid rounded-lg flex flex-col bg-white h-full text-center relative",
+      children: [
+        p && /* @__PURE__ */ e("div", { className: "absolute top-2 left-2", children: /* @__PURE__ */ e(N, { display: "inline", type: "spinner" }) }),
+        /* @__PURE__ */ l("div", { className: "grow p-4", children: [
+          n && /* @__PURE__ */ e(h, { name: n, tone: "info", theme: "outline", size: "md" }),
+          a && /* @__PURE__ */ e("h3", { className: "text-lg", children: /* @__PURE__ */ e("strong", { children: a }) }),
+          i && /* @__PURE__ */ e("p", { className: "text-xs", children: i }),
+          d && /* @__PURE__ */ l("p", { className: "mt-2", children: [
+            /* @__PURE__ */ e("span", { className: "text-5xl", children: /* @__PURE__ */ l("strong", { children: [
+              "$",
+              Math.floor(d)
+            ] }) }),
+            b && /* @__PURE__ */ e("span", { className: "text-lg", children: "/mo" })
+          ] }),
+          r.length > 0 && /* @__PURE__ */ e("ul", { className: "mt-4 list-disc text-left", children: r.map(({ icon: t, description: m }, g) => /* @__PURE__ */ l("li", { className: "flex gap-2", children: [
+            t && /* @__PURE__ */ e(h, { name: t, tone: "info", theme: "outline", size: "xs" }),
+            m && /* @__PURE__ */ e("p", { className: "text-xs", children: m })
+          ] }, `${t}-${g}`)) })
+        ] }),
+        o && /* @__PURE__ */ e("div", { className: "mt-8 bg-blue-500 p-2", children: /* @__PURE__ */ e(
+          v,
+          {
+            size: "xs",
+            display: "link",
+            tone: "info",
+            type: "button",
+            className: "text-white",
+            disabled: x,
+            ...c ? { href: c } : { onClick: () => u(s) },
+            children: o
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  P as default
+};

package/dist/components/OfferCards/types/index.js

@@ -0,0 +1 @@
+

package/dist/components/SaleBanner/context/index.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as r, useContext as x } from "react";
+const e = r({}), s = () => x(e), u = ({ model: t, children: n }) => /* @__PURE__ */ o(e.Provider, { value: { ...t }, children: n });
+export {
+  u as SaleBannerContextProvider,
+  s as useSaleBannerContext
+};

package/dist/components/SaleBanner/index.js

@@ -0,0 +1,58 @@
+import { jsx as l, jsxs as n } from "react/jsx-runtime";
+import { P as B } from "../../index-CIJ0X8ia.js";
+import { useSaleBannerContext as S } from "./context/index.js";
+const F = (o) => {
+  const { isHidden: m, componentId: h = "", heading: x = "", description: p = "", disclaimer: b = "", normalPrice: g = 0, salePrice: u = 0, linkText: V = "", linkUrl: N = "" } = o, e = S(), P = e == null ? void 0 : e.isHidden, k = (e == null ? void 0 : e.heading) || "", f = (e == null ? void 0 : e.description) || "", v = (e == null ? void 0 : e.disclaimer) || "", C = (e == null ? void 0 : e.normalPrice) || "", w = (e == null ? void 0 : e.salePrice) || "", H = (e == null ? void 0 : e.linkText) || "", T = (e == null ? void 0 : e.linkUrl) || "", U = () => ({
+    isHiddenVal: P || m,
+    headingVal: k || x,
+    descriptionVal: f || p,
+    disclaimerVal: v || b,
+    normalPriceVal: C || g,
+    salePriceVal: w || u,
+    linkTextVal: H || V,
+    linkUrlVal: T || N
+  }), { isHiddenVal: y, headingVal: a, descriptionVal: i, disclaimerVal: r, normalPriceVal: s, salePriceVal: d, linkTextVal: t, linkUrlVal: c } = U();
+  return y ? null : /* @__PURE__ */ l(
+    "div",
+    {
+      "data-component-id": `SaleBanner--${h}`,
+      className: "relative border-3 border-blue-500 border-solid rounded-lg p-8 @container/salebanner",
+      children: /* @__PURE__ */ n("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ n("div", { className: "space-y-2 @lg/salebanner:w-[50%] @xl/salebanner:w-[60%] @2xl/salebanner:w-[70%]", children: [
+          a && /* @__PURE__ */ l("h2", { className: "text-2xl @xl/salebanner:text-3xl @3xl/salebanner:text-5xl", children: /* @__PURE__ */ l("strong", { children: a }) }),
+          i && /* @__PURE__ */ l("p", { className: "text-md", children: i })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "text-center", children: /* @__PURE__ */ n("div", { className: "border-3 border-blue-500 border-solid rounded-full w-[200px] h-[200px] p-[40px] mx-auto @lg/salebanner:absolute @lg/salebanner:right-12 @lg/salebanner:top-12", children: [
+          s && /* @__PURE__ */ n("p", { className: "line-through text-md", children: [
+            "$",
+            s,
+            "/mo"
+          ] }),
+          d && /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ l("h2", { className: "text-6xl", children: /* @__PURE__ */ n("strong", { children: [
+              "$",
+              d
+            ] }) }),
+            /* @__PURE__ */ l("span", { className: "text-xl", children: /* @__PURE__ */ l("strong", { children: "/mo" }) })
+          ] })
+        ] }) }),
+        t && c && /* @__PURE__ */ l("div", { className: "text-center bg-blue-500 rounded-full w-[200px] mx-auto px-2", children: /* @__PURE__ */ l(
+          B,
+          {
+            size: "xs",
+            display: "fill",
+            tone: "info",
+            type: "button",
+            className: "text-white font-bold",
+            href: c,
+            children: t
+          }
+        ) }),
+        /* @__PURE__ */ l("div", { className: "@lg/salebanner:w-[50%]", children: r && /* @__PURE__ */ l("p", { className: "text-xs", children: r }) })
+      ] })
+    }
+  );
+};
+export {
+  F as SaleBanner
+};

package/dist/components/SaleBanner/types/index.js

@@ -0,0 +1 @@
+