linkedunion-design-kit 0.1.3 → 0.1.4

package/dist/.next/types/app/page.d.ts

@@ -0,0 +1,8 @@
+export interface PageProps {
+    params?: any;
+    searchParams?: any;
+}
+export interface LayoutProps {
+    children?: React.ReactNode;
+    params?: any;
+}

package/dist/.next/types/app/page.js

@@ -0,0 +1,22 @@
+// File: /Users/avialdosolutions/linkedunion-design-kit/linkedunion-design-kit/app/page.tsx
+import * as entry from '../../../app/page.js';
+// Check that the entry is a valid entry
+checkFields();
+// Check the prop type of the entry function
+checkFields();
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+    checkFields();
+    checkFields();
+}
+function checkFields() { }

package/dist/app/layout.d.ts

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import './globals.css';
+import '../styles/globals.css';
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: {
     children: React.ReactNode;

package/dist/app/layout.jsx

@@ -1,5 +1,5 @@
 import { Inter } from 'next/font/google';
-import './globals.css';
+import '../styles/globals.css';
 var inter = Inter({ subsets: ['latin'] });
 export var metadata = {
     title: 'Create Next App',

package/dist/components/Border/BorderRadius/BorderRadius.d.ts

@@ -0,0 +1,2 @@
+import { BorderRadiusProps } from "@/types/interface";
+export declare const BorderRadius: ({ borderRadius }: BorderRadiusProps) => import("react").JSX.Element;

package/dist/components/Border/BorderRadius/BorderRadius.jsx

@@ -0,0 +1,12 @@
+import { BorderRadiusTable } from "./BorderRadiusTable";
+import { BorderRadiusView } from "./BorderRadiusView";
+export var BorderRadius = function (_a) {
+    var borderRadius = _a.borderRadius;
+    return (<>
+        <div className="lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100">Border Radius</div>
+        <BorderRadiusTable />
+        <div className="lu-mt-150">
+            <BorderRadiusView borderRadius={borderRadius}/>
+        </div>
+    </>);
+};

package/dist/components/Border/BorderRadius/BorderRadius.stories.d.ts

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

package/dist/components/Border/BorderRadius/BorderRadius.stories.jsx

@@ -0,0 +1,17 @@
+import { BorderRadius } from "./BorderRadius";
+import { borderRadiusList } from "../../../utils";
+export default {
+    title: "Components/Border",
+    component: BorderRadius,
+};
+var Template = function (args) { return <BorderRadius {...args}/>; };
+export var borderRadius = Template.bind({});
+borderRadius.args = {
+    borderRadius: 'lu-border-rounded-xs',
+};
+borderRadius.argTypes = {
+    borderRadius: {
+        control: { type: "select", labels: Object.fromEntries(borderRadiusList.map(function (borderRadius) { return [borderRadius.key, borderRadius.label]; })) },
+        options: borderRadiusList.map(function (borderRadius) { return borderRadius.key; }),
+    },
+};

package/dist/components/Border/BorderRadius/BorderRadiusTable.d.ts

@@ -0,0 +1 @@
+export declare const BorderRadiusTable: () => import("react").JSX.Element;

package/dist/components/Border/BorderRadius/BorderRadiusTable.jsx

@@ -0,0 +1,61 @@
+import { table_data_className, table_header_className, table_row_className } from "../../../utils";
+export var BorderRadiusTable = function () {
+    return (<>
+        <table className="lu-width-100 lu-font-size-x-small lu-font-weight-medium">
+            <thead className="bg-primary-100">
+                <tr>
+                    <th className={"".concat(table_header_className)}>Alias Token Name</th>
+                    <th className={"".concat(table_header_className)}>Base unit Multiplier of 8</th>
+                    <th className={"".concat(table_header_className)}>Value(PX)(REM)</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-none</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0px = 0rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-xs</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.25x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2px = 0.125rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-sm</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.5x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4px = 0.25rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-md</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.75x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>6px = 0.375rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-lg</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8px = 0.5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-xl</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1.5x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>12px = 0.75rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-2xl</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>16px = 1rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-3xl</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>3x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>24px = 1.5rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-rounded-full</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>100x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>9999px</span></td>
+                </tr>
+            </tbody>
+        </table>
+    </>);
+};

package/dist/components/Border/BorderRadius/BorderRadiusView.d.ts

@@ -0,0 +1,2 @@
+import { BorderRadiusProps } from "@/types/interface";
+export declare const BorderRadiusView: ({ borderRadius }: BorderRadiusProps) => import("react").JSX.Element;

package/dist/components/Border/BorderRadius/BorderRadiusView.jsx

@@ -0,0 +1,8 @@
+export var BorderRadiusView = function (_a) {
+    var borderRadius = _a.borderRadius;
+    return (<>
+        <div className={"border-primary-600 lu-pd-200 lu-size-2500 lu-border-width-125 ".concat(borderRadius)} data-testid="border-radius">
+           <p className="bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded lu-font-size-x-small">{borderRadius}</p>
+        </div>
+    </>);
+};

package/dist/components/Border/BorderWidth/BorderWidth.d.ts

@@ -0,0 +1,2 @@
+import { BorderWidthProps } from "@/types/interface";
+export declare const BorderWidth: ({ border }: BorderWidthProps) => import("react").JSX.Element;

package/dist/components/Border/BorderWidth/BorderWidth.jsx

@@ -0,0 +1,12 @@
+import { BorderWidthTable } from "./BorderWidthTable";
+import { ViewBorderWidth } from "./ViewBorderWidth";
+export var BorderWidth = function (_a) {
+    var border = _a.border;
+    return (<>
+        <div className="lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100">Border Width</div>
+        <BorderWidthTable />
+        <div className="lu-mt-150">
+            <ViewBorderWidth border={border}/>
+        </div>
+    </>);
+};

package/dist/components/Border/BorderWidth/BorderWidth.stories.d.ts

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

package/dist/components/Border/BorderWidth/BorderWidth.stories.jsx

@@ -0,0 +1,17 @@
+import { BorderWidth } from "./BorderWidth";
+import { borderWidthList } from "../../../utils";
+export default {
+    title: "Components/Border",
+    component: BorderWidth,
+};
+var Template = function (args) { return <BorderWidth {...args}/>; };
+export var borderWidth = Template.bind({});
+borderWidth.args = {
+    border: 'lu-border-width-125',
+};
+borderWidth.argTypes = {
+    border: {
+        control: { type: "select", labels: Object.fromEntries(borderWidthList.map(function (borderWidth) { return [borderWidth.key, borderWidth.label]; })) },
+        options: borderWidthList.map(function (borderWidth) { return borderWidth.key; }),
+    },
+};

package/dist/components/Border/BorderWidth/BorderWidthTable.d.ts

@@ -0,0 +1 @@
+export declare const BorderWidthTable: () => import("react").JSX.Element;

package/dist/components/Border/BorderWidth/BorderWidthTable.jsx

@@ -0,0 +1,36 @@
+import { table_data_className, table_header_className, table_row_className } from "../../../utils";
+export var BorderWidthTable = function () {
+    return (<>
+        <table className="lu-width-100 lu-font-size-x-small lu-font-weight-medium">
+            <thead className="bg-primary-100">
+                <tr>
+                    <th className={"".concat(table_header_className)}>Alias Token Name</th>
+                    <th className={"".concat(table_header_className)}>Base unit Multiplier of 8</th>
+                    <th className={"".concat(table_header_className)}>Value(PX)(REM)</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-width-125</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.125x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1px = 0.063rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-width-025</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.25x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>2px = 0.125rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-width-050</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>0.50x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>4px = 0.25rem</span></td>
+                </tr>
+                <tr>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>lu-border-width-100</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>1x</span></td>
+                    <td className={"".concat(table_row_className)}><span className={"".concat(table_data_className)}>8px = 0.5rem</span></td>
+                </tr>
+            </tbody>
+        </table>
+    </>);
+};

package/dist/components/Border/BorderWidth/ViewBorderWidth.d.ts

@@ -0,0 +1,2 @@
+import { BorderWidthProps } from "@/types/interface";
+export declare const ViewBorderWidth: ({ border }: BorderWidthProps) => import("react").JSX.Element;

package/dist/components/Border/BorderWidth/ViewBorderWidth.jsx

@@ -0,0 +1,8 @@
+export var ViewBorderWidth = function (_a) {
+    var border = _a.border;
+    return (<>
+        <div className={"border-primary-600 lu-border-rounded-2xl lu-pd-200 lu-size-2500 ".concat(border)} data-testid="border-width">
+            <p className="bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded lu-font-size-x-small lu-text-center">{border}</p>
+        </div>
+    </>);
+};

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

@@ -0,0 +1,2 @@
+import { ButtonProps } from "@/types/interface";
+export declare const Button: ({ contentType, variant, label, iconLeft, iconRight, onClick, shape, size, leftIconSize, rightIconSize, className, icon, iconSize, type }: ButtonProps) => import("react").JSX.Element;

package/dist/components/Button/Button.jsx

@@ -0,0 +1,16 @@
+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;
+    return (<>
+        <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}>
+            {contentType === contentTypeEnum.none && label}
+            {contentType === contentTypeEnum.icon_only && icon && (<LUIcon size={iconSize} icon={icon} fill={type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant}/>)}
+            {contentType === contentTypeEnum.text_with_icon && (<>
+                    {iconLeft && iconLeft !== 'none' && (<LUIcon size={leftIconSize} icon={iconLeft} fill={type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant} className="lu-mr-100"/>)}
+                    {label}
+                    {iconRight && iconRight !== 'none' && (<LUIcon size={rightIconSize} icon={iconRight} fill={type === buttonTypeEnum.outline ? "outline-button ".concat(variant) : variant} className="lu-ml-100"/>)}
+                </>)}
+        </button>
+    </>);
+};

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

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

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

