linkedunion-design-kit 1.6.8 → 1.7.0

package/dist/src/components/Button/IconButton.jsx

@@ -0,0 +1,70 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+export var color = {
+    blue: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-300 active:bg-blue-800 disabled:bg-gray-100 disabled:text-gray-400",
+    "blue-light": "bg-blue-100 text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",
+    red: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-300 active:bg-red-800 disabled:bg-gray-100 disabled:text-gray-400",
+    "red-light": "bg-red-100 text-red-600 hover:bg-red-700 hover:text-red-50 focus-visible:bg-red-600 focus-visible:text-red-50 active:bg-red-800 active:text-red-50",
+    green: "bg-green-600 text-white hover:bg-green-700 focus-visible:ring-green-300 active:bg-green-800 disabled:bg-gray-100 disabled:text-gray-400",
+    yellow: "bg-yellow-500 text-white hover:bg-yellow-600 focus-visible:ring-yellow-200 active:bg-yellow-700 disabled:bg-gray-100 disabled:text-gray-400",
+    indigo: "bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:ring-indigo-300 active:bg-indigo-800 disabled:bg-gray-100 disabled:text-gray-400",
+    gray: "bg-gray-50 text-gray-950 hover:bg-gray-100 focus-visible:bg-gray-50 active:bg-gray-300",
+    "light-gray": "bg-gray-900 text-gray-50 hover:bg-gray-100 focus-visible:bg-gray-50 active:bg-gray-300",
+};
+export var size = {
+    xl: "!p-3.5",
+    lg: "!p-3",
+    md: "!p-2.5",
+    sm: "!p-2.5",
+};
+export var shape = {
+    "rounded-sm": "!rounded-sm",
+    "rounded-full": "!rounded-full",
+};
+var buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
+    variants: {
+        color: color,
+        size: size,
+        shape: shape,
+    },
+    defaultVariants: {
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+    },
+});
+function IconButton(_a) {
+    var className = _a.className, color = _a.color, size = _a.size, shape = _a.shape, _b = _a.asChild, asChild = _b === void 0 ? false : _b, icon = _a.icon, props = __rest(_a, ["className", "color", "size", "shape", "asChild", "icon"]);
+    var Comp = asChild ? Slot : "button";
+    // Map button size to appropriate icon sizes for the icon
+    var getIconSize = function () {
+        if (size === "xl" || size === "lg") {
+            return "xl";
+        }
+        else if (size === "md") {
+            return "lg";
+        }
+        else if (size === "sm") {
+            return "md";
+        }
+    };
+    var iconSize = getIconSize();
+    return (<Comp data-slot="button" className={cn(buttonVariants({ color: color, size: size, shape: shape, className: className }))} {...props}>
+      <LUIcon size={iconSize} data-testid="icon" icon={icon !== null && icon !== void 0 ? icon : ""}/>
+    </Comp>);
+}
+export { IconButton, buttonVariants };

package/dist/src/components/Button/IconButton.stories.jsx

@@ -0,0 +1,53 @@
+import { color, IconButton, shape, size } from "./IconButton";
+import { iconList } from "../../utils/iconList";
+export default {
+    title: "Components/Button/IconButton",
+    component: IconButton,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (<IconButton icon="chart-simple" size="md" {...args}/>); };
+export var _IconButton = Template.bind({});
+_IconButton.args = {
+    icon: "chart-simple",
+};
+_IconButton.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(color),
+        },
+        options: Object.keys(color),
+    },
+    shape: {
+        control: {
+            type: "select",
+            labels: Object.keys(shape),
+        },
+        options: Object.keys(shape),
+        description: "Select the shape of the button",
+        table: {
+            defaultValue: { summary: "rounded-sm" },
+            type: { summary: "string" },
+        },
+    },
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(size),
+        },
+        options: Object.keys(size),
+        description: "Select the size of the button",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "string" },
+        },
+    },
+    icon: {
+        control: {
+            type: "select",
+            labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })),
+        },
+        options: iconList.map(function (icon) { return icon.key; }),
+        description: "Icon (React component)",
+    },
+};

