linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Card/MultipleNews/MultiNews.stories.jsx

@@ -0,0 +1,104 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { OrientationEnum } from "../../../utils/enums";
+import Card from "../card";
+var meta = {
+    title: "Components/Cards/MultiNews",
+    component: Card,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        orientation: {
+            control: "select",
+            options: [OrientationEnum.horizontal, OrientationEnum.vertical],
+        },
+        mediaPosition: {
+            control: "select",
+            options: ["left", "right", "top", "middle", "bottom"],
+            description: "For horizontal: use left/right. For vertical: use top/middle/bottom",
+        },
+        theme: {
+            table: {
+                disable: true,
+            },
+        },
+        altText: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            // Dynamically update mediaPosition options based on orientation
+            var orientation = context.args.orientation;
+            if (orientation === OrientationEnum.horizontal) {
+                if (context.argTypes.mediaPosition) {
+                    context.argTypes.mediaPosition.options = ["left", "right"];
+                }
+                // Reset mediaPosition if it's not valid for horizontal
+                if (context.args.mediaPosition &&
+                    !["left", "right"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "left";
+                }
+            }
+            else if (orientation === OrientationEnum.vertical) {
+                if (context.argTypes.mediaPosition) {
+                    context.argTypes.mediaPosition.options = ["top", "middle", "bottom"];
+                }
+                // Reset mediaPosition if it's not valid for vertical
+                if (context.args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "top";
+                }
+            }
+            return <Story {...context.args}/>;
+        },
+    ],
+};
+export default meta;
+var baseCardArgs = {
+    type: "multipleNews",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        short_description: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var CardHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+};
+export var CardHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+};
+export var CardVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+};
+export var CardVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+};
+export var CardVerticalMiddle = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+};

package/dist/src/components/Card/PostByCategory/PostByCategory.jsx

@@ -0,0 +1,60 @@
+import LuImage from "../../Images/LuImage";
+import Link from "next/link";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { Button } from "../../Button/Button/Button";
+export var PostByCategory = function (_a) {
+    var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
+    // Normalize mediaPosition based on orientation
+    var safeMediaPosition = orientation === "horizontal"
+        ? mediaPosition === "left" || mediaPosition === "right"
+            ? mediaPosition
+            : "right"
+        : mediaPosition === "top" || mediaPosition === "bottom"
+            ? mediaPosition
+            : "top";
+    // Common card media component to avoid duplication
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<LuImage src={image} width={240} height={240} className={"!rounded-lg ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
+    };
+    // Common content section component
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<div className={"flex flex-col !gap-1 ".concat(className, " ")}>
+      <Heading variant="h4-600" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0")}>
+        {item === null || item === void 0 ? void 0 : item.title}
+      </Heading>
+      <Body variant="body-md" className={" ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+        {item === null || item === void 0 ? void 0 : item.description}
+      </Body>
+    </div>);
+    };
+    // Common button component
+    var CardButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<Link href={href || "#"} passHref>
+      <Button endIcon={"angle-right"} size="sm" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " ").concat(className)}>
+        {btnLabel}
+      </Button>
+    </Link>);
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"!p-5 rounded-xl grid grid-cols-1 sm:grid-cols-3 max-w-5xl !gap-5 items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <CardMedia className={"".concat(safeMediaPosition === "right" && " order-last", " w-full aspect-5/4 sm:aspect-square  object-cover")}/>
+        <div className="flex flex-col !gap-2 md:!gap-5 sm:col-span-2   h-full justify-center">
+          <CardContent />
+          <CardButton />
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"!p-5 sm:p-8 rounded-xl flex flex-col !gap-5 max-w-[480px]  shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 ")}>
+        <CardMedia className="w-full h-full aspect-5/4 object-cover"/>
+        <CardContent className="h-20"/>
+      </div>
+      <CardButton />
+    </div>);
+};

package/dist/src/components/Card/PostByCategory/PostByCategory.stories.jsx