@@ -0,0 +1,109 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { Button } from "./Button";
+import { borderRadiusList, buttonColorsList, buttonIconSizeList, buttonWithIconList, butttonSizeList } from "../../utils";
+import { iconList } from "../../utils/iconList";
+import { buttonTypeEnum, contentTypeEnum } from "../../utils/enum";
+export default {
+    title: "Components/Button",
+    component: Button,
+    tags: ['autodocs'],
+};
+var Template = function (args) { return <Button {...args}/>; };
+export var button = Template.bind({});
+button.args = {
+    contentType: contentTypeEnum.none,
+    variant: 'lu-btn-primary',
+    label: 'Button Text',
+    onClick: function () { return alert('Button Clicked'); },
+    shape: 'lu-border-rounded-sm',
+    size: 'lu-btn-md',
+    iconLeft: 'chart-simple',
+    leftIconSize: 'lu-icon-small',
+    icon: 'chart-simple',
+    iconSize: 'lu-icon-small',
+    type: buttonTypeEnum.fill,
+};
+button.argTypes = {
+    contentType: {
+        control: { type: "select" },
+        options: [contentTypeEnum.none, contentTypeEnum.text_with_icon, contentTypeEnum.icon_only],
+        description: "Determines the content of the button",
+    },
+    label: {
+        control: { type: "text" },
+        description: "Button label text",
+        if: { arg: "contentType", neq: contentTypeEnum.icon_only },
+    },
+    variant: {
+        control: { type: "select", labels: Object.fromEntries(buttonColorsList.map(function (btnColor) { return [btnColor.key, btnColor.label]; })) },
+        options: buttonColorsList.map(function (btnColor) { return btnColor.key; }),
+    },
+    iconLeft: {
+        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
+        options: __spreadArray(["none"], iconList.map(function (icon) { return icon.key; }), true),
+        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
+    },
+    iconRight: {
+        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
+        options: __spreadArray(["none"], iconList.map(function (icon) { return icon.key; }), true),
+        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
+    },
+    shape: {
+        control: { type: "select", labels: Object.fromEntries(borderRadiusList.map(function (borderRadius) { return [borderRadius.key, borderRadius.label]; })) },
+        options: borderRadiusList.map(function (borderRadius) { return borderRadius.key; }),
+    },
+    size: {
+        control: { type: "select", labels: Object.fromEntries(butttonSizeList.map(function (size) { return [size.key, size.label]; })) },
+        options: butttonSizeList.map(function (size) { return size.key; }),
+        description: "Select the size of the button",
+        update: function (args) {
+            var isIconOnly = args.contentType === contentTypeEnum.icon_only;
+            // Dynamically update options and labels based on contentType
+            return {
+                options: isIconOnly
+                    ? buttonWithIconList.map(function (size) { return size.key; })
+                    : butttonSizeList.map(function (size) { return size.key; }),
+                control: {
+                    type: "select",
+                    labels: Object.fromEntries((isIconOnly ? buttonWithIconList : butttonSizeList).map(function (size) { return [
+                        size.key,
+                        size.label,
+                    ]; })),
+                },
+            };
+        },
+    },
+    leftIconSize: {
+        control: { type: "select", labels: Object.fromEntries(buttonIconSizeList.map(function (size) { return [size.key, size.label]; })) },
+        options: buttonIconSizeList.map(function (size) { return size.key; }),
+        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
+    },
+    rightIconSize: {
+        control: { type: "select", labels: Object.fromEntries(buttonIconSizeList.map(function (size) { return [size.key, size.label]; })) },
+        options: buttonIconSizeList.map(function (size) { return size.key; }),
+        if: { arg: "contentType", eq: contentTypeEnum.text_with_icon },
+    },
+    icon: {
+        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
+        options: iconList.map(function (icon) { return icon.key; }),
+        if: { arg: "contentType", eq: contentTypeEnum.icon_only },
+    },
+    iconSize: {
+        control: { type: "select", labels: Object.fromEntries(buttonIconSizeList.map(function (size) { return [size.key, size.label]; })) },
+        options: buttonIconSizeList.map(function (size) { return size.key; }),
+        if: { arg: "contentType", eq: contentTypeEnum.icon_only },
+    },
+    type: {
+        control: { type: "select" },
+        options: [buttonTypeEnum.fill, buttonTypeEnum.outline],
+        description: "Determines the type of the button",
+    },
+};