package/dist/src/components/Button/IconButton.test.jsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { color, IconButton, shape, size } from "./IconButton";
+describe("Icon Button Component", function () {
+    it("renders icon button with required icon prop", function () {
+        render(<IconButton icon="chart-simple"/>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("calls onClick handler when clicked", function () {
+        var handleClick = jest.fn();
+        render(<IconButton onClick={handleClick} icon="chart-simple"/>);
+        fireEvent.click(screen.getByRole("button"));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it("applies correct color, shape, and size classes", function () {
+        render(<IconButton color="blue" shape="rounded-full" size="lg" icon="chart-simple"/>);
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).toHaveClass(color["blue"], shape["rounded-full"], size["lg"]);
+    });
+    it("applies additional className when provided", function () {
+        render(<IconButton className="custom-class" icon="chart-simple"/>);
+        expect(screen.getByRole("button")).toHaveClass("custom-class");
+    });
+    it("renders without crashing when all required props are provided", function () {
+        render(<IconButton icon="chart-simple"/>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+});

package/dist/src/components/Card/ContactProfile.d.ts

@@ -0,0 +1,2 @@
+import { CardInterface } from "./type";
+export declare const ContactProfile: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/ContactProfile.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export var ContactProfile = 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, orientation = _a.orientation;
+    // Normalize mediaPosition based on orientation
+    var normalizedMediaPosition = orientation === "horizontal"
+        ? mediaPosition === "left" || mediaPosition === "right"
+            ? mediaPosition
+            : "right"
+        : mediaPosition === "top" || mediaPosition === "bottom"
+            ? mediaPosition
+            : "top";
+    // Common image component to avoid repetition
+    var ProfileImage = function () { return (_jsx(LuImage, { src: image, width: 240, height: 240, className: "w-full h-full rounded-full max-w-[160px] aspect-square object-cover ".concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" })); };
+    // Common content section (title and description)
+    var ContentSection = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsxs("div", { className: "flex flex-col gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h5-700", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-md", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " line-clamp-2"), children: item === null || item === void 0 ? void 0 : item.description })] }));
+    };
+    // Common button component
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(Link, { href: href, passHref: true, className: className, children: _jsx(Button, { endIcon: "angle-right", size: "sm", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel }) }));
+    };
+    // Horizontal layout card
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { className: "p-5 bg-white rounded-xl inline-flex ".concat(normalizedMediaPosition === "right" ? "flex-row-reverse" : "", " gap-10 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(ProfileImage, {}), _jsxs("div", { className: "flex flex-col gap-1 w-full", children: [_jsx(ContentSection, {}), _jsx(ActionButton, { className: "mt-5" })] })] }));
+    }
+    // Vertical layout card
+    return (_jsxs("div", { className: "p-8 bg-white rounded-xl inline-flex flex-col gap-5 max-w-[365px] items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex ".concat(normalizedMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center gap-5 text-center"), children: [_jsx(ProfileImage, {}), _jsx(ContentSection, {})] }), _jsx(ActionButton, {})] }));
+};

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

@@ -0,0 +1,57 @@
+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";
+export var ContactProfile = 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, orientation = _a.orientation;
+    // Normalize mediaPosition based on orientation
+    var normalizedMediaPosition = orientation === "horizontal"
+        ? mediaPosition === "left" || mediaPosition === "right"
+            ? mediaPosition
+            : "right"
+        : mediaPosition === "top" || mediaPosition === "bottom"
+            ? mediaPosition
+            : "top";
+    // Common image component to avoid repetition
+    var ProfileImage = function () { return (<LuImage src={image} width={240} height={240} className={"w-full h-full rounded-full max-w-[160px] aspect-square object-cover ".concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>); };
+    // Common content section (title and description)
+    var ContentSection = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<div className={"flex flex-col gap-1 ".concat(className)}>
+      <Heading variant="h5-700" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle)}>
+        {item === null || item === void 0 ? void 0 : item.title}
+      </Heading>
+      <Body variant="body-md" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " line-clamp-2")}>
+        {item === null || item === void 0 ? void 0 : item.description}
+      </Body>
+    </div>);
+    };
+    // Common button component
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<Link href={href} passHref className={className}>
+      <Button endIcon={"angle-right"} size="sm" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn)}>
+        {btnLabel}
+      </Button>
+    </Link>);
+    };
+    // Horizontal layout card
+    if (orientation === "horizontal") {
+        return (<div className={"p-5 bg-white rounded-xl inline-flex ".concat(normalizedMediaPosition === "right" ? "flex-row-reverse" : "", " gap-10 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <ProfileImage />
+        <div className="flex flex-col gap-1 w-full">
+          <ContentSection />
+          <ActionButton className="mt-5"/>
+        </div>
+      </div>);
+    }
+    // Vertical layout card
+    return (<div className={"p-8 bg-white rounded-xl inline-flex flex-col gap-5 max-w-[365px] items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex ".concat(normalizedMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center gap-5 text-center")}>
+        <ProfileImage />
+        <ContentSection />
+      </div>
+      <ActionButton />
+    </div>);
+};

package/dist/src/components/Card/ContactProfile.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ContactProfile } from "./ContactProfile";
+declare const meta: Meta<typeof ContactProfile>;
+export default meta;
+type Story = StoryObj<typeof ContactProfile>;
+export declare const ContactProfileHorizontalLeft: Story;
+export declare const ContactProfileHorizontalRight: Story;
+export declare const ContactProfileVerticalTop: Story;
+export declare const ContactProfileVerticalBottom: Story;

package/dist/src/components/Card/ContactProfile.stories.js

@@ -0,0 +1,52 @@
+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 { ContactProfile } from "./ContactProfile";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+var meta = {
+    title: "Components/NewCard/ContactProfile",
+    component: ContactProfile,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+var baseCardArgs = {
+    type: "contactProfile",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        subtitle: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var ContactProfileHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var ContactProfileHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};
+export var ContactProfileVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
+};
+export var ContactProfileVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
+};

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

@@ -0,0 +1,52 @@
+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 { ContactProfile } from "./ContactProfile";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+var meta = {
+    title: "Components/NewCard/ContactProfile",
+    component: ContactProfile,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+var baseCardArgs = {
+    type: "contactProfile",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        subtitle: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var ContactProfileHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var ContactProfileHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};
+export var ContactProfileVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
+};
+export var ContactProfileVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
+};

package/dist/src/components/Card/MultiNews.d.ts

@@ -0,0 +1,2 @@
+import { CardInterface } from "./type";
+export declare const MultiNews: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/MultiNews.js

@@ -0,0 +1,43 @@
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import LuImage from "../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../Button/Button";
+import { Body } from "../Typography/Body/body";
+import { Heading } from "../Typography/Heading/heading";
+export var MultiNews = 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, orientation = _a.orientation;
+    // Common card media component
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(LuImage, { src: image, width: 240, height: 240, className: "".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" }));
+    };
+    // Common content section
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsxs("div", { className: "flex flex-col gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h5-700", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] }));
+    };
+    // Common button component with conditional shape
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(Link, { href: href, passHref: true, className: className, children: _jsx(Button, __assign({ endIcon: "angle-right", size: mediaPosition === "middle" ? "xl" : "lg" }, (mediaPosition === "middle" && { shape: "rounded-full" }), { className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel })) }));
+    };
+    // Optional subtitle component
+    var Subtitle = function () { return (_jsx(_Fragment, { children: mediaPosition === "middle" && (_jsx(Body, { variant: "body-xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardSubtitle), children: item === null || item === void 0 ? void 0 : item.subtitle })) })); };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { className: "p-8 bg-white rounded-2xl inline-flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "w-full h-full max-w-[240px] aspect-square rounded-lg object-cover" }), _jsxs("div", { className: "flex flex-col gap-1 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, { className: "mt-5" })] })] }));
+    }
+    // Vertical layout
+    return (_jsxs("div", { className: "p-8 bg-white rounded-2xl inline-flex flex-col gap-5 max-w-[480px] shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " gap-5"), children: [_jsx(Subtitle, {}), _jsx(CardMedia, { className: "w-full h-full aspect-16/10 object-cover" }), _jsx(CardContent, {})] }), _jsx(ActionButton, {})] }));
+};

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

@@ -0,0 +1,59 @@
+import LuImage from "../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../Button/Button";
+import { Body } from "../Typography/Body/body";
+import { Heading } from "../Typography/Heading/heading";
+export var MultiNews = 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, orientation = _a.orientation;
+    // Common card media component
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<LuImage src={image} width={240} height={240} className={"".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>);
+    };
+    // Common content section
+    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-700" className={"".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={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+        {item === null || item === void 0 ? void 0 : item.description}
+      </Body>
+    </div>);
+    };
+    // Common button component with conditional shape
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (<Link href={href} passHref className={className}>
+      <Button endIcon={"angle-right"} size={mediaPosition === "middle" ? "xl" : "lg"} {...(mediaPosition === "middle" && { shape: "rounded-full" })} className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn)}>
+        {btnLabel}
+      </Button>
+    </Link>);
+    };
+    // Optional subtitle component
+    var Subtitle = function () { return (<>
+      {mediaPosition === "middle" && (<Body variant="body-xl" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardSubtitle)}>
+          {item === null || item === void 0 ? void 0 : item.subtitle}
+        </Body>)}
+    </>); };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (<div className={"p-8 bg-white rounded-2xl inline-flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+        <CardMedia className="w-full h-full max-w-[240px] aspect-square rounded-lg object-cover"/>
+        <div className="flex flex-col gap-1 w-full">
+          <CardContent />
+          <ActionButton className="mt-5"/>
+        </div>
+      </div>);
+    }
+    // Vertical layout
+    return (<div className={"p-8 bg-white rounded-2xl inline-flex flex-col gap-5 max-w-[480px] shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " gap-5")}>
+        <Subtitle />
+        <CardMedia className="w-full h-full aspect-16/10 object-cover"/>
+        <CardContent />
+      </div>
+      <ActionButton />
+    </div>);
+};

package/dist/src/components/Card/MultiNews.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MultiNews } from "./MultiNews";
+declare const meta: Meta<typeof MultiNews>;
+export default meta;
+type Story = StoryObj<typeof MultiNews>;
+export declare const MultiNewsHorizontalLeft: Story;
+export declare const MultiNewsHorizontalRight: Story;
+export declare const MultiNewsVerticalTop: Story;
+export declare const MultiNewsVerticalBottom: Story;

