linkedunion-design-kit 1.1.0 → 1.1.2

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

@@ -0,0 +1,2 @@
+import { AvatarProps } from "@/types/interface";
+export declare const Avatar: ({ image, icon, shape, size, className }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -1 +1,12 @@
-"use strict";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { LUIcon } from "../Icons/LUIcon";
+import { iconList } from "../../utils/iconList";
+import { avtarBackgroundSize } from "../../utils";
+export var Avatar = function (_a) {
+    var image = _a.image, _b = _a.icon, icon = _b === void 0 ? 'user' : _b, shape = _a.shape, size = _a.size, className = _a.className;
+    var defaultIcon = iconList.find(function (item) { return item.key === (icon || "user"); });
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "".concat(image ? 'bg-primary-200' : 'bg-gray-100', " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: avtarBackgroundSize(size), children: image ?
+                _jsx("img", { src: image, alt: "image", className: "w-full h-full object-cover" })
+                :
+                    _jsx(LUIcon, { size: size, icon: defaultIcon === null || defaultIcon === void 0 ? void 0 : defaultIcon.key, fill: "lu-neutral-icon-dark", className: "" }) }) }));
+};

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

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const avatar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

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

@@ -0,0 +1,37 @@
+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 { Avatar } from "./Avatar";
+import { avatarShapeList, avatarSizesList } from "../../utils";
+export default {
+    title: "Components/Avatar",
+    component: Avatar,
+};
+var Template = function (args) { return _jsx(Avatar, __assign({}, args)); };
+export var avatar = Template.bind({});
+avatar.args = {
+    image: '/images/sanjna.jpg',
+    shape: 'square',
+    size: 'lu-avatar-massive',
+    className: '',
+    icon: "user",
+};
+avatar.argTypes = {
+    shape: {
+        control: { type: "select", labels: Object.fromEntries(avatarShapeList.map(function (borderRadius) { return [borderRadius.key, borderRadius.label]; })) },
+        options: avatarShapeList.map(function (borderRadius) { return borderRadius.key; }),
+    },
+    size: {
+        control: { type: "select", labels: Object.fromEntries(avatarSizesList.map(function (size) { return [size.key, size.label]; })) },
+        options: avatarSizesList.map(function (size) { return size.key; }),
+    },
+};

package/dist/components/Button/Button.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { LUIcon } from "../Icons/LUIcon";
 import { buttonTypeEnum, contentTypeEnum } from "../../utils/enum";
 export var Button = function (_a) {
-    var contentType = _a.contentType, variant = _a.variant, label = _a.label, iconLeft = _a.iconLeft, iconRight = _a.iconRight, onClick = _a.onClick, shape = _a.shape, size = _a.size, leftIconSize = _a.leftIconSize, rightIconSize = _a.rightIconSize, className = _a.className, icon = _a.icon, iconSize = _a.iconSize, type = _a.type;
+    var _b = _a.contentType, contentType = _b === void 0 ? contentTypeEnum.text_with_icon : _b, _c = _a.variant, variant = _c === void 0 ? 'lu-btn-primary' : _c, _d = _a.label, label = _d === void 0 ? 'Button Text' : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, onClick = _a.onClick, shape = _a.shape, _e = _a.size, size = _e === void 0 ? 'lu-btn-md' : _e, leftIconSize = _a.leftIconSize, rightIconSize = _a.rightIconSize, className = _a.className, icon = _a.icon, iconSize = _a.iconSize, type = _a.type;
     return (_jsx(_Fragment, { children: _jsxs("button", { className: "flex items-center ".concat(shape, " ").concat(type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant, "  ").concat(className, " ").concat(contentType === contentTypeEnum.icon_only ? "icon-only ".concat(size) : size), onClick: onClick, children: [contentType === contentTypeEnum.none && label, contentType === contentTypeEnum.icon_only && icon && (_jsx(LUIcon, { size: iconSize, icon: icon, fill: type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant })), contentType === contentTypeEnum.text_with_icon && (_jsxs(_Fragment, { children: [iconLeft && iconLeft !== 'none' && (_jsx(LUIcon, { size: leftIconSize, icon: iconLeft, fill: type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant, className: "lu-mr-100" })), label, iconRight && iconRight !== 'none' && (_jsx(LUIcon, { size: rightIconSize, icon: iconRight, fill: type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant, className: "lu-ml-100" }))] }))] }) }));
 };

package/dist/components/Button/Button.stories.js

