linkedunion-design-kit 1.9.6-beta.0 → 1.9.7

package/dist/index.d.ts

@@ -29,3 +29,5 @@ export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";

package/dist/index.js

@@ -29,3 +29,5 @@ export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";

package/dist/src/components/Avatar/Avatar/Avatar1.stories.d.ts

@@ -0,0 +1,17 @@
+import { Avatar } from "../../../components/ui/avatar";
+import { Meta } from "@storybook/react";
+import { avatar1Shape, avatar1Size } from ".";
+declare const _default: Meta<typeof Avatar>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
+    size?: keyof typeof avatar1Size;
+    shape?: keyof typeof avatar1Shape;
+    status?: "online" | "offline" | "busy" | "away";
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const AvatarSize: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarFallBackValue: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarShape: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarWithNoImageAndFallBackValue: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarShapeSizeCombination: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarStatusIndicator: () => import("react/jsx-runtime").JSX.Element;
+export declare const RoundedAvatarStatusIndicatorSize: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Avatar/Avatar/Avatar1.stories.js

@@ -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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarImage, AvatarFallback } from "../../../components/ui/avatar";
+import { avatar1Shape, avatar1Size } from ".";
+export default {
+    title: "Components/Avatar/Avatar1",
+    component: Avatar,
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+                options: Object.keys(avatar1Size),
+            },
+            description: "The size of the avatar.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+                options: Object.keys(avatar1Shape),
+            },
+            description: "The shape of the avatar.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "rounded" },
+            },
+        },
+        status: {
+            control: {
+                type: "select",
+                options: ["online", "offline", "busy", "away"],
+            },
+            description: "The status of the avatar.",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+    },
+};
+var Template = function (args) {
+    return (_jsxs(Avatar, __assign({}, args, { children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] })));
+};
+export var Default = Template.bind({});
+export var AvatarSize = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { size: size, children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, size)); }) })); };
+export var AvatarFallBackValue = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { size: size, children: [_jsx(AvatarImage, { src: "", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, size)); }) })); };
+export var AvatarShape = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Shape).map(function (shape) { return (_jsxs(Avatar, { shape: shape, size: "massive", status: "online", children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, shape)); }) })); };
+export var AvatarWithNoImageAndFallBackValue = function () {
+    var user = { name: "", image: null };
+    return (_jsx("div", { className: "flex flex-row space-x-2", children: _jsxs(Avatar, { size: "md", children: [_jsx(AvatarImage, { src: "", alt: "User avatar" }), _jsx(AvatarFallback, { children: (user === null || user === void 0 ? void 0 : user.name) ? user.name.charAt(0) : null })] }) }));
+};
+export var AvatarShapeSizeCombination = function () { return (_jsx("div", { className: "flex flex-col space-y-2", children: Object.keys(avatar1Shape).map(function (shape) {
+        return Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { shape: shape, size: size, children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, "".concat(shape, "-").concat(size))); });
+    }) })); };
+export var AvatarStatusIndicator = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: ["online", "offline", "busy", "away"].map(function (status) { return (_jsxs(Avatar, { size: "massive", shape: "square", status: status, children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, status)); }) })); };
+export var RoundedAvatarStatusIndicatorSize = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { size: size, shape: "rounded", status: "online", children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, size)); }) })); };

package/dist/src/components/Badge/Badge.stories.d.ts

