trepur_components 2.3.35 → 2.3.37

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

@@ -5,6 +5,9 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & import('react').RefAttributes<HTMLAnchorElement>> & {
         Image: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<import('../Image').ImageProps> & import('../Image').ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+        Images: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
+            asCarousel?: boolean | undefined;
+        } & import('react').RefAttributes<HTMLDivElement>>;
         Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
         Title: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
         Subtitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -3,6 +3,9 @@ import { HTMLAttributes } from 'react';
 
 declare const ImageCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & import('react').RefAttributes<HTMLAnchorElement>> & {
     Image: import('react').ForwardRefExoticComponent<HTMLAttributes<ImageProps> & ImageProps & import('react').RefAttributes<HTMLImageElement>>;
+    Images: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        asCarousel?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
     Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
     Title: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     Subtitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

package/lib/components/ImageCard/index.js

@@ -1,30 +1,46 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { Image as p } from "../Image/index.js";
-import C from "clsx";
-const d = m(({ className: a, children: e, onClick: r, ...g }, c) => /* @__PURE__ */ t("a", { ref: c, className: "", href: "", onClick: r, ...g, children: /* @__PURE__ */ t(
-  "div",
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Image as C } from "../Image/index.js";
+import N from "clsx";
+import { Carousel as s } from "../Carousel/index.js";
+const l = r(({ className: e, children: a, onClick: t, ...p }, I) => /* @__PURE__ */ m(
+  "a",
   {
-    className: C(
-      "grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow",
-      a
-    ),
-    children: e
+    ref: I,
+    className: "inline-block h-full",
+    href: "",
+    onClick: t,
+    ...p,
+    children: /* @__PURE__ */ m(
+      "div",
+      {
+        className: N(
+          "grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow",
+          e
+        ),
+        children: a
+      }
+    )
   }
-) })), s = m(({ src: a, ...e }) => /* @__PURE__ */ t("div", { className: "h-64 object-cover", children: /* @__PURE__ */ t(p, { src: a, ...e }) })), o = m(({ children: a, ...e }, r) => /* @__PURE__ */ t("div", { className: "px-2 pb-4 pt-2", ref: r, ...e, children: a })), i = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-lg", ref: e, ...a })), l = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-sm", ref: e, ...a })), n = m(({ ...a }, e) => /* @__PURE__ */ t("p", { className: "text-md pt-2", ref: e, ...a }));
-d.displayName = "ImageCard";
-s.displayName = "ImageCard.Image";
-i.displayName = "ImageCard.Title";
-l.displayName = "ImageCard.Subtitle";
+)), d = r(({ children: e, asCarousel: a = !1, ...t }) => a ? /* @__PURE__ */ m(s, { perView: 1, spacing: 0, className: "h-64", loop: !0, ...t, children: /* @__PURE__ */ m(s.Content, { children: /* @__PURE__ */ m(s.Slides, { children: e }) }) }) : /* @__PURE__ */ m("div", { children: e[0] })), i = r(({ src: e, ...a }) => (
+  // <div className="keen-slider__slide h-64">
+  /* @__PURE__ */ m("div", { className: "h-64", children: /* @__PURE__ */ m(C, { className: "object-cover", src: e, ...a }) })
+)), o = r(({ children: e, ...a }, t) => /* @__PURE__ */ m("div", { className: "px-2 pb-4 pt-2", ref: t, ...a, children: e })), n = r(({ ...e }, a) => /* @__PURE__ */ m("p", { className: "text-lg", ref: a, ...e })), c = r(({ ...e }, a) => /* @__PURE__ */ m("p", { className: "text-sm", ref: a, ...e })), g = r(({ ...e }, a) => /* @__PURE__ */ m("p", { className: "line-clamp-4 pt-4", ref: a, ...e }));
+l.displayName = "ImageCard";
+i.displayName = "ImageCard.Image";
+d.displayName = "ImageCard.Images";
+n.displayName = "ImageCard.Title";
+c.displayName = "ImageCard.Subtitle";
 o.displayName = "ImageCard.Content";
