linkedunion-design-kit 1.7.8 → 1.7.9

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { default as LUIcon } from "./src/components/Icons/LUIcon";
 export { default as Card } from "./src/components/Card/card";
 export { default as LuImage } from "./src/components/Images/LuImage";
-export { default as Avatar } from "./src/components/Avatar/Avatar";
+export { default as Avatar } from "./src/components/Avatar/Avatar/Avatar";
 export { default as Title } from "./src/components/Title/Title";
 export { IconButton } from "./src/components/Button/IconButton";
 export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
@@ -17,7 +17,6 @@ export { Display } from "./src/components/Typography/Display/display";
 export { Caption } from "./src/components/ui/caption";
 export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
 export { Button } from "./src/components/Button/Button";
-export { PhotoGallery } from "./src/components/Card/PhotoGallery";
 export { Label } from "./src/components/Label/Label";
 export { Slider } from "./src/components/Slider/slider";
 export { RadioButton } from "./src/components/RadioButton/radio-button";

package/dist/index.js

@@ -1,7 +1,7 @@
 export { default as LUIcon } from "./src/components/Icons/LUIcon";
 export { default as Card } from "./src/components/Card/card";
 export { default as LuImage } from "./src/components/Images/LuImage";
-export { default as Avatar } from "./src/components/Avatar/Avatar";
+export { default as Avatar } from "./src/components/Avatar/Avatar/Avatar";
 export { default as Title } from "./src/components/Title/Title";
 export { IconButton } from "./src/components/Button/IconButton";
 export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
@@ -17,7 +17,6 @@ export { Display } from "./src/components/Typography/Display/display";
 export { Caption } from "./src/components/ui/caption";
 export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
 export { Button } from "./src/components/Button/Button";
-export { PhotoGallery } from "./src/components/Card/PhotoGallery";
 export { Label } from "./src/components/Label/Label";
 export { Slider } from "./src/components/Slider/slider";
 export { RadioButton } from "./src/components/RadioButton/radio-button";

