trepur_components 2.3.8 → 2.3.10

package/lib/components/Collapsible/index.js

@@ -1,88 +1,87 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { useState as N, useEffect as H } from "react";
-import { HorizontalLine as b } from "../HorizontalLine/index.js";
-import { Icon as w } from "../Icon/index.js";
-import { Image as C } from "../Image/index.js";
-import { faChevronUp as E, faChevronDown as S } from "@fortawesome/fontawesome-free-solid";
-import x from "classnames";
-const U = ({
-  id: h,
-  className: p,
-  preText: a,
-  title: m,
-  subtitle: c,
-  imageProps: d,
-  children: r
-}) => {
-  const [o, g] = N(!1);
-  H(() => {
-    var i;
-    const s = document.getElementsByClassName("collapsible");
-    let e;
-    for (e = 0; e < s.length; e++)
-      (i = s[e]) == null || i.addEventListener("click", function(L) {
-        const l = this.nextElementSibling, y = l.scrollHeight.toString();
-        l.style.maxHeight === "0px" ? l.style.maxHeight = `${y}px` : l.style.maxHeight = "0px";
-      });
-  });
-  const f = x(
-    p,
-    "w-full border-b border-lightest-grey duration-300 hover:cursor-pointer transition-opactiy"
-  ), u = x(
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { createContext as w, forwardRef as o, useState as H, useMemo as T, useContext as p } from "react";
+import { Icon as I } from "../Icon/index.js";
+import { Image as S } from "../Image/index.js";
+import { faChevronDown as j, faChevronUp as L } from "@fortawesome/fontawesome-free-solid";
+import k from "clsx";
+const n = w(null), c = o(({ id: e, className: l, children: t, loading: s, ...i }, v) => {
+  const [r, m] = H(!1), y = T(
+    () => ({
+      loading: s,
+      expanded: r,
+      setExpanded: m
+    }),
+    [s, r, m]
+  );
+  return /* @__PURE__ */ a(n.Provider, { value: y, children: /* @__PURE__ */ a(
+    "div",
     {
-      "mb-4 mt-2 max-h-max": o,
-      "max-h-0": !o
-    },
-    "w-auto overflow-hidden px-4"
-  ), v = (s) => {
-    const e = s.currentTarget.nextElementSibling, i = e.scrollHeight.toString();
-    o ? e.style.maxHeight = "0px" : e.style.maxHeight = `${i}px`, g(!o);
-  };
-  return /* @__PURE__ */ n("div", { id: h, className: f, children: [
-    /* @__PURE__ */ n(
-      "div",
-      {
-        onClick: (s) => {
-          v(s);
-        },
-        className: "flex h-24 px-4 sm:pr-8",
-        children: [
-          d !== void 0 && /* @__PURE__ */ t(
-            C,
-            {
-              ...d,
-              width: 3,
-              height: 3,
-              className: " my-auto flex-none rounded-2xl"
-            }
-          ),
-          /* @__PURE__ */ n("div", { className: "mx-4 my-auto grid w-full", children: [
-            a !== void 0 && /* @__PURE__ */ t("h4", { className: "truncate text-xxs text-light-grey md:text-xs", children: a }),
-            m !== void 0 && /* @__PURE__ */ t("h4", { className: "truncate text-sm md:text-md", children: m }),
-            c !== void 0 && /* @__PURE__ */ t("h5", { className: "truncate text-xs md:text-sm", children: c })
-          ] }),
-          r !== void 0 && /* @__PURE__ */ t("div", { className: "my-auto flex-none", children: /* @__PURE__ */ t(
-            w,
-            {
-              icon: o ? E : S
-            }
-          ) })
-        ]
-      }
-    ),
-    r !== void 0 && /* @__PURE__ */ n(
-      "div",
-      {
-        className: u,
-        style: { transition: "max-height 0.2s ease-out" },
-        children: [
-          /* @__PURE__ */ t(b, { colour: "grey" }),
-          /* @__PURE__ */ t("div", { className: "pb-2 pt-4", children: r })
-        ]
-      }
-    )
-  ] });
-};
+      id: e,
+      className: "w-full rounded-2xl bg-white hover:cursor-pointer",
+      ref: v,
+      ...i,
+      children: t
+    }
+  ) });
+}), d = o(({ children: e, ...l }, t) => {
+  const { expanded: s, setExpanded: i } = p(n) || {};
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: "flex h-24 pr-4 sm:pr-8",
+      onClick: () => i == null ? void 0 : i(!s),
+      ref: t,
+      ...l,
+      children: [
+        e,
+        /* @__PURE__ */ a("div", { className: "my-auto flex-none", children: /* @__PURE__ */ a(I, { icon: s ? j : L }) })
+      ]
+    }
+  );
+}), x = o(({ children: e, ...l }, t) => /* @__PURE__ */ a("div", { className: "mx-4 my-auto grid w-full", ref: t, ...l, children: e })), C = o(({ children: e, src: l, ...t }, s) => /* @__PURE__ */ a("div", { className: "aspect-square flex-none p-4", children: /* @__PURE__ */ a(S, { src: l, className: "h-full rounded-2xl", ...t }) })), b = o(({ ...e }, l) => /* @__PURE__ */ a(
+  "p",
+  {
+    className: "text-xxs text-light-grey truncate md:text-xs",
+    ref: l,
+    ...e
+  }
+)), u = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "md:text-md truncate text-sm", ref: l, ...e })), N = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "truncate text-xs md:text-sm", ref: l, ...e })), f = o(({ children: e, ...l }, t) => {
+  const { expanded: s } = p(n) || {};
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: k(
+        "w-auto overflow-scroll px-4 transition-max-height duration-300",
+        {
+          "max-h-32": s,
+          "max-h-0": !s
+        }
+      ),
+      ref: t,
+      ...l,
+      children: /* @__PURE__ */ a("div", { className: "pb-4", children: e })
+    }
+  );
+}), h = o(({ ...e }, l) => /* @__PURE__ */ a("p", { className: "text-xs md:text-sm", ref: l, ...e }));
+c.displayName = "Collapsible";
+d.displayName = "Collapsible.Header";
+f.displayName = "Collapsible.Content";
+C.displayName = "Collapsible.Image";
+b.displayName = "Collapsible.Label";
+u.displayName = "Collapsible.Title";
+N.displayName = "Collapsible.Subtitle";
+x.displayName = "Collapsible.HeaderContent";
+h.displayName = "Collapsible.Text";
+const U = Object.assign(c, {
+  Header: d,
+  HeaderContent: x,
+  Image: C,
+  Label: b,
+  Title: u,
+  Subtitle: N,
+  Content: f,
+  Text: h
+});
 export {
   U as Collapsible
 };