package/dist/src/components/Card/MultiNews.stories.js

@@ -0,0 +1,52 @@
+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 { MultiNews } from "./MultiNews";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+var meta = {
+    title: "Components/NewCard/MultiNews",
+    component: MultiNews,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+var baseCardArgs = {
+    type: "multipleNews",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        subtitle: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var MultiNewsHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var MultiNewsHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};
+export var MultiNewsVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
+};
+export var MultiNewsVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
+};

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

@@ -0,0 +1,52 @@
+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 { MultiNews } from "./MultiNews";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+var meta = {
+    title: "Components/NewCard/MultiNews",
+    component: MultiNews,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+var baseCardArgs = {
+    type: "multipleNews",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        subtitle: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var MultiNewsHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var MultiNewsHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};
+export var MultiNewsVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
+};
+export var MultiNewsVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
+};

package/dist/src/components/Card/PostByCategory/PostByCategory.d.ts

@@ -0,0 +1,2 @@
+import { CardInterface } from "../type";
+export declare const PostByCategory: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+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 (_jsx(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 (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className, " "), children: [_jsx(Heading, { variant: "h5-700", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0"), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-md", className: " ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] }));
+    };
+    // Common button component
+    var CardButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(Link, { href: href || "#", passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " max-sm:w-full ").concat(className), children: btnLabel }) }));
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (_jsxs("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), children: [_jsx(CardMedia, { className: "".concat(safeMediaPosition === "right" && " order-last", " w-full aspect-5/4 sm:aspect-square  object-cover") }), _jsxs("div", { className: "flex flex-col !gap-1 md:!gap-5 sm:col-span-2 text-center sm:!text-left h-full justify-center", children: [_jsx(CardContent, {}), _jsx(CardButton, {})] })] }));
+    }
+    // Vertical layout
+    return (_jsxs("div", { className: "p-8 rounded-xl flex flex-col !gap-5 max-w-[480px] items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center"), children: [_jsx(CardMedia, { className: "w-full h-full aspect-5/4 object-cover" }), _jsx(CardContent, { className: "h-20" })] }), _jsx(CardButton, {})] }));
+};