package/dist/components/Icons/IconView.d.ts

@@ -0,0 +1 @@
+export declare const IconView: () => import("react").JSX.Element;

package/dist/components/Icons/IconView.jsx

@@ -0,0 +1,23 @@
+import { iconList } from "../../utils/iconList";
+export var IconView = function () {
+    return (<>
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6" data-testid="icons-list">
+            {iconList.map(function (icon, index) {
+            return (<div key={index} className="flex flex-col items-center justify-center bg-gray-100 lu-border-rounded-lg lu-pd-200 shadow-md hover:bg-gray-200" data-testid="single-icon">
+                        <svg width="25" height="25" viewBox="0 0 32 32" fill="none" className="mb-2" role="img">
+                            <g clipPath="url(#clip0_9168_14965)">
+                                <path d={icon === null || icon === void 0 ? void 0 : icon.path} fill="#070808"/>
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_9168_14965">
+                                    <rect width="32" height="32" fill="black"/>
+                                </clipPath>
+                            </defs>
+                        </svg>
+                        <p className="lu-font-size-x-small lu-font-weight-regular text-gray-700 text-center">{icon === null || icon === void 0 ? void 0 : icon.label}</p>
+                    </div>);
+        })}
+        </div>
+
+    </>);
+};

package/dist/components/Icons/IconView.stories.d.ts

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