package/lib/components/Counter/Counter.stories.d.ts

@@ -1,44 +1,16 @@
-import { Counter } from '.';
 import { StoryObj } from '@storybook/react';
+import { Counter } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, count, onClick }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        id: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').CounterContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        DecrementIcon: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        IncrementIcon: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Count: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element[];
     };
-    args: {};
 };
 export default meta;
 type Story = StoryObj<typeof Counter>;

package/lib/components/Counter/index.d.ts

@@ -1,6 +1,14 @@
-export interface Props {
-    id?: string;
+import { HTMLAttributes } from 'react';
+
+export interface CounterContextProps {
+    currentCount?: number;
+    setCurrentCount?: (val: number) => void;
     count?: number;
     onClick?: (count: number) => void;
 }
-export declare const Counter: ({ id, count, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Counter: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CounterContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    DecrementIcon: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    IncrementIcon: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Count: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Counter };

package/lib/components/Counter/index.js

@@ -1,31 +1,49 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { Icon as n } from "../Icon/index.js";
-import { faChevronCircleLeft as s, faChevronCircleRight as a } from "@fortawesome/fontawesome-free-solid";
-const h = ({ id: i, count: c = 0, onClick: m }) => {
-  const [e, o] = l(c);
-  return /* @__PURE__ */ r("div", { id: i, className: "z-10 inline-block rounded-lg", children: /* @__PURE__ */ t("div", { className: "flex gap-8", children: [
-    /* @__PURE__ */ r("div", { className: "my-auto cursor-pointer", children: /* @__PURE__ */ r(
-      n,
-      {
-        icon: s,
-        onClick: () => {
-          o(e - 1);
-        }
-      }
-    ) }),
-    /* @__PURE__ */ r("div", { className: "overflow-hidden text-center", children: e }),
-    /* @__PURE__ */ r("div", { className: "my-auto cursor-pointer", children: /* @__PURE__ */ r(
-      n,
-      {
-        icon: a,
-        onClick: () => {
-          o(e + 1);
-        }
-      }
-    ) })
-  ] }) });
-};
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as f, forwardRef as t, useState as I, useMemo as v, useContext as c } from "react";
+import { Icon as i } from "../Icon/index.js";
+import { faChevronCircleLeft as h, faChevronCircleRight as N } from "@fortawesome/fontawesome-free-solid";
+const r = f(null), a = t(({ children: e, count: o = 0 }, d) => {
+  const [u, s] = I(o), p = v(
+    () => ({
+      currentCount: u,
+      setCurrentCount: s
+    }),
+    [u, s]
+  );
+  return /* @__PURE__ */ n(r.Provider, { value: p, children: /* @__PURE__ */ n("div", { ref: d, className: "flex gap-6 rounded-lg ", children: e }) });
+}), m = t(() => {
+  const { setCurrentCount: e, currentCount: o = 0 } = c(r) || {};
+  return /* @__PURE__ */ n("div", { className: "my-auto cursor-pointer", children: /* @__PURE__ */ n(
+    i,
+    {
+      icon: h,
+      onClick: () => e == null ? void 0 : e(o - 1)
+    }
+  ) });
+}), C = t(() => {
+  const { setCurrentCount: e, currentCount: o = 0 } = c(r) || {};
+  return /* @__PURE__ */ n("div", { className: "my-auto cursor-pointer", children: /* @__PURE__ */ n(
+    i,
+    {
+      icon: N,
+      onClick: () => e == null ? void 0 : e(o + 1)
+    }
+  ) });
+}), l = t(
+  () => {
+    const { currentCount: e } = c(r) || {};
+    return /* @__PURE__ */ n("div", { className: "overflow-hidden text-center", children: e });
+  }
+);
+a.displayName = "Counter";
+m.displayName = "Counter.DecrementIcon";
+C.displayName = "Counter.IncrementIcon";
+l.displayName = "Counter.Count";
+const j = Object.assign(a, {
+  DecrementIcon: m,
+  IncrementIcon: C,
+  Count: l
+});
 export {
-  h as Counter
+  j as Counter
 };

package/lib/components/DetailUpdater/DetailUpdater.stories.d.ts

@@ -1,93 +1,9 @@
-import { DetailUpdater } from '.';
 import { StoryObj } from '@storybook/react';
+import { DetailUpdater } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, title, description, expandText, collapseText, ctaText, onClick, onChange, children, onSubmit, onCancel, value, }: import('.').DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {};
-    argTypes: {
-        title: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        description: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        expandText: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        collapseText: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        ctaText: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        onClick: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        fields: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-            };
-        };
-        id: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-    };
+    component: ({ id, className, title, description, expandText, collapseText, ctaText, onClick, onChange, children, onSubmit, onCancel, value, }: import('./').DetailUpdatesProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         title: string;
         description: string;

package/lib/components/DetailUpdater/index.js

@@ -1,63 +1,63 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useState as f } from "react";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as x } from "react";
 import { Button as N } from "../Button/index.js";