-n.displayName = "ImageCard.Text";
-const b = Object.assign(d, {
-  Image: s,
+g.displayName = "ImageCard.Text";
+const y = Object.assign(l, {
+  Image: i,
+  Images: d,
   Content: o,
-  Title: i,
-  Subtitle: l,
-  Text: n
+  Title: n,
+  Subtitle: c,
+  Text: g
 });
 export {
-  b as ImageCard
+  y as ImageCard
 };

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

@@ -18,3 +18,4 @@ type Story = StoryObj<typeof SplitCard>;
 export declare const Default: Story;
 export declare const swapDesktop: Story;
 export declare const swapMobile: Story;
+export declare const loading: Story;

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

@@ -4,6 +4,7 @@ export interface SplitCardContextProps {
     swapDesktop?: boolean;
     swapMobile?: boolean;
     isMd?: boolean;
+    loading?: boolean;
 }
 declare const SplitCard: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & SplitCardContextProps & import('react').RefAttributes<HTMLDivElement>> & {
     LeftContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/components/SplitCard/index.js

@@ -1,85 +1,92 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as u, forwardRef as o, useMemo as N, useContext as c } from "react";
-import h from "../../utils/matchMedia.js";
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+import { createContext as S, forwardRef as n, useMemo as v, useContext as u } from "react";
+import w from "../../utils/matchMedia.js";
 import { Screens as y } from "../../utils/screens.js";
-import d from "clsx";
-const a = u(null), g = o(({ className: r, children: l, swapDesktop: t, swapMobile: e, ...i }, s) => {
-  const f = `(min-width: ${y.md})`, m = h(f), S = N(
-    () => ({
-      swapDesktop: t,
-      swapMobile: e,
-      isMd: m
-    }),
-    [t, e, m]
-  );
-  return /* @__PURE__ */ n(a.Provider, { value: S, children: /* @__PURE__ */ n(
-    "div",
-    {
-      ref: s,
-      ...i,
-      className: d("grid grid-cols-1 md:grid-cols-2", r),
-      children: l
-    }
-  ) });
-}), x = o(({ className: r, children: l, ...t }, e) => {
-  const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
-  return /* @__PURE__ */ n(
+import o from "clsx";
+const p = S(null), g = n(
+  ({ className: r, children: a, swapDesktop: t, swapMobile: l, loading: s, ...i }, d) => {
+    const C = `(min-width: ${y.md})`, c = w(C), h = v(
+      () => ({
+        swapDesktop: t,
+        swapMobile: l,
+        isMd: c,
+        loading: s
+      }),
+      [t, l, c, s]
+    );
+    return /* @__PURE__ */ e(p.Provider, { value: h, children: /* @__PURE__ */ e(
+      "div",
+      {
+        ref: d,
+        ...i,
+        className: o("grid grid-cols-1 md:grid-cols-2", r),
+        children: a
+      }
+    ) });
+  }
+), f = n(({ className: r, children: a, ...t }, l) => {
+  const { swapDesktop: s, swapMobile: i, isMd: d, loading: m } = u(p) || {};
+  return m ? /* @__PURE__ */ e("div", { className: "pl-20 px-12 py-12 h-full w-full flex", children: /* @__PURE__ */ e("div", { className: "m-auto h-80 border-4 rounded border-gray-300 animate-pulse gap-4 grid w-full" }) }) : /* @__PURE__ */ e(
     "div",
     {
-      ref: e,
+      ref: l,
       ...t,
-      className: d(
+      className: o(
         "mx-auto flex items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
-          "md:order-last lg:pl-12 lg:pr-20": i,
-          "lg:pl-20 lg:pr-12": !i,
-          "order-last": !p && s
+          "md:order-last lg:pl-12 lg:pr-20": s,
+          "lg:pl-20 lg:pr-12": !s,
+          "order-last": !d && i
         },
         r
       ),
-      children: l
+      children: a
     }
   );
-}), C = o(({ className: r, children: l, ...t }, e) => {
-  const { swapDesktop: i, swapMobile: s, isMd: p } = c(a) || {};
-  return /* @__PURE__ */ n(
+}), x = n(({ className: r, children: a, ...t }, l) => {
+  const { swapDesktop: s, swapMobile: i, isMd: d, loading: m } = u(p) || {};
+  return m ? /* @__PURE__ */ e("div", { className: "h-full w-full flex", children: /* @__PURE__ */ N("div", { className: "m-auto gap-4 grid w-10/12", children: [
+    /* @__PURE__ */ e("div", { className: "mx-auto h-8 bg-gray-300 rounded-full w-40 animate-pulse" }),
+    /* @__PURE__ */ e("div", { className: "h-6 bg-gray-300 rounded-full w-full animate-pulse" }),
+    /* @__PURE__ */ e("div", { className: "h-6 bg-gray-300 rounded-full w-full animate-pulse" })
+  ] }) }) : /* @__PURE__ */ e(
     "div",
     {
-      ref: e,
+      ref: l,
       ...t,
-      className: d(
+      className: o(
         "flex h-full items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
-          "md:order-first lg:pl-20 lg:pr-12": i,
-          "lg:pl-12 lg:pr-20": !i,
-          "order-first": !p && s
+          "md:order-first lg:pl-20 lg:pr-12": s,
+          "lg:pl-12 lg:pr-20": !s,
+          "order-first": !d && i
         },
         r
       ),
-      children: l
+      children: a
     }
   );
-}), M = o(({ className: r, children: l, ...t }, e) => /* @__PURE__ */ n(
+}), b = n(({ className: r, children: a, ...t }, l) => /* @__PURE__ */ e(
   "p",
   {
-    ref: e,
-    className: d(
+    ref: l,
+    className: o(
       "items-center font-semibold tracking-wider md:text-4xl lg:text-6xl",
       r
     ),
     ...t,
-    children: l
+    children: a
   }
-)), v = o(({ className: r, children: l, ...t }, e) => /* @__PURE__ */ n("p", { ref: e, className: d("text-lg", r), ...t, children: l }));
+)), M = n(({ className: r, children: a, ...t }, l) => /* @__PURE__ */ e("p", { ref: l, className: o("text-lg", r), ...t, children: a }));
 g.displayName = "SplitCard";
-x.displayName = "SplitCard.LeftContent";
-C.displayName = "SplitCard.RightContent";
-const j = Object.assign(g, {
-  LeftContent: x,
-  RightContent: C,
-  Title: M,
-  Text: v
+f.displayName = "SplitCard.LeftContent";
+x.displayName = "SplitCard.RightContent";
+const z = Object.assign(g, {
+  LeftContent: f,
+  RightContent: x,
+  Title: b,
+  Text: M
 });
 export {
-  j as SplitCard
+  z as SplitCard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.35",
+  "version": "2.3.37",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,
@@ -50,6 +50,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",