package/dist/components/Icons/IconView.stories.jsx

@@ -0,0 +1,8 @@
+import { IconView } from "./IconView";
+export default {
+    title: "Components/Icon",
+    component: IconView,
+    tags: ['!autodocs'],
+};
+var Template = function (args) { return <IconView {...args}/>; };
+export var iconView = Template.bind({});

package/dist/components/Icons/LUIcon.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from "@/types/interface";
+export declare const LUIcon: ({ size, fill, icon, className }: IconProps) => import("react").JSX.Element;

package/dist/components/Icons/LUIcon.jsx

@@ -0,0 +1,20 @@
+import { iconList } from "../../utils/iconList";
+export var LUIcon = function (_a) {
+    var _b;
+    var size = _a.size, fill = _a.fill, icon = _a.icon, className = _a.className;
+    var selectedIcon = iconList.find(function (item) { return item.key === icon; });
+    return (<>
+        <div data-testid="single-icon">
+            <svg className={"".concat(size, " ").concat(className)} viewBox="0 0 32 32" fill="none">
+                <g clip-path="url(#clip0_9168_14965)">
+                    <path d={(_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : ''} className={"".concat(fill, " icon")}/>
+                </g>
+                <defs>
+                    <clipPath id="clip0_9168_14965">
+                        <rect width="32" height="32" fill="black"/>
+                    </clipPath>
+                </defs>
+            </svg>
+        </div>
+    </>);
+};

package/dist/components/Icons/LUIcon.stories.d.ts

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

package/dist/components/Icons/LUIcon.stories.jsx

@@ -0,0 +1,29 @@
+import { LUIcon } from "./LUIcon";
+import { iconColorList, iconSizeList } from "../../utils";
+import { iconList } from "../../utils/iconList";
+export default {
+    title: "Components/Icon",
+    component: LUIcon,
+    tags: ['autodocs'],
+};
+var Template = function (args) { return <LUIcon {...args}/>; };
+export var icon = Template.bind({});
+icon.args = {
+    size: 'lu-icon-x-small',
+    fill: 'lu-primary-icon-default',
+    icon: iconList[0].key,
+};
+icon.argTypes = {
+    size: {
+        control: { type: "select", labels: Object.fromEntries(iconSizeList.map(function (size) { return [size.key, size.label]; })) },
+        options: iconSizeList.map(function (size) { return size.key; }),
+    },
+    fill: {
+        control: { type: "select", labels: Object.fromEntries(iconColorList.map(function (color) { return [color.key, color.label]; })) },
+        options: iconColorList.map(function (color) { return color.key; }),
+    },
+    icon: {
+        control: { type: "select", labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })) },
+        options: iconList.map(function (icon) { return icon.key; }),
+    }
+};