+import { Card as g } from "../Card/index.js";
 import "../../node_modules/keen-slider/keen-slider.min.css.js";
-const L = ({
-  id: c,
-  className: n,
-  title: a,
+const D = ({
+  id: n,
+  className: c,
+  title: d,
   description: o,
   expandText: m,
   collapseText: p,
-  ctaText: h,
-  onClick: g,
-  onChange: k,
-  children: x,
-  onSubmit: i,
+  ctaText: f,
+  onClick: k,
+  onChange: u,
+  children: h,
+  onSubmit: s,
   onCancel: l,
-  value: r
+  value: t
 }) => {
-  const [d, t] = f(!1);
-  return /* @__PURE__ */ s("div", { id: c, className: n, children: [
-    !d && /* @__PURE__ */ s("div", { className: "mx-4 py-6", children: [
-      /* @__PURE__ */ s("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ e("p", { className: "font-semiBold text-ink", children: a }),
+  const [a, r] = x(!1);
+  return /* @__PURE__ */ i(g, { id: n, className: c, children: [
+    !a && /* @__PURE__ */ i("div", { className: "mx-4 py-6", children: [
+      /* @__PURE__ */ i("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ e("p", { className: "font-semiBold text-ink", children: d }),
         /* @__PURE__ */ e(
           "p",
           {
-            className: "cursor-pointer font-semiBold text-ink underline",
+            className: "font-semiBold text-ink cursor-pointer underline",
             onClick: () => {
-              t(!0);
+              r(!0);
             },
             children: m
           }
         )
       ] }),
-      /* @__PURE__ */ e("p", { className: "text-ink", children: r !== void 0 ? r : "-" })
+      /* @__PURE__ */ e("p", { className: "text-ink", children: t !== void 0 ? t : "-" })
     ] }),
-    d && /* @__PURE__ */ s("div", { className: "mx-4 py-6", children: [
-      /* @__PURE__ */ s("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ e("p", { className: "font-semiBold text-ink", children: a }),
+    a && /* @__PURE__ */ i("div", { className: "mx-4 py-6", children: [
+      /* @__PURE__ */ i("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ e("p", { className: "font-semiBold text-ink", children: d }),
         /* @__PURE__ */ e(
           "p",
           {
-            className: "cursor-pointer font-semiBold text-ink underline",
+            className: "font-semiBold text-ink cursor-pointer underline",
             onClick: () => {
-              l == null || l(), t(!1);
+              l == null || l(), r(!1);
             },
             children: p
           }
         )
       ] }),
       /* @__PURE__ */ e("p", { className: "text-light-grey", children: o }),
-      /* @__PURE__ */ e("div", { className: "grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3", children: x }),
+      /* @__PURE__ */ e("div", { className: "grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3", children: h }),
       /* @__PURE__ */ e(N, { variant: "secondary", onClick: () => {
-        i == null || i(), t(!1);
-      }, children: h })
-    ] }),
-    /* @__PURE__ */ e("hr", { className: "text-lightest-grey shadow" })
+        s == null || s(), r(!1);
+      }, children: f })
+    ] })
   ] });
 };
 export {
-  L as DetailUpdater
+  D as DetailUpdater
 };

package/lib/components/Dialog/Dialog.stories.d.ts

@@ -3,142 +3,12 @@ import { default as React } from 'react';
 declare const meta: {
     title: string;
     component: ({ id, className, title, paragraph, dismissText, onDismissClick, primaryCta, secondaryCta, imageUrl, }: import('.').Props) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-        layout: string;
-    };
-    argTypes: {
-        id: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        onDismissClick: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            action: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        title: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        paragraph: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        dismissText: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        primaryCta: {
-            type: {
-                name: string;
-                value: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        secondaryCta: {
-            type: {
-                name: string;
-                value: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-    };
     args: {
         title: string;
         paragraph: string;
         dismissText: string;
         imageUrl: string;
         onDismissClick: import('@storybook/addon-actions').HandlerFunction;
-        primaryCta: {
-            children: string;
-            palette: string;
-        };
-        secondaryCta: {
-            children: string;
-            variant: string;
-            palette: string;
-        };
     };
 };
 export declare const _Dialog: (args: any) => React.ReactElement;

package/lib/components/Dialog/index.d.ts

@@ -1,4 +1,4 @@
-import { Props as ButtonProps } from '../Button';
+import { ButtonProps } from '../Button';
 
 export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
     title: string;