package/dist/src/components/Avatar/{Avatar.js → Avatar/Avatar.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import LUIcon from "../Icons/LUIcon";
 import Image from "next/image";
-import { avatarPadding, avatarShape, avatarSize } from ".";
+import { avatarPadding, avatarSize, avatarShape } from ".";
+import LUIcon from "../../../components/Icons/LUIcon";
 var Avatar = function (_a) {
     var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, _c = _a.shape, shape = _c === void 0 ? "square" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className;
     var sizeClasses = avatarSize[size];

package/dist/src/components/Avatar/{Avatar.test.js → Avatar/Avatar.test.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import Avatar from "./Avatar";
-jest.mock("../Icons/LUIcon", function () { return ({
+jest.mock("../../Icons/LUIcon.tsx", function () { return ({
     __esModule: true,
     default: jest.fn(function (_a) {
         var icon = _a.icon, className = _a.className;

package/dist/src/components/Avatar/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProps } from "../../../components/Avatar/AvatarGroup/type";
+export declare const AvatarGroup: ({ images }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Avatar/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarImage, AvatarFallback } from "../../../components/ui/avatar";
+export var AvatarGroup = function (_a) {
+    var images = _a.images;
+    var visibleImages = images.slice(0, 2);
+    var remainingCount = images.length - visibleImages.length;
+    return (_jsxs("div", { className: "flex -space-x-5", children: [visibleImages.map(function (img) { return (_jsx(Avatar, { className: "size-9 !border !border-white !bg-black !shadow-sm", children: _jsx(AvatarImage, { src: img.image, alt: img.name || "Avatar image" }) }, img.id)); }), remainingCount > 0 && (_jsx(Avatar, { className: "size-9 !border !border-white", children: _jsxs(AvatarFallback, { className: "!text-white text-xs font-normal !bg-black !shadow-sm", children: ["+", remainingCount] }) }))] }));
+};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryFn } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
+export declare const WithFallbacksOnly: StoryFn;
+export declare const CustomSize: StoryFn;
+export declare const WithBackgroundBlack: StoryFn;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarImage, AvatarFallback } from "../../../components/ui/avatar";
+import { avatars } from ".";
+export default {
+    title: "Components/Avatar/AvatarGroup",
+    component: Avatar,
+    tags: ["autodocs"],
+};
+var Template = function () { return (_jsx("div", { className: "flex gap-2", children: avatars.map(function (avatar, idx) { return (_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: avatar.src, alt: avatar.alt }), _jsx(AvatarFallback, { children: avatar.fallback })] }, idx)); }) })); };
+export var Default = Template.bind({});
+Default.storyName = "Avatar Group (Images & Fallbacks)";
+export var WithFallbacksOnly = function () { return (_jsx("div", { className: "*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale", children: ["AA", "BB", "CC", "DD"].map(function (initials, idx) { return (_jsx(Avatar, { children: _jsx(AvatarFallback, { children: initials }) }, idx)); }) })); };
+export var CustomSize = function () { return (_jsx("div", { className: "*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale", children: avatars.slice(0, 3).map(function (avatar, idx) { return (_jsxs(Avatar, { className: "size-12", children: [_jsx(AvatarImage, { src: avatar.src, alt: avatar.alt }), _jsx(AvatarFallback, { children: avatar.fallback })] }, idx)); }) })); };
+export var WithBackgroundBlack = function () { return (_jsx("div", { className: "flex -space-x-2", children: avatars.slice(0, 3).map(function (avatar, idx) { return (_jsxs(Avatar, { className: "size-12 bg-black shadow-sm border-2 border-white", children: [_jsx(AvatarImage, { src: avatar.src, alt: avatar.alt }), _jsx(AvatarFallback, { children: avatar.fallback })] }, idx)); }) })); };

package/dist/src/components/Avatar/AvatarGroup/index.d.ts

@@ -0,0 +1,5 @@
+export declare const avatars: {
+    src: string;
+    alt: string;
+    fallback: string;
+}[];

package/dist/src/components/Avatar/AvatarGroup/index.js

@@ -0,0 +1,27 @@
+export var avatars = [
+    {
+        src: "https://randomuser.me/api/portraits/men/32.jpg",
+        alt: "John Doe",
+        fallback: "JD",
+    },
+    {
+        src: "https://randomuser.me/api/portraits/women/44.jpg",
+        alt: "Jane Smith",
+        fallback: "JS",
+    },
+    {
+        src: "",
+        alt: "No Image",
+        fallback: "NI",
+    },
+    {
+        src: "https://randomuser.me/api/portraits/men/45.jpg",
+        alt: "Alex Brown",
+        fallback: "AB",
+    },
+    {
+        src: "",
+        alt: "No Image",
+        fallback: "XY",
+    },
+];

package/dist/src/components/Avatar/AvatarGroup/type.d.ts

@@ -0,0 +1,9 @@
+export interface ImagesProps {
+    id: number;
+    image: string;
+    name?: string;
+    description?: string;
+}
+export interface AvatarProps {
+    images: ImagesProps[];
+}

package/dist/src/components/Avatar/AvatarGroup/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -17,32 +17,39 @@ 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;
-    // Create modified item with shuffled subtitle and description when mediaPosition is middle
-    var modifiedItem = mediaPosition === "middle"
-        ? __assign(__assign({}, item), { description: item.subtitle, subtitle: item.description }) : item;
+    // 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-1 ".concat(className), children: [_jsx(Heading, { variant: "h5-700", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.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(editor === null || editor === void 0 ? void 0 : editor.cardText), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.description })] }));
+        return (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h5-700", 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(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 })) }));
+        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(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(editor === null || editor === void 0 ? void 0 : editor.cardSubtitle), dangerouslySetInnerHTML: {
-                __html: modifiedItem.subtitle || "",
+    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-40 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-8 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-5"), children: [_jsx(Subtitle, {}), _jsx(CardMedia, { className: "aspect-16/10" }), _jsx(CardContent, {})] }), _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

@@ -7,3 +7,4 @@ export declare const CardHorizontalLeft: Story;
 export declare const CardHorizontalRight: Story;
 export declare const CardVerticalTop: Story;
 export declare const CardVerticalBottom: Story;
+export declare const CardVerticalMiddle: Story;

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

@@ -25,7 +25,7 @@ var baseCardArgs = {
         image: Dummy_Image,
         title: Dummy_Title,
         description: Dummy_Para,
-        subtitle: Dummy_Subtitle,
+        short_description: Dummy_Subtitle,
     },
     image: Dummy_Image,
     href: Dummy_Url,
@@ -50,3 +50,6 @@ export var CardVerticalTop = {
 export var CardVerticalBottom = {
     args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
 };
+export var CardVerticalMiddle = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "middle" }),
+};

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

@@ -26,7 +26,7 @@ var baseCardArgs = {
         image: Dummy_Image,
         title: Dummy_Title,
         description: Dummy_Para,
-        subtitle: Dummy_Subtitle,
+        short_description: Dummy_Subtitle,
     },
     image: Dummy_Image,
     href: Dummy_Url,

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

@@ -6,5 +6,5 @@ import { Body } from "../../Typography/Body/body";
 import { Button } from "../../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 (_jsxs("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), children: [_jsx(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" }), _jsxs("div", { className: "p-9 grid grid-rows-[1fr] items-center !gap-2 ", children: [_jsxs("div", { className: "flex flex-col !gap-3 ", children: [_jsx(Heading, { variant: "h2", className: "line-clamp-1 md:line-clamp-2 ".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: "line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " "), children: item === null || item === void 0 ? void 0 : item.description })] }), _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), children: btnLabel }) })] })] }));