package/dist/components/Images/LuImage.d.ts

@@ -0,0 +1,2 @@
+import { AspectRatioProps } from "@/types/interface";
+export declare const Image: ({ image, aspectRatio, className }: AspectRatioProps) => import("react").JSX.Element;

package/dist/components/Images/LuImage.jsx

@@ -0,0 +1,6 @@
+export var Image = function (_a) {
+    var image = _a.image, aspectRatio = _a.aspectRatio, className = _a.className;
+    return (<div className="lu-width-25 lu-height-25" data-testid="lu-image">
+      <img src={image || ''} alt="Image" className={"lu-width-100 ".concat(aspectRatio, " ").concat(className)}/>
+    </div>);
+};

package/dist/components/Images/LuImage.stories.d.ts

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

package/dist/components/Images/LuImage.stories.jsx

@@ -0,0 +1,37 @@
+import { Image } from "./LuImage";
+import { landscapeaspectRatioList, portraitaspectRatioList } from "../../utils";
+import { orientationEnum } from "../../utils/enum";
+export default {
+    title: "Components/Image",
+    component: Image,
+};
+var Template = function (args, _a) {
+    var argTypes = _a.argTypes;
+    //Show aspectRatio options based on orientation(landscape) 
+    var isLandscape = args.orientation === orientationEnum.landscape;
+    argTypes.aspectRatio.options = isLandscape ? landscapeaspectRatioList.map(function (ratio) { return ratio.key; }) : portraitaspectRatioList.map(function (ratio) { return ratio.key; });
+    argTypes.aspectRatio.control.labels = Object.fromEntries((isLandscape ? landscapeaspectRatioList : portraitaspectRatioList).map(function (ratio) { return [
+        ratio.key,
+        ratio.label,
+    ]; }));
+    return <Image {...args}/>;
+};
+export var image = Template.bind({});
+image.args = {
+    image: '/images/demo-image.jpg',
+    orientation: orientationEnum.portrait,
+    aspectRatio: portraitaspectRatioList[0].key,
+    className: ''
+};
+image.argTypes = {
+    orientation: {
+        control: { type: "select" },
+        options: [orientationEnum.portrait, orientationEnum.landscape],
+    },
+    //Show Default aspectRatio options for portrait orientation
+    aspectRatio: {
+        control: { type: "select" },
+        options: portraitaspectRatioList.map(function (ratio) { return ratio.key; }),
+        labels: Object.fromEntries(portraitaspectRatioList.map(function (ratio) { return [ratio.key, ratio.label]; })),
+    },
+};