@@ -42,6 +42,7 @@ button.args = {
     icon: 'chart-simple',
     iconSize: 'lu-icon-small',
     type: buttonTypeEnum.fill,
+    className: '',
 };
 button.argTypes = {
     contentType: {

package/dist/components/Images/LuImage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Image = function (_a) {
     var image = _a.image, aspectRatio = _a.aspectRatio, className = _a.className;
-    return (_jsx("div", { className: "lu-width-25 lu-height-25", "data-testid": "lu-image", children: _jsx("img", { src: image || '', alt: "Image", className: "lu-width-100 ".concat(aspectRatio, " ").concat(className) }) }));
+    return (_jsx("div", { "data-testid": "lu-image", children: _jsx("img", { src: image || '', alt: "Image", className: "w-[240px] ".concat(aspectRatio, " ").concat(className) }) }));
 };

package/dist/components/MediaCard/Card.d.ts

@@ -0,0 +1,2 @@
+import { CardProps } from "@/types/interface";
+export declare const Card: ({ image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaCard/Card.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from "../Images/LuImage";
+import { Button } from "../Button/Button";
+import { cardLayoutEnum, contentTypeEnum, orientationEnum } from "../../utils/enum";
+import styles from "./Card.module.css";
+export var Card = function (_a) {
+    var _b = _a.image, image = _b === void 0 ? '/images/demo-image.jpg' : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? orientationEnum.landscape : _d, _e = _a.heading, heading = _e === void 0 ? 'Heading Text' : _e, _f = _a.body, body = _f === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.btnLabel, btnLabel = _h === void 0 ? 'View More' : _h;
+    return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
+            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] w-fit"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light ".concat(styles.body_text), children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] })] })
+            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center w-fit"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "".concat(styles.card, " flex flex-col items-center lu-m-250"), children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
+};

package/dist/components/MediaCard/Card.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const card: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/dist/components/MediaCard/Card.stories.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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from "./Card";
+import { cardLayoutEnum, orientationEnum } from "../../utils/enum";
+export default {
+    title: "Components/Card",
+    component: Card,
+};
+var Template = function (args) { return _jsx(Card, __assign({}, args)); };
+export var card = Template.bind({});
+card.args = {
+    image: '/images/demo-image.jpg',
+    heading: 'Heading Text',
+    body: 'The quick brown fox jumps over the lazy dog.',
+    mediaPosition: orientationEnum.landscape,
+    layout: cardLayoutEnum.horizontal,
+    btnLabel: 'View More'
+};
+card.argTypes = {
+    mediaPosition: {
+        control: { type: "select" },
+        options: [orientationEnum.portrait, orientationEnum.landscape],
+    },
+    layout: {
+        control: { type: "select" },
+        options: [cardLayoutEnum.horizontal, cardLayoutEnum.vertical],
+    },
+};

package/dist/index.d.ts

@@ -3,4 +3,6 @@ export { Size } from './components/Size/Size';
 export { WidthHeight } from './components/Size/WidthHeight';
 export { MinWidthHeight } from './components/Size/MinWidthHeight';
 export { LUIcon } from './components/Icons/LUIcon';
+export { Card } from './components/MediaCard/Card';
 import './styles/global.css';
+import './components/MediaCard/Card.module.css';

package/dist/index.js

@@ -3,4 +3,6 @@ export { Size } from './components/Size/Size';
 export { WidthHeight } from './components/Size/WidthHeight';
 export { MinWidthHeight } from './components/Size/MinWidthHeight';
 export { LUIcon } from './components/Icons/LUIcon';
+export { Card } from './components/MediaCard/Card';
 import './styles/global.css';
+import './components/MediaCard/Card.module.css';

package/dist/styles/global.css