@@ -0,0 +1,106 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { OrientationEnum } from "../../../utils/enums";
+import Card from "../card";
+var meta = {
+    title: "Components/Cards/PostByCategory",
+    component: Card,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        orientation: {
+            control: "select",
+            options: [OrientationEnum.horizontal, OrientationEnum.vertical],
+        },
+        mediaPosition: {
+            control: "select",
+            options: ["left", "right", "top", "middle", "bottom"],
+            description: "For horizontal: use left/right. For vertical: use top/middle/bottom",
+        },
+        theme: {
+            table: {
+                disable: true,
+            },
+        },
+        altText: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            // Dynamically update mediaPosition options based on orientation
+            var orientation = context.args.orientation;
+            if (orientation === OrientationEnum.horizontal) {
+                if (context.argTypes.mediaPosition) {
+                    context.argTypes.mediaPosition.options = ["left", "right"];
+                }
+                // Reset mediaPosition if it's not valid for horizontal
+                if (context.args.mediaPosition &&
+                    !["left", "right"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "left";
+                }
+            }
+            else if (orientation === OrientationEnum.vertical) {
+                if (context.argTypes.mediaPosition) {
+                    context.argTypes.mediaPosition.options = ["top", "bottom"];
+                }
+                // Reset mediaPosition if it's not valid for vertical
+                if (context.args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "top";
+                }
+            }
+            return <Story {...context.args}/>;
+        },
+    ],
+};
+export default meta;
+// Base card args
+var baseCardArgs = {
+    type: "postByCategory",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        short_description: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+// PostByCategory Card Stories
+export var PostByCategoryHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+};
+export var PostByCategoryHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+};
+export var PostByCategoryVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+};
+export var PostByCategoryVerticalMiddle = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+};
+export var PostByCategoryVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+};

package/dist/src/components/Card/SinglePost/SinglePost.jsx