package/dist/components/Size/MinWidthHeight.d.ts

@@ -0,0 +1,2 @@
+import { MinWidthHeightProps } from "@/types/interface";
+export declare const MinWidthHeight: ({ minWidth, minHeight }: MinWidthHeightProps) => import("react").JSX.Element;

package/dist/components/Size/MinWidthHeight.jsx

@@ -0,0 +1,8 @@
+export var MinWidthHeight = function (_a) {
+    var minWidth = _a.minWidth, minHeight = _a.minHeight;
+    return (<>
+        <div className="w-fit">
+            <div className={"bg-blue-500 ".concat(minWidth, " ").concat(minHeight, " rounded")} data-testid="minWidthHeight-box"></div>
+        </div>
+    </>);
+};

package/dist/components/Size/MinWidthHeight.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { MinWidthHeightProps } from "@/types/interface";
+declare const _default: Meta;
+export default _default;
+export declare const minWidthAndHeight: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, MinWidthHeightProps>;

package/dist/components/Size/MinWidthHeight.stories.jsx

@@ -0,0 +1,22 @@
+import { MinWidthHeight } from "../../components/Size/MinWidthHeight";
+import { minHeights, minWidths } from "../../utils";
+export default {
+    title: "Components/Size",
+    component: MinWidthHeight,
+};
+var Template = function (args) { return <MinWidthHeight {...args}/>; };
+export var minWidthAndHeight = Template.bind({});
+minWidthAndHeight.args = {
+    minWidth: 'lu-min-width-100',
+    minHeight: 'lu-min-height-100',
+};
+minWidthAndHeight.argTypes = {
+    minWidth: {
+        control: { type: "select", labels: Object.fromEntries(minWidths.map(function (size) { return [size.key, size.label]; })) },
+        options: minWidths.map(function (size) { return size.key; }),
+    },
+    minHeight: {
+        control: { type: "select", labels: Object.fromEntries(minHeights.map(function (size) { return [size.key, size.label]; })) },
+        options: minHeights.map(function (size) { return size.key; }),
+    },
+};

package/dist/components/Size/WidthHeight.d.ts

@@ -0,0 +1,2 @@
+import { WidthHeightProps } from "@/types/interface";
+export declare const WidthHeight: ({ width, height }: WidthHeightProps) => import("react").JSX.Element;