@@ -556,6 +556,9 @@ video {
 .grid {
   display: grid;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
 .size-lu-size-050 {
   width: var(--core-050);
   height: var(--core-050);
@@ -610,6 +613,9 @@ video {
 .h-48 {
   height: 12rem;
 }
+.h-full {
+  height: 100%;
+}
 .h-lu-height-10 {
   height: 10%;
 }
@@ -670,6 +676,9 @@ video {
 .w-10 {
   width: 2.5rem;
 }
+.w-\[240px\] {
+  width: 240px;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -737,6 +746,9 @@ video {
 .max-w-\[30ch\] {
   max-width: 30ch;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -770,6 +782,13 @@ video {
 .gap-6 {
   gap: 1.5rem;
 }
+.gap-x-\[20px\] {
+  -moz-column-gap: 20px;
+       column-gap: 20px;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -8387,6 +8406,10 @@ video {
 .bg-warning-900\/lu-opacity-95 {
   background-color: rgb(102 80 0 / 0.95);
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 254 254 / var(--tw-bg-opacity, 1));
+}
 .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -8407,6 +8430,10 @@ video {
   --tw-gradient-to: rgb(254 254 254 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #FEFEFE var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .p-24 {
   padding: 6rem;
 }
@@ -8533,6 +8560,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(81 84 88 / var(--tw-text-opacity, 1));
 }
+.text-gray-950 {
+  --tw-text-opacity: 1;
+  color: rgb(3 7 18 / var(--tw-text-opacity, 1));
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -9856,6 +9887,66 @@ video {
 .lu-aspect-9-21-por {
   aspect-ratio: 9 / 21;
 }
+.lu-avatar-massive {
+  width: var(--core-1500);
+  height: var(--core-1500);
+}
+.lu-avatar-huge {
+  width: var( --core-1000);
+  height: var( --core-1000);
+}
+.lu-avatar-7x-large {
+  width: var(--core-800);
+  height: var(--core-800);
+}
+.lu-avatar-6x-large {
+  width: var(--core-600);
+  height: var(--core-600);
+}
+.lu-avatar-5x-large {
+  width: var(--core-450);
+  height: var(--core-450);
+}
+.lu-avatar-4x-large {
+  width: var(--core-400);
+  height: var(--core-400);
+}
+.lu-avatar-3x-large {
+  width: var(--core-350);
+  height: var(--core-350);
+}
+.lu-avatar-2x-large {
+  width: var(--core-300);
+  height: var(--core-300);
+}
+.lu-avatar-x-large {
+  width: var(--core-250);
+  height: var(--core-250);
+}
+.lu-avatar-large {
+  width: var(--core-225);
+  height: var(--core-225);
+}
+.lu-avatar-medium {
+  width: var(--core-200);
+  height: var(--core-200);
+}
+.lu-avatar-small {
+  width: var(--core-175);
+  height: var(--core-175);
+}
+.square {
+  border-radius: 0px;
+}
+.circle {
+  border-radius: 9999px;
+}
+.none {
+  box-shadow: none;
+}
+.lu-shadow-md {
+  box-shadow: 0px 4px 12px 0 rgba(52, 52, 52, 0.15);
+}
 
 :root {
   /* --foreground-rgb: 0, 0, 0; */

package/dist/tailwind.config.js

@@ -7,7 +7,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { borderRadiusList, borderWidthList, buttonColorsList, buttonIconSizeList, buttonWithIconList, butttonSizeList, colorGroups, customAspectRatio, customBorderRadius, customBorderWidth, customBoxShadow, customButtonColors, customButtonIconSize, customButtonOutlineColors, customButtonSize, customColors, customFontSize, customFontWeight, customHeight, customIconButtonSize, customIconColors, customIconSize, customLineHeight, customLogoSize, customMinHeight, customMinWidth, customOpacity, customSize, customTextAlignment, customTextDecoration, customTextTransform, customTextWrap, customWidth, fontSizes, fontWeights, heights, iconColorList, iconSizeList, landscapeaspectRatioList, lineHeights, minHeights, minWidths, portraitaspectRatioList, sizes, textAlignment, textDecorations, textTransform, textWraps, widths } from './utils';
+import { avatarShapeList, avatarSizesList, borderRadiusList, borderWidthList, buttonColorsList, buttonIconSizeList, buttonWithIconList, butttonSizeList, colorGroups, customAspectRatio, customAvatarSize, customBorderRadius, customBorderWidth, customBoxShadow, customButtonColors, customButtonIconSize, customButtonOutlineColors, customButtonSize, customColors, customFontSize, customFontWeight, customHeight, customIconButtonSize, customIconColors, customIconSize, customizeAvtarShape, customLineHeight, customLogoSize, customMinHeight, customMinWidth, customOpacity, customSize, customTextAlignment, customTextDecoration, customTextTransform, customTextWrap, customWidth, fontSizes, fontWeights, heights, iconColorList, iconSizeList, landscapeaspectRatioList, lineHeights, minHeights, minWidths, portraitaspectRatioList, sizes, textAlignment, textDecorations, textTransform, textWraps, widths } from './utils';
 import generateUtilities from './utils';
 var plugin = require('tailwindcss/plugin');
 var config = {
@@ -17,7 +17,7 @@ var config = {
         './components/**/*.{js,ts,jsx,tsx,mdx}',
         './app/**/*.{js,ts,jsx,tsx,mdx}',
     ],
-    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], colorGroups.primary.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.gray.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.success.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.warning.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.danger.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.info.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), fontSizes.map(function (fontSize) { return ({ pattern: new RegExp(fontSize.key) }); }), true), fontWeights.map(function (fontWeight) { return ({ pattern: new RegExp(fontWeight.key) }); }), true), lineHeights.map(function (lineHeight) { return ({ pattern: new RegExp(lineHeight.key) }); }), true), textAlignment.map(function (textAlign) { return ({ pattern: new RegExp(textAlign.key) }); }), true), textTransform.map(function (textTrans) { return ({ pattern: new RegExp(textTrans.key) }); }), true), textDecorations.map(function (textDec) { return ({ pattern: new RegExp(textDec.key) }); }), true), textWraps.map(function (textWrap) { return ({ pattern: new RegExp(textWrap.key) }); }), true), sizes.map(function (size) { return ({ pattern: new RegExp(size.key) }); }), true), widths.map(function (width) { return ({ pattern: new RegExp(width.key) }); }), true), heights.map(function (height) { return ({ pattern: new RegExp(height.key) }); }), true), minWidths.map(function (minWidth) { return ({ pattern: new RegExp(minWidth.key) }); }), true), minHeights.map(function (minHeight) { return ({ pattern: new RegExp(minHeight.key) }); }), true), borderRadiusList.map(function (borderRadius) { return ({ pattern: new RegExp(borderRadius.key) }); }), true), borderWidthList.map(function (borderWidth) { return ({ pattern: new RegExp(borderWidth.key) }); }), true), iconSizeList.map(function (iconSize) { return ({ pattern: new RegExp(iconSize.key) }); }), true), iconColorList.map(function (iconColor) { return ({ pattern: new RegExp(iconColor.key) }); }), true), buttonColorsList.map(function (btnColor) { return ({ pattern: new RegExp(btnColor.key) }); }), true), butttonSizeList.map(function (btnSize) { return ({ pattern: new RegExp(btnSize.key) }); }), true), buttonIconSizeList.map(function (btnIconSize) { return ({ pattern: new RegExp(btnIconSize.key) }); }), true), buttonWithIconList.map(function (iconButton) { return ({ pattern: new RegExp(iconButton.key) }); }), true), portraitaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true), landscapeaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true),
+    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], colorGroups.primary.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.gray.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.success.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.warning.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.danger.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), colorGroups.info.map(function (color) { return ({ pattern: new RegExp(color) }); }), true), fontSizes.map(function (fontSize) { return ({ pattern: new RegExp(fontSize.key) }); }), true), fontWeights.map(function (fontWeight) { return ({ pattern: new RegExp(fontWeight.key) }); }), true), lineHeights.map(function (lineHeight) { return ({ pattern: new RegExp(lineHeight.key) }); }), true), textAlignment.map(function (textAlign) { return ({ pattern: new RegExp(textAlign.key) }); }), true), textTransform.map(function (textTrans) { return ({ pattern: new RegExp(textTrans.key) }); }), true), textDecorations.map(function (textDec) { return ({ pattern: new RegExp(textDec.key) }); }), true), textWraps.map(function (textWrap) { return ({ pattern: new RegExp(textWrap.key) }); }), true), sizes.map(function (size) { return ({ pattern: new RegExp(size.key) }); }), true), widths.map(function (width) { return ({ pattern: new RegExp(width.key) }); }), true), heights.map(function (height) { return ({ pattern: new RegExp(height.key) }); }), true), minWidths.map(function (minWidth) { return ({ pattern: new RegExp(minWidth.key) }); }), true), minHeights.map(function (minHeight) { return ({ pattern: new RegExp(minHeight.key) }); }), true), borderRadiusList.map(function (borderRadius) { return ({ pattern: new RegExp(borderRadius.key) }); }), true), borderWidthList.map(function (borderWidth) { return ({ pattern: new RegExp(borderWidth.key) }); }), true), iconSizeList.map(function (iconSize) { return ({ pattern: new RegExp(iconSize.key) }); }), true), iconColorList.map(function (iconColor) { return ({ pattern: new RegExp(iconColor.key) }); }), true), buttonColorsList.map(function (btnColor) { return ({ pattern: new RegExp(btnColor.key) }); }), true), butttonSizeList.map(function (btnSize) { return ({ pattern: new RegExp(btnSize.key) }); }), true), buttonIconSizeList.map(function (btnIconSize) { return ({ pattern: new RegExp(btnIconSize.key) }); }), true), buttonWithIconList.map(function (iconButton) { return ({ pattern: new RegExp(iconButton.key) }); }), true), portraitaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true), landscapeaspectRatioList.map(function (aspectRatio) { return ({ pattern: new RegExp(aspectRatio.key) }); }), true), avatarSizesList.map(function (avatarSize) { return ({ pattern: new RegExp(avatarSize.key) }); }), true), avatarShapeList.map(function (avatarShape) { return ({ pattern: new RegExp(avatarShape.key) }); }), true),
     theme: {
         extend: {
             backgroundImage: {
@@ -132,6 +132,13 @@ var config = {
             addUtilities(customButtonOutlineColors, ['responsive']);
             //plugin for aspect ratio
             addUtilities(customAspectRatio, ['responsive']);
+            //Plugin for avatar size
+            addUtilities(customAvatarSize, ['responsive']);
+            //plugin for avatar shape
+            addUtilities(customizeAvtarShape, ['responsive']);
+            //plugin for box shadow
+            var boxShadowUtilities = generateUtilities('boxShadow', theme);
+            addUtilities(boxShadowUtilities, ['responsive']);
         }),
     ],
 };