@@ -56,8 +56,8 @@ declare const meta: {
         shape: {
             control: {
                 type: "select";
-                options: string[];
             };
+            options: string[];
             description: string;
             table: {
                 type: {
@@ -130,7 +130,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -422,7 +422,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

package/dist/src/components/Badge/Badge.stories.js

@@ -54,8 +54,8 @@ var meta = {
         shape: {
             control: {
                 type: "select",
-                options: Object.keys(badgeStyles.shape),
             },
+            options: Object.keys(badgeStyles.shape),
             description: "The shape of the badge.",
             table: {
                 type: { summary: "string" },

package/dist/src/components/Button/Button/Button.stories.d.ts

@@ -118,7 +118,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -418,7 +418,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

package/dist/src/components/Button/IconButton/IconButton.stories.d.ts

@@ -129,7 +129,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -428,7 +428,7 @@ declare const meta: {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

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

@@ -1,5 +1,2 @@
 import { CardInterface } from "../type";
-export interface MultiNewsProps extends Omit<CardInterface, "href" | "type"> {
-    onButtonClick?: () => void;
-}
-export declare const MultipleNewsCard: (props: MultiNewsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiNews: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,38 +9,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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/Button";
 import { Body } from "../../Typography/Body/body";
 import { Heading } from "../../Typography/Heading/heading";
-export var MultipleNewsCard = function (props) {
-    var item = props.item, image = props.image, btnLabel = props.btnLabel, editor = props.editor, _a = props.mediaPosition, mediaPosition = _a === void 0 ? "right" : _a, orientation = props.orientation, onButtonClick = props.onButtonClick;
+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;
+    // Use destructuring to create cleaner code
+    var modifiedItem = item;
+    var modifiedEditor = editor;
+    // Only swap for middle position
+    if (mediaPosition === "middle") {
+        // Swap for item
+        modifiedItem = __assign(__assign({}, item), { description: item === null || item === void 0 ? void 0 : item.short_description, short_description: item === null || item === void 0 ? void 0 : item.description });
+        // Swap for editor
+        modifiedEditor = __assign(__assign({}, editor), { cardText: editor === null || editor === void 0 ? void 0 : editor.shortDescription, shortDescription: editor === null || editor === void 0 ? void 0 : editor.cardText });
+    }
     // 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: "object-cover w-full ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" }));
+        return (_jsx(LuImage, { src: image, width: 240, height: 240, className: " object-cover w-full ".concat(className, " ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.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-2 ".concat(className), children: [_jsx(Heading, { variant: "h4-600", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.short_description) && (_jsx(Body, { variant: "body-xl", className: "".concat(item.description ? "line-clamp-1 text-gray-900" : "line-clamp-2 text-gray-600", "   ").concat(editor === null || editor === void 0 ? void 0 : editor.shortDescription), children: item === null || item === void 0 ? void 0 : item.short_description })), _jsx(Body, { variant: "body-lg", className: "text-gray-600 line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), dangerouslySetInnerHTML: {
-                        __html: item.description || "",
-                    } })] }));
+        return (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h4-600", className: "line-clamp-1 capitalize ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardTitle), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.title }), _jsx(Body, { variant: "body-xl", className: "".concat(mediaPosition === "middle" ? "line-clamp-1" : "line-clamp-2 h-16", " ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardText), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.description })] }));
     };
     // Common button component with conditional shape
     var ActionButton = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (_jsx("div", { children: btnLabel && (_jsx(Button, __assign({ endIcon: "angle-right", size: "sm" }, (mediaPosition === "middle" && { shape: "rounded-full" }), { className: "".concat(mediaPosition === "middle" && "shadow-md !font-semibold", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " ").concat(className), onClick: onButtonClick, children: btnLabel }))) }));
+        return (_jsx(Link, { href: href, passHref: true, className: className, children: _jsx(Button, __assign({ endIcon: "angle-right", size: mediaPosition === "middle" ? "xl" : "sm" }, (mediaPosition === "middle" && { shape: "rounded-full" }), { className: "".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.cardBtn), children: btnLabel })) }));
     };
+    // Optional subtitle component
+    var Subtitle = function () { return (_jsx(_Fragment, { children: mediaPosition === "middle" && (_jsx(Body, { variant: "body-xl", className: "line-clamp-4 h-32 ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.shortDescription), dangerouslySetInnerHTML: {
+                __html: modifiedItem.short_description || "",
+            } })) })); };
     // Horizontal layout
     if (orientation === "horizontal") {
-        return (_jsxs("div", { className: "!p-5 bg-white rounded-2xl 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: "max-w-48 aspect-square rounded-lg" }), _jsxs("div", { className: "flex flex-col !gap-5 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, {})] })] }));
+        return (_jsxs("div", { className: "!p-5 bg-white rounded-2xl flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.card), children: [_jsx(CardMedia, { className: "max-w-48 aspect-square rounded-lg" }), _jsxs("div", { className: "flex flex-col !gap-5 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, {})] })] }));
     }
     // Vertical layout