+    return (_jsxs("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), children: [_jsx(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" }), _jsxs("div", { className: "p-9 grid grid-rows-[1fr] items-center !gap-2 ", children: [_jsxs("div", { className: "flex flex-col !gap-3 ", children: [_jsx(Heading, { variant: "h2", className: "line-clamp-1 md:line-clamp-2 ".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: "line-clamp-2 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " "), children: item === null || item === void 0 ? void 0 : item.description })] }), _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), children: btnLabel }) })] })] }));
 };

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

@@ -25,7 +25,7 @@ var baseCardArgs = {
         image: Dummy_Image,
         title: Dummy_Title,
         description: Dummy_Para,
-        subtitle: Dummy_Subtitle,
+        short_description: Dummy_Subtitle,
     },
     image: Dummy_Image,
     href: Dummy_Url,

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

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

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

@@ -4,10 +4,11 @@ import { PostByCategory } from "./PostByCategory/PostByCategory";
 import { MultiNews } from "./MultipleNews/MultiNews";
 import { SinglePost } from "./SinglePost/SinglePost";
 import { Dummy_Url } from "../../utils/constants";
-import { PhotoGallery } from "./PhotoGallery";
 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;
+    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,
@@ -16,6 +17,7 @@ var Card = function (_a) {
         editor: editor,
         mediaPosition: mediaPosition,
         orientation: orientation,
+        theme: theme,
     };
     // Using object approach for better performance and cleaner code
     var cardComponents = {
@@ -24,6 +26,7 @@ var Card = function (_a) {
         multipleNews: MultiNews,
         singlePost: SinglePost,
         photoGallery: PhotoGallery,
+        photoAlbum: PhotoAlbum,
     };
     return (_jsx(_Fragment, { children: type && cardComponents[type]
             ? React.createElement(cardComponents[type], cardProps)

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

@@ -31,8 +31,8 @@ export var ContactProfile = function (_a) {
     };
     // Horizontal layout
     if (orientation === "horizontal") {
-        return (_jsxs("div", { className: "!p-5 bg-white rounded-xl grid ".concat(safeMediaPosition === "left" ? "sm:grid-cols-[auto_1fr]" : "sm:grid-cols-[1fr_auto]", " max-w-5xl !gap-10 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover") }), _jsxs("div", { className: "flex flex-col !gap-1 md:!gap-5 text-center sm:!text-left h-full justify-center ".concat(safeMediaPosition === "right" ? "order-1" : "order-2"), children: [_jsx(CardContent, {}), _jsx(CardButton, {})] })] }));
+        return (_jsxs("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), children: [_jsx(CardMedia, { className: "".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover") }), _jsxs("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"), children: [_jsx(CardContent, {}), _jsx(CardButton, {})] })] }));
     }
     // Vertical layout
-    return (_jsxs("div", { className: "p-8 bg-white rounded-xl flex flex-col !gap-5 max-w-md 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, {})] }));
+    return (_jsxs("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), 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, {})] }));
 };

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

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { Dummy_Image, Dummy_Para, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 import { ContactProfile } from "./ContactProfile";
 var meta = {
     title: "Components/NewCard/ContactProfile",
@@ -25,7 +25,6 @@ var baseCardArgs = {
         image: Dummy_Image,
         title: Dummy_Title,
         description: Dummy_Para,
-        subtitle: Dummy_Subtitle,
     },
     image: Dummy_Image,
     href: Dummy_Url,

package/dist/src/components/Card/photoAlbum/PhotoAlbum.d.ts

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 (_jsxs("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), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute inset-0 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " ").concat(theme === "theme1" && "bg-linear-to-t from-black to-transparent") }), theme === "theme2" ? (_jsxs("div", { className: "absolute bottom-0 right-0 w-full bg-black/75 !px-5 !py-3 flex items-center justify-between duration-300\n    group-hover:bg-transparent", children: [_jsx(Heading, { variant: "h4-700", className: "line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), hasImages && (_jsx("div", { children: _jsx(AvatarGroup, { images: ((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
+                                id: img.gallery_id,
+                                image: img.gallery_image,
+                            }); }) }) }))] })) : (_jsxs(_Fragment, { children: [hasImages && (_jsx("div", { className: "absolute top-0 right-0 !px-5 !py-3", children: _jsx(AvatarGroup, { images: ((item === null || item === void 0 ? void 0 : item.images) || []).map(function (img) { return ({
+                                id: img.gallery_id,
+                                image: img.gallery_image,
+                            }); }) }) })), _jsx("div", { className: "absolute !px-5 !py-3 bottom-0", children: _jsx(Heading, { variant: "h4-700", className: "line-clamp-1 text-white uppercase ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }) })] })), _jsx("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"), children: _jsx(LUIcon, { icon: "magnifying-glass", size: "4xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100") }) })] }));
+};

package/dist/src/components/Card/photoAlbum/PhotoAlbum.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { CardInterface } from "../type";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;

package/dist/src/components/Card/photoAlbum/PhotoAlbum.stories.js

@@ -0,0 +1,81 @@
+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 } from "react/jsx-runtime";
+import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
+import Card from "../card";
+import { PhotoAlbum } from "./PhotoAlbum";
+export default {
+    title: "Components/NewCard/PhotoAlbum",
+    component: PhotoAlbum,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Card, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    type: "photoAlbum",
+    theme: "theme1",
+    item: {
+        title: Dummy_Title,
+        images: [
+            {
+                gallery_name: "Sample Gallery",
+                gallery_image: "https://randomuser.me/api/portraits/men/32.jpg",
+                gallery_id: 1,
+                description: "This is a sample image description.",
+            },
+            {
+                gallery_name: "Another Gallery",
+                gallery_image: "https://randomuser.me/api/portraits/women/44.jpg",
+                gallery_id: 2,
+                description: "This is another sample image description.",
+            },
+            {
+                gallery_name: "Another Gallery",
+                gallery_image: Dummy_Image,
+                gallery_id: 2,
+                description: "https://randomuser.me/api/portraits/men/45.jpg",
+            },
+        ],
+    },
+    image: Dummy_Image,
+    editor: {
+        card: "",
+        cardImage: "",
+        cardOverlay: "",
+        cardText: "",
+    },
+};
+Default.argTypes = {
+    type: {
+        control: false,
+        table: {
+            type: { summary: "string" },
+            defaultValue: {
+                summary: "photoAlbum",
+            },
+        },
+    },
+    theme: {
+        control: {
+            type: "select",
+            labels: ["theme1", "theme2"],
+        },
+        options: ["theme1", "theme2"],
+        defaultValue: {
+            summary: "theme1",
+        },
+    },
+    href: { control: false },
+    btnLabel: { control: false },
+    mediaPosition: { control: false },
+    orientation: { control: false },
+};

package/dist/src/components/Card/{PhotoGallery.d.ts → photoGallery/PhotoGallery.d.ts}

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

package/dist/src/components/Card/photoGallery/PhotoGallery.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LuImage from "../../../components/Images/LuImage";
+import { Heading } from "../../../components/Typography/Heading/heading";
+import LUIcon from "../../../components/Icons/LUIcon";
+export var PhotoGallery = function (_a) {
+    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Gallery" : _b, editor = _a.editor;
+    return (_jsxs("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), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " inset-0 bg-linear-to-t from-black to-transparent") }), _jsx(Heading, { variant: "h4-700", className: "absolute line-clamp-1 text-white bottom-4 uppercase !px-5 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:!opacity-100 transition-opacity duration-300 ease-out", children: _jsx(LUIcon, { icon: "magnifying-glass", size: "4xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100") }) })] }));
+};

package/dist/src/components/Card/{PhotoGallery.stories.d.ts → photoGallery/PhotoGallery.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import { CardInterface } from "./type";
+import { CardInterface } from "../type";
 declare const _default: Meta;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;

package/dist/src/components/Card/{PhotoGallery.stories.js → photoGallery/PhotoGallery.stories.js}

@@ -10,9 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Dummy_Image, Dummy_Title } from "../../../utils/constants";
+import Card from "../card";
 import { PhotoGallery } from "./PhotoGallery";
-import { Dummy_Image, Dummy_Title } from "../../utils/constants";
-import Card from "./card";
 export default {
     title: "Components/NewCard/PhotoGallery",
     component: PhotoGallery,
@@ -43,4 +43,9 @@ Default.argTypes = {
             },
         },
     },
+    href: { control: false },
+    btnLabel: { control: false },
+    mediaPosition: { control: false },
+    orientation: { control: false },
+    theme: { control: false },
 };

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

@@ -4,14 +4,21 @@ export interface EditorInterface {
     cardTitle?: string;
     cardText?: string;
     cardBtn?: string;
-    cardSubtitle?: string;
+    shortDescription?: string;
     cardOverlay?: string;
 }
+export interface AlbumGalleryDataProps {
+    gallery_name: string;
+    gallery_image: string;
+    gallery_id: number;
+    description: string;
+}
 export interface CardDataProps {
     image?: string;
     title?: string;
-    subtitle?: string;
+    short_description?: string;
     description?: string;
+    images?: AlbumGalleryDataProps[];
 }
 export interface CardInterface {
     mediaPosition?: "top" | "middle" | "bottom" | "left" | "right";
@@ -20,7 +27,8 @@ export interface CardInterface {
     href?: string;
     btnLabel?: string;
     editor?: EditorInterface;
-    type?: "postByCategory" | "contactProfile" | "multipleNews" | "singlePost" | "photoGallery";
+    type?: "postByCategory" | "contactProfile" | "multipleNews" | "singlePost" | "photoGallery" | "photoAlbum";
     orientation?: "horizontal" | "vertical";
     altText?: string;
+    theme?: "theme1" | "theme2";
 }

package/dist/src/components/ui/avatar.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/src/components/ui/avatar.js

@@ -0,0 +1,38 @@
+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);
+};
+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 { jsx as _jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/utils";
+function Avatar(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(AvatarPrimitive.Root, __assign({ "data-slot": "avatar", className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className) }, props)));
+}
+function AvatarImage(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(AvatarPrimitive.Image, __assign({ "data-slot": "avatar-image", className: cn("aspect-square size-full", className) }, props)));
+}
+function AvatarFallback(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(AvatarPrimitive.Fallback, __assign({ "data-slot": "avatar-fallback", className: cn("bg-muted flex size-full items-center justify-center rounded-full", className) }, props)));
+}
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/styles/global.css

@@ -215,9 +215,18 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -437,6 +446,10 @@
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
   }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -560,6 +573,9 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
   .max-w-\[160px\] {
     max-width: 160px;
   }
@@ -593,6 +609,9 @@
   .origin-\(--radix-tooltip-content-transform-origin\) {
     transform-origin: var(--radix-tooltip-content-transform-origin);
   }
+  .origin-bottom {
+    transform-origin: bottom;
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -601,6 +620,10 @@
     --tw-translate-y: calc(-50% - 2px);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-y-0 {
+    --tw-scale-y: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .rotate-45 {
     rotate: 45deg;
   }
@@ -655,12 +678,12 @@
   .\!gap-3 {
     gap: calc(var(--spacing) * 3) !important;
   }
+  .\!gap-4 {
+    gap: calc(var(--spacing) * 4) !important;
+  }
   .\!gap-5 {
     gap: calc(var(--spacing) * 5) !important;
   }
-  .\!gap-10 {
-    gap: calc(var(--spacing) * 10) !important;
-  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -693,6 +716,20 @@
   .gap-x-\[20px\] {
     column-gap: 20px;
   }
+  .-space-x-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .-space-x-5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -5) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -5) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -762,6 +799,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .\!border-b {
     border-bottom-style: var(--tw-border-style) !important;
     border-bottom-width: 1px !important;
@@ -773,6 +814,9 @@
   .\!border-gray-300 {
     border-color: #b7babd !important;
   }
+  .\!border-white {
+    border-color: #fefefe !important;
+  }
   .border-blue-600 {
     border-color: #276ab3;
   }
@@ -785,14 +829,26 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-white {
+    border-color: #fefefe;
+  }
+  .\!bg-black {
+    background-color: #0f0f0f !important;
+  }
   .\!bg-primary {
     background-color: var(--primary) !important;
   }
   .bg-background {
     background-color: var(--background);
   }
-  .bg-black\/40 {
-    background-color: color-mix(in oklab, #0f0f0f 40%, transparent);
+  .bg-black {
+    background-color: #0f0f0f;
+  }
+  .bg-black\/30 {
+    background-color: color-mix(in oklab, #0f0f0f 30%, transparent);
+  }
+  .bg-black\/75 {
+    background-color: color-mix(in oklab, #0f0f0f 75%, transparent);
   }
   .bg-blue-50 {
     background-color: #fbfcfe;
@@ -1260,6 +1316,9 @@
   .\!text-primary-foreground {
     color: var(--primary-foreground) !important;
   }
+  .\!text-white {
+    color: #fefefe !important;
+  }
   .text-blue-50 {
     color: #fbfcfe;
   }
@@ -1482,6 +1541,14 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .\!shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .\!shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1594,6 +1661,21 @@
   .running {
     animation-play-state: running;
   }
+  .group-hover\:scale-y-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-scale-y: 100%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .group-hover\:bg-transparent {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .group-hover\:\!opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2912,6 +2994,29 @@
       --tw-enter-translate-y: calc(2*var(--spacing));
     }
   }
+  .\*\:data-\[slot\=avatar\]\:ring-2 {
+    :is(& > *) {
+      &[data-slot="avatar"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .\*\:data-\[slot\=avatar\]\:ring-background {
+    :is(& > *) {
+      &[data-slot="avatar"] {
+        --tw-ring-color: var(--background);
+      }
+    }
+  }
+  .\*\:data-\[slot\=avatar\]\:grayscale {
+    :is(& > *) {
+      &[data-slot="avatar"] {
+        --tw-grayscale: grayscale(100%);
+        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+      }
+    }
+  }
   .data-\[state\=active\]\:bg-blue-600 {
     &[data-state="active"] {
       background-color: #276ab3;
@@ -3077,14 +3182,14 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .sm\:grid-cols-\[1fr_auto\] {
+  .sm\:flex-row {
     @media (width >= 40rem) {
-      grid-template-columns: 1fr auto;
+      flex-direction: row;
     }
   }
-  .sm\:grid-cols-\[auto_1fr\] {
+  .sm\:flex-row-reverse {
     @media (width >= 40rem) {
-      grid-template-columns: auto 1fr;
+      flex-direction: row-reverse;
     }
   }
   .sm\:\!text-left {
@@ -3105,6 +3210,11 @@
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
   }
+  .md\:\!gap-2\.5 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 2.5) !important;
+    }
+  }
   .md\:\!gap-5 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 5) !important;
@@ -3310,6 +3420,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -3535,6 +3660,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "private": false,
   "files": [
     "dist",
@@ -41,6 +41,7 @@
   ],
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-radio-group": "^1.3.7",

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import LUIcon from "../Icons/LUIcon";
-import LuImage from "../Images/LuImage";
-import { Heading } from "../Typography/Heading/heading";
-export var PhotoGallery = function (_a) {
-    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Gallery" : _b, editor = _a.editor;
-    return (_jsxs("div", { className: "group relative max-w-md ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " inset-0 bg-linear-to-t from-black to-transparent") }), _jsx(Heading, { variant: "h4-700", className: "absolute line-clamp-1 text-white bottom-4 uppercase !px-5 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:!opacity-100 transition-opacity duration-300 ease-out", children: _jsx(LUIcon, { icon: "magnifying-glass", size: "4xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100") }) })] }));
-};

package/dist/src/components/Avatar/{Avatar.stories.js → Avatar/Avatar.stories.js}

@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Avatar from "./Avatar";
 import { avatarShape, avatarSize } from ".";
+import Avatar from "./Avatar";
 export default {
     title: "Components/Avatar",
     component: Avatar,