package/dist/utils/enum.d.ts

@@ -11,3 +11,7 @@ export declare const orientationEnum: {
     portrait: string;
     landscape: string;
 };
+export declare const cardLayoutEnum: {
+    horizontal: string;
+    vertical: string;
+};

package/dist/utils/enum.js

@@ -11,3 +11,7 @@ export var orientationEnum = {
     portrait: 'Portrait',
     landscape: 'Landscape'
 };
+export var cardLayoutEnum = {
+    horizontal: 'Horizontal',
+    vertical: 'Vertical'
+};

package/dist/utils/index.d.ts

@@ -99,6 +99,18 @@ export declare const landscapeaspectRatioList: {
     key: string;
     label: string;
 }[];
+export declare const avatarSizesList: {
+    key: string;
+    label: string;
+}[];
+export declare const avatarShapeList: {
+    key: string;
+    label: string;
+}[];
+export declare const avtarBackgroundSize: (size: string) => {
+    width: string;
+    height: string;
+} | undefined;
 export default function generateUtilities(property: string, theme: (property: string) => Record<string, string>): Record<string, Record<string, string>>;
 export declare const customColors: {
     white: string;
@@ -1352,6 +1364,64 @@ export declare const customIconButtonSize: {
         padding: string;
     };
 };
+export declare const customAvatarSize: {
+    '.lu-avatar-massive': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-huge': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-7x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-6x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-5x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-4x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-3x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-2x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-medium': {
+        width: string;
+        height: string;
+    };
+    '.lu-avatar-small': {
+        width: string;
+        height: string;
+    };
+};
+export declare const customizeAvtarShape: {
+    '.square': {
+        borderRadius: string;
+    };
+    '.circle': {
+        borderRadius: string;
+    };
+};
 export declare const table_data_className = "bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5";
 export declare const table_header_className = "lu-pd-200";
 export declare const table_sub_heading_className = "lu-text-center lu-text-uppercase lu-font-weight-semibold lu-font-size-large lu-pd-200";