@@ -0,0 +1,26 @@
+import LuImage from "../../Images/LuImage";
+import Link from "next/link";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { Button } from "../../Button/Button/Button";
+export var SinglePost = function (_a) {
+    var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "right" : _d;
+    return (<div className={" bg-white rounded-3xl grid grid-cols-1 sm:grid-cols-2 overflow-hidden  items-stretch shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <LuImage src={image} width={240} height={240} className={"w-full h-full ".concat(mediaPosition === "right" ? "order-1" : "", "  aspect-5/4  object-cover ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>
+      <div className="p-9 grid grid-rows-[1fr] items-center !gap-2 ">
+        <div className="flex flex-col !gap-3 ">
+          <Heading variant="h2-500" className={"line-clamp-1 md:line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle)}>
+            {item === null || item === void 0 ? void 0 : item.title}
+          </Heading>
+          <Body variant="body-xl" className={"line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " ")}>
+            {item === null || item === void 0 ? void 0 : item.description}
+          </Body>
+        </div>
+        <Link href={href} passHref>
+          <Button endIcon={"angle-right"} size="lg" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn)}>
+            {btnLabel}
+          </Button>
+        </Link>
+      </div>
+    </div>);
+};

package/dist/src/components/Card/SinglePost/SinglePost.stories.jsx

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { SinglePost } from "./SinglePost";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+var meta = {
+    title: "Components/Cards/SinglePost",
+    component: SinglePost,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        orientation: {
+            table: {
+                disable: true,
+            },
+        },
+        mediaPosition: {
+            control: "select",
+            options: ["left", "right"],
+            description: "Position of media in horizontal layout",
+        },
+        theme: {
+            table: {
+                disable: true,
+            },
+        },
+        altText: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+};
+export default meta;
+var baseCardArgs = {
+    type: "singlePost",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        short_description: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var SinglePostHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var SinglePostHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};

package/dist/src/components/Card/card.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { PostByCategory } from "./PostByCategory/PostByCategory";
+import { MultiNews } from "./MultipleNews/MultiNews";
+import { SinglePost } from "./SinglePost/SinglePost";
+import { Dummy_Url } from "../../utils/constants";
+import { ContactProfile } from "./contactProfile/ContactProfile";
+import { PhotoGallery } from "./photoGallery/PhotoGallery";
+import { PhotoAlbum } from "./photoAlbum/PhotoAlbum";
+var Card = function (_a) {
+    var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? Dummy_Url : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "left" : _d, _e = _a.type, type = _e === void 0 ? "postByCategory" : _e, _f = _a.orientation, orientation = _f === void 0 ? "horizontal" : _f, _g = _a.theme, theme = _g === void 0 ? "theme1" : _g;
+    var cardProps = {
+        item: item,
+        href: href,
+        image: image,
+        btnLabel: btnLabel,
+        editor: editor,
+        mediaPosition: mediaPosition,
+        orientation: orientation,
+        theme: theme,
+    };
+    // Using object approach for better performance and cleaner code
+    var cardComponents = {
+        postByCategory: PostByCategory,
+        contactProfile: ContactProfile,
+        multipleNews: MultiNews,
+        singlePost: SinglePost,
+        photoGallery: PhotoGallery,
+        photoAlbum: PhotoAlbum,
+    };
+    return (<>
+      {type && cardComponents[type]
+            ? React.createElement(cardComponents[type], cardProps)
+            : null}
+    </>);
+};
+export default Card;

package/dist/src/components/Card/contactProfile/ContactProfile.jsx

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import LuImage from "../../Images/LuImage";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { Button } from "../../Button/Button/Button";
+export var ContactProfile = function (_a) {
+    var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
+    // Normalize mediaPosition based on orientation
+    var safeMediaPosition = orientation === "horizontal"
+        ? mediaPosition === "left" || mediaPosition === "right"
+            ? mediaPosition
+            : "right"
+        : mediaPosition === "top" || mediaPosition === "bottom"
+            ? mediaPosition
+            : "top";
+    // Common card media component to avoid duplication
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<LuImage src={image} width={240} height={240} className={"w-full h-full rounded-full max-w-40 mx-auto aspect-square object-cover ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
+    };
+    // Common content section component
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<div className={"flex flex-col !gap-1 ".concat(className)}>
+      <Heading variant="h5-600" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0")}>
+        {item === null || item === void 0 ? void 0 : item.title}
+      </Heading>
+      <Body variant="body-md" className={" ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+        {item === null || item === void 0 ? void 0 : item.description}
+      </Body>
+    </div>);
+    };
+    // Common button component
+    var CardButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<Link href={href || "#"} passHref>
+      <Button endIcon={"angle-right"} size="sm" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, "  ").concat(className)}>
+        {btnLabel}
+      </Button>
+    </Link>);
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"!p-5 bg-white rounded-xl flex ".concat(safeMediaPosition === "left" ? "sm:flex-row" : "sm:flex-row-reverse", " max-w-5xl !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <CardMedia className={"".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover")}/>
+        <div className={"flex-1 flex flex-col !gap-1 md:!gap-2.5 text-center sm:!text-left h-full justify-center ".concat(safeMediaPosition === "right" ? "order-1" : "order-2")}>
+          <CardContent />
+          <CardButton />
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"p-8 bg-white rounded-xl flex flex-col gap-6 max-w-md items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center")}>
+        <CardMedia className="w-full h-full aspect-5/4 object-cover"/>
+        <CardContent className="h-20"/>
+      </div>
+      <CardButton />
+    </div>);
+};

package/dist/src/components/Card/contactProfile/ContactProfile.stories.jsx