-    return (_jsxs("div", { className: "!p-4 bg-white rounded-2xl flex flex-col !gap-5 max-w-md 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-4"), children: [mediaPosition === "middle" && (_jsx(Body, { variant: "body-lg", className: "text-gray-600 line-clamp-2  h-14 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), dangerouslySetInnerHTML: {
-                            __html: item.description || "",
-                        } })), _jsx(CardMedia, { className: "aspect-16/10" }), _jsxs("div", { className: "flex flex-col !gap-1", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.short_description) && (_jsx(Body, { variant: mediaPosition === "middle" ? "body-lg-500" : "body-xl", className: "".concat(item.description ? "line-clamp-1 text-gray-600" : "line-clamp-2 h-14 text-gray-600", "   ").concat(editor === null || editor === void 0 ? void 0 : editor.shortDescription), children: item === null || item === void 0 ? void 0 : item.short_description })), mediaPosition !== "middle" && (_jsx(Body, { variant: "body-lg", className: "text-gray-600 line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), dangerouslySetInnerHTML: {
-                                    __html: item.description || "",
-                                } }))] })] }), _jsx(ActionButton, {})] }));
+    return (_jsxs("div", { className: "p-8 bg-white rounded-2xl flex flex-col !gap-5 max-w-md shadow-lg ".concat(modifiedEditor === null || modifiedEditor === void 0 ? void 0 : modifiedEditor.card), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-4"), children: [_jsx(Subtitle, {}), _jsx(CardMedia, { className: "aspect-16/10" }), _jsx(CardContent, {})] }), _jsx(ActionButton, {})] }));
 };

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

@@ -1,11 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { CardProps } from "../card";
-type MultiNewsCardProps = Extract<CardProps, {
-    type: "multipleNews";
-}>;
-declare const meta: Meta<MultiNewsCardProps>;
+import Card from "../card";
+declare const meta: Meta<typeof Card>;
 export default meta;
-type Story = StoryObj<MultiNewsCardProps>;
+type Story = StoryObj<typeof Card>;
 export declare const CardHorizontalLeft: Story;
 export declare const CardHorizontalRight: Story;
 export declare const CardVerticalTop: Story;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, } from "../../../utils/constants";
+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 = {
@@ -20,12 +20,6 @@ var meta = {
         layout: "centered",
     },
     argTypes: {
-        type: {
-            control: false,
-            table: {
-                disable: true,
-            },
-        },
         orientation: {
             control: "select",
             options: [OrientationEnum.horizontal, OrientationEnum.vertical],
@@ -35,20 +29,29 @@ var meta = {
             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 args = context.args;
-            var orientation = args.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 (args.mediaPosition &&
-                    !["left", "right"].includes(args.mediaPosition)) {
-                    args.mediaPosition = "left";
+                if (context.args.mediaPosition &&
+                    !["left", "right"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "left";
                 }
             }
             else if (orientation === OrientationEnum.vertical) {
@@ -56,17 +59,18 @@ var meta = {
                     context.argTypes.mediaPosition.options = ["top", "middle", "bottom"];
                 }
                 // Reset mediaPosition if it's not valid for vertical
-                if (args.mediaPosition &&
-                    !["top", "middle", "bottom"].includes(args.mediaPosition)) {
-                    args.mediaPosition = "top";
+                if (context.args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, {});
+            return _jsx(Story, __assign({}, context.args));
         },
     ],
 };
 export default meta;
 var baseCardArgs = {
+    type: "multipleNews",
     item: {
         image: Dummy_Image,
         title: Dummy_Title,
@@ -74,7 +78,7 @@ var baseCardArgs = {
         short_description: Dummy_Subtitle,
     },
     image: Dummy_Image,
-    onButtonClick: function () { return console.log("Button clicked"); },
+    href: Dummy_Url,
     btnLabel: "View More",
     editor: {
         card: "",
@@ -82,21 +86,20 @@ var baseCardArgs = {
         cardTitle: "",
         cardText: "",
         cardBtn: "",
-        shortDescription: "",
     },
 };
 export var CardHorizontalLeft = {
-    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
 };
 export var CardHorizontalRight = {
-    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
 };
 export var CardVerticalTop = {
-    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
 };
 export var CardVerticalBottom = {
-    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
 };
 export var CardVerticalMiddle = {
-    args: __assign(__assign({ type: "multipleNews" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
 };

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

@@ -1,11 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { CardProps } from "../card";
-type PostByCategoryCardProps = Extract<CardProps, {
-    type: "postByCategory";
-}>;
-declare const meta: Meta<PostByCategoryCardProps>;
+import Card from "../card";
+declare const meta: Meta<typeof Card>;
 export default meta;
-type Story = StoryObj<PostByCategoryCardProps>;
+type Story = StoryObj<typeof Card>;
 export declare const PostByCategoryHorizontalLeft: Story;
 export declare const PostByCategoryHorizontalRight: Story;
 export declare const PostByCategoryVerticalTop: Story;

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

@@ -20,12 +20,6 @@ var meta = {
         layout: "centered",
     },
     argTypes: {
-        type: {
-            control: false,
-            table: {
-                disable: true,
-            },
-        },
         orientation: {
             control: "select",
             options: [OrientationEnum.horizontal, OrientationEnum.vertical],
@@ -35,20 +29,29 @@ var meta = {
             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 args = context.args;
-            var orientation = args.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 (args.mediaPosition &&
-                    !["left", "right"].includes(args.mediaPosition)) {
-                    args.mediaPosition = "left";
+                if (context.args.mediaPosition &&
+                    !["left", "right"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "left";
                 }
             }
             else if (orientation === OrientationEnum.vertical) {
@@ -56,18 +59,19 @@ var meta = {
                     context.argTypes.mediaPosition.options = ["top", "bottom"];
                 }
                 // Reset mediaPosition if it's not valid for vertical
-                if (args.mediaPosition &&
-                    !["top", "middle", "bottom"].includes(args.mediaPosition)) {
-                    args.mediaPosition = "top";
+                if (context.args.mediaPosition &&
+                    !["top", "middle", "bottom"].includes(context.args.mediaPosition)) {
+                    context.args.mediaPosition = "top";
                 }
             }
-            return _jsx(Story, {});
+            return _jsx(Story, __assign({}, context.args));
         },
     ],
 };
 export default meta;
 // Base card args
 var baseCardArgs = {
+    type: "postByCategory",
     item: {
         image: Dummy_Image,
         title: Dummy_Title,
@@ -87,17 +91,17 @@ var baseCardArgs = {
 };
 // PostByCategory Card Stories
 export var PostByCategoryHorizontalLeft = {
-    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "left" }),
 };
 export var PostByCategoryHorizontalRight = {
-    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.horizontal, mediaPosition: "right" }),
 };
 export var PostByCategoryVerticalTop = {
-    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "top" }),
 };
 export var PostByCategoryVerticalMiddle = {
-    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "middle" }),
 };
 export var PostByCategoryVerticalBottom = {
-    args: __assign(__assign({ type: "postByCategory" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
 };

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

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { CardProps } from "../card";
-type SinglePostCardProps = Extract<CardProps, {
-    type: "singlePost";
-}>;
-declare const meta: Meta<SinglePostCardProps>;
+import { SinglePost } from "./SinglePost";
+declare const meta: Meta<typeof SinglePost>;
 export default meta;
-type Story = StoryObj<SinglePostCardProps>;
+type Story = StoryObj<typeof SinglePost>;
 export declare const SinglePostHorizontalLeft: Story;
 export declare const SinglePostHorizontalRight: Story;

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

@@ -9,21 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import Card from "../card";
+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: Card,
+    component: SinglePost,
     parameters: {
         layout: "centered",
     },
     argTypes: {
-        type: {
-            control: false,
-            table: {
-                disable: true,
-            },
-        },
         orientation: {
             table: {
                 disable: true,
@@ -34,10 +28,21 @@ var meta = {
             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,
@@ -56,8 +61,8 @@ var baseCardArgs = {
     },
 };
 export var SinglePostHorizontalLeft = {
-    args: __assign(__assign({ type: "singlePost" }, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
 };
 export var SinglePostHorizontalRight = {
-    args: __assign(__assign({ type: "singlePost" }, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
 };

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

@@ -1,18 +1,3 @@
-import type { MultiNewsProps } from "./MultipleNews/MultiNews";
-import type { CardInterface } from "./type";
-import { PhotoGalleryProps } from "./photoGallery/PhotoGallery";
-import { PhotoAlbumProps } from "./photoAlbum/PhotoAlbum";
-type CardTypesWithCardInterface = "postByCategory" | "contactProfile" | "singlePost";
-export type CardProps = ({
-    type: "multipleNews";
-} & MultiNewsProps) | ({
-    type: "photoGallery";
-} & PhotoGalleryProps) | ({
-    type: "photoAlbum";
-} & PhotoAlbumProps) | {
-    [K in CardTypesWithCardInterface]: {
-        type: K;
-    } & CardInterface;
-}[CardTypesWithCardInterface];
-declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element | null;
+import { CardInterface } from "./type";
+declare const Card: ({ item, image, href, btnLabel, editor, mediaPosition, type, orientation, theme, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
 export default Card;