package/dist/utils/index.js

@@ -318,6 +318,104 @@ export var landscapeaspectRatioList = [
     { key: 'lu-aspect-16-9-landsc', label: 'lu-aspect-16-9-landsc: 16/9' },
     { key: 'lu-aspect-21-9-landscape', label: 'lu-aspect-21-9-landscape: 21/9' },
 ];
+export var avatarSizesList = [
+    { key: 'lu-avatar-massive', label: 'lu-avatar-massive' },
+    { key: 'lu-avatar-huge', label: 'lu-avatar-huge' },
+    { key: 'lu-avatar-7x-large', label: 'lu-avatar-7x-large' },
+    { key: 'lu-avatar-6x-large', label: 'lu-avatar-6x-large' },
+    { key: 'lu-avatar-5x-large', label: 'lu-avatar-5x-large' },
+    { key: 'lu-avatar-4x-large', label: 'lu-avatar-4x-large' },
+    { key: 'lu-avatar-3x-large', label: 'lu-avatar-3x-large' },
+    { key: 'lu-avatar-2x-large', label: 'lu-avatar-2x-large' },
+    { key: 'lu-avatar-x-large', label: 'lu-avatar-x-large' },
+    { key: 'lu-avatar-large', label: 'lu-avatar-large' },
+    { key: 'lu-avatar-medium', label: 'lu-avatar-medium' },
+    { key: 'lu-avatar-small', label: 'lu-avatar-small' },
+];
+export var avatarShapeList = [
+    { key: 'square', label: 'square' },
+    { key: 'circle', label: 'circle' },
+];
+export var avtarBackgroundSize = function (size) {
+    if (size === 'lu-avatar-massive') {
+        return {
+            width: '200px',
+            height: '200px',
+        };
+    }
+    else if (size === 'lu-avatar-huge') {
+        return {
+            width: '160px',
+            height: '160px',
+        };
+    }
+    else if (size === 'lu-avatar-7x-large') {
+        return {
+            width: '144px',
+            height: '144px',
+        };
+    }
+    else if (size === 'lu-avatar-6x-large') {
+        return {
+            width: '128px',
+            height: '128px',
+        };
+    }
+    else if (size === 'lu-avatar-5x-large') {
+        return {
+            width: '116px',
+            height: '116px',
+        };
+    }
+    else if (size === 'lu-avatar-4x-large') {
+        return {
+            width: '96px',
+            height: '96px',
+        };
+    }
+    else if (size === 'lu-avatar-4x-large') {
+        return {
+            width: '96px',
+            height: '96px',
+        };
+    }
+    else if (size === 'lu-avatar-3x-large') {
+        return {
+            width: '76px',
+            height: '76px',
+        };
+    }
+    else if (size === 'lu-avatar-2x-large') {
+        return {
+            width: '64px',
+            height: '64px',
+        };
+    }
+    else if (size === 'lu-avatar-x-large') {
+        return {
+            width: '52px',
+            height: '52px',
+        };
+    }
+    else if (size === 'lu-avatar-large') {
+        return {
+            width: '42px',
+            height: '42px',
+        };
+    }
+    else if (size === 'lu-avatar-medium') {
+        return {
+            width: '32px',
+            height: '32px',
+        };
+    }
+    else if (size === 'lu-avatar-small') {
+        return {
+            width: '30px',
+            height: '30px',
+        };
+    }
+};
 //Plugin for generating utilities (Used in tailwind.config.js)
 export default function generateUtilities(property, theme) {
     var utilities = theme(property);
@@ -1489,6 +1587,60 @@ export var customIconButtonSize = {
         padding: 'var(--core-100)'
     },
 };