@@ -0,0 +1,103 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Dummy_Image, Dummy_Para, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { OrientationEnum } from "../../../utils/enums";
+import { ContactProfile } from "./ContactProfile";
+var meta = {
+    title: "Components/Cards/ContactProfile",
+    component: ContactProfile,
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        orientation: {
+            control: "select",
+            options: [OrientationEnum.horizontal, OrientationEnum.vertical],
+        },
+        mediaPosition: {
+            control: "select",
+            options: ["left", "right", "top", "middle", "bottom"],
+            description: "For horizontal: use left/right. For vertical: use top/middle/bottom",
+        },
+        theme: {
+            table: {
+                disable: true,
+            },
+        },
+        altText: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            // Dynamically update mediaPosition options based on orientation
+            var orientation = context.args.orientation;
+            if (orientation === OrientationEnum.horizontal) {
+                if (context.argTypes.mediaPosition) {
+                    context.argTypes.mediaPosition.options = ["left", "right"];
+                }
+                // Reset mediaPosition if it's not valid for horizontal
+                if (context.args.mediaPosition &&
+                    !["left", "right"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "left";
+                }
+            }
+            else if (orientation === OrientationEnum.vertical) {
+                if (context.argTypes.mediaPosition) {
+                    context.argTypes.mediaPosition.options = ["top", "middle", "bottom"];
+                }
+                // Reset mediaPosition if it's not valid for vertical
+                if (context.args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "top";
+                }
+            }
+            return <Story {...context.args}/>;
+        },
+    ],
+};
+export default meta;
+var baseCardArgs = {
+    type: "contactProfile",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var ContactProfileHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+};
+export var ContactProfileHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+};
+export var ContactProfileVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+};
+export var ContactProfileVerticalMiddle = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+};
+export var ContactProfileVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+};

package/dist/src/components/Card/photoAlbum/PhotoAlbum.jsx

@@ -0,0 +1,41 @@
+import LuImage from "../../../components/Images/LuImage";
+import { Heading } from "../../../components/Typography/Heading/heading";
+import LUIcon from "../../../components/Icons/LUIcon";
+import { AvatarGroup } from "../../Avatar/AvatarGroup/AvatarGroup";
+export var PhotoAlbum = function (_a) {
+    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Album" : _b, editor = _a.editor, theme = _a.theme;
+    var hasImages = Array.isArray(item === null || item === void 0 ? void 0 : item.images) && item.images.length > 0;
+    return (<div className={"group relative max-w-md cursor-pointer ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)}>
+      <LuImage src={image} width={448} height={448} alt={altText} className={"aspect-square object-cover transition-transform"}/>
+      <div className={"absolute inset-0 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " bg-linear-to-t from-black to-transparent")}></div>
+      {theme === "theme2" ? (<div className="absolute bottom-0 right-0 w-full bg-black/75 !px-5 !py-3 flex items-center justify-between duration-300
+    group-hover:bg-transparent">
+          <Heading variant="h4-700" className={"line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+            {item === null || item === void 0 ? void 0 : item.title}
+          </Heading>
+          {hasImages && (<div>
+              <AvatarGroup images={((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
+                    id: img.gallery_id,
+                    image: img.gallery_image,
+                }); })}/>
+            </div>)}
+        </div>) : (<>
+          {hasImages && (<div className="absolute top-0 right-0 !px-5 !py-3">
+              <AvatarGroup images={((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
+                    id: img.gallery_id,
+                    image: img.gallery_image,
+                }); })}/>
+            </div>)}
+          <div className="absolute !px-5 !py-3 bottom-0">
+            <Heading variant="h4-700" className={"line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+              {item === null || item === void 0 ? void 0 : item.title}
+            </Heading>
+          </div>
+        </>)}
+
+      {/* Search icon - appears on hover */}
+      <div className={"absolute inset-0 flex items-center justify-center opacity-0 group-hover:!opacity-100 duration-300 ease-out ".concat(theme === "theme2" ? "bg-black/75 origin-bottom scale-y-0 transition-all group-hover:scale-y-100" : "bg-black/30")}>
+        <LUIcon icon="magnifying-glass" size="4xl" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100")}/>
+      </div>
+    </div>);
+};