+export var customAvatarSize = {
+    '.lu-avatar-massive': {
+        width: 'var(--core-1500)',
+        height: 'var(--core-1500)',
+    },
+    '.lu-avatar-huge': {
+        width: 'var( --core-1000)',
+        height: 'var( --core-1000)',
+    },
+    '.lu-avatar-7x-large': {
+        width: 'var(--core-800)',
+        height: 'var(--core-800)',
+    },
+    '.lu-avatar-6x-large': {
+        width: 'var(--core-600)',
+        height: 'var(--core-600)'
+    },
+    '.lu-avatar-5x-large': {
+        width: 'var(--core-450)',
+        height: 'var(--core-450)'
+    },
+    '.lu-avatar-4x-large': {
+        width: 'var(--core-400)',
+        height: 'var(--core-400)'
+    },
+    '.lu-avatar-3x-large': {
+        width: 'var(--core-350)',
+        height: 'var(--core-350)'
+    },
+    '.lu-avatar-2x-large': {
+        width: 'var(--core-300)',
+        height: 'var(--core-300)'
+    },
+    '.lu-avatar-x-large': {
+        width: 'var(--core-250)',
+        height: 'var(--core-250)'
+    },
+    '.lu-avatar-large': {
+        width: 'var(--core-225)',
+        height: 'var(--core-225)'
+    },
+    '.lu-avatar-medium': {
+        width: 'var(--core-200)',
+        height: 'var(--core-200)'
+    },
+    '.lu-avatar-small': {
+        width: 'var(--core-175)',
+        height: 'var(--core-175)'
+    },
+};
+export var customizeAvtarShape = {
+    '.square': { borderRadius: '0px' },
+    '.circle': { borderRadius: '9999px' },
+};
 // Components CSS Classes
 export var table_data_className = 'bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5';
 export var table_header_className = 'lu-pd-200';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "private": false,
   "files": [
     "dist",
-    "styles/global.css"
+    "styles/global.css",
+    "dist/components/MediaCard/Card.module.css"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",