linkedunion-design-kit 0.1.7 → 0.1.8

package/dist/app/layout.d.ts

@@ -3,4 +3,4 @@ import '../styles/globals.css';
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: {
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/app/layout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Inter } from 'next/font/google';
+import '../styles/globals.css';
+var inter = Inter({ subsets: ['latin'] });
+export var metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (_jsx("html", { lang: "en", children: _jsx("body", { className: inter.className, children: children }) }));
+}

package/dist/app/page.d.ts

@@ -1 +1 @@
-export default function Home(): import("react").JSX.Element;
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/app/page.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+export default function Home() {
+    return (_jsxs("main", { className: "flex min-h-screen flex-col items-center justify-between p-24", children: [_jsxs("div", { className: "z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex", children: [_jsxs("p", { className: "fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30", children: ["Get started by editing\u00A0", _jsx("code", { className: "font-mono font-bold", children: "app/page.tsx" })] }), _jsx("div", { className: "fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none", children: _jsxs("a", { className: "pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0", href: "https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", target: "_blank", rel: "noopener noreferrer", children: ["By", ' ', _jsx(Image, { src: "/vercel.svg", alt: "Vercel Logo", className: "dark:invert", width: 100, height: 24, priority: true })] }) })] }), _jsx("div", { className: "relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]", children: _jsx(Image, { className: "relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert", src: "/next.svg", alt: "Next.js Logo", width: 180, height: 37, priority: true }) }), _jsxs("div", { className: "mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left", children: [_jsxs("a", { href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Docs", ' ', _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Find in-depth information about Next.js features and API." })] }), _jsxs("a", { href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Learn", ' ', _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Learn about Next.js in an interactive course with\u00A0quizzes!" })] }), _jsxs("a", { href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Templates", ' ', _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Explore the Next.js 13 playground." })] }), _jsxs("a", { href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Deploy", ' ', _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Instantly deploy your Next.js site to a shareable URL with Vercel." })] })] })] }));
+}

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

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

package/dist/components/Border/BorderRadius/BorderRadius.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BorderRadiusTable } from "./BorderRadiusTable";
+import { BorderRadiusView } from "./BorderRadiusView";
+export var BorderRadius = function (_a) {
+    var borderRadius = _a.borderRadius;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Border Radius" }), _jsx(BorderRadiusTable, {}), _jsx("div", { className: "lu-mt-150", children: _jsx(BorderRadiusView, { borderRadius: borderRadius }) })] }));
+};

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

@@ -0,0 +1,29 @@
+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 { BorderRadius } from "./BorderRadius";
+import { borderRadiusList } from "../../../utils";
+export default {
+    title: "Components/Border",
+    component: BorderRadius,
+};
+var Template = function (args) { return _jsx(BorderRadius, __assign({}, 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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var BorderRadiusView = function (_a) {
+    var borderRadius = _a.borderRadius;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "border-primary-600 lu-pd-200 lu-size-2500 lu-border-width-125 ".concat(borderRadius), "data-testid": "border-radius", children: _jsx("p", { className: "bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded lu-font-size-x-small", children: borderRadius }) }) }));
+};

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

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

package/dist/components/Border/BorderWidth/BorderWidth.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BorderWidthTable } from "./BorderWidthTable";
+import { ViewBorderWidth } from "./ViewBorderWidth";
+export var BorderWidth = function (_a) {
+    var border = _a.border;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Border Width" }), _jsx(BorderWidthTable, {}), _jsx("div", { className: "lu-mt-150", children: _jsx(ViewBorderWidth, { border: border }) })] }));
+};

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

@@ -0,0 +1,29 @@
+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 { BorderWidth } from "./BorderWidth";
+import { borderWidthList } from "../../../utils";
+export default {
+    title: "Components/Border",
+    component: BorderWidth,
+};
+var Template = function (args) { return _jsx(BorderWidth, __assign({}, 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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var ViewBorderWidth = function (_a) {
+    var border = _a.border;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "border-primary-600 lu-border-rounded-2xl lu-pd-200 lu-size-2500 ".concat(border), "data-testid": "border-width", children: _jsx("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", children: border }) }) }));
+};

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

@@ -1,2 +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;
+export declare const Button: ({ contentType, variant, label, iconLeft, iconRight, onClick, shape, size, leftIconSize, rightIconSize, className, icon, iconSize, type }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_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

@@ -0,0 +1,121 @@
+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 __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 { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(Button, __assign({}, 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/Color/Color.d.ts

@@ -1,3 +1,2 @@
 import { ColorProps } from "@/types/interface";
-import React from "react";
-export declare const Color: ({ label, color }: ColorProps) => React.JSX.Element;
+export declare const Color: ({ label, color }: ColorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Color/Color.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Color = function (_a) {
+    var label = _a.label, color = _a.color;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-bold mb-4", children: label }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded ".concat(color), "data-testid": "color-box" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: color === null || color === void 0 ? void 0 : color.replace('bg-', '') }), _jsx("code", { className: "text-sm", children: color })] })] })] }));
+};

package/dist/components/Color/Color.stories.js

@@ -0,0 +1,88 @@
+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 { Color } from "../../components/Color/Color";
+import { colorGroups } from "../../utils";
+export default {
+    title: "Components/Color",
+    component: Color,
+    argTypes: {
+        label: { control: "text" },
+    },
+};
+var Template = function (args) { return _jsx(Color, __assign({}, args)); };
+export var Primary = Template.bind({});
+Primary.args = {
+    label: "Primary",
+    color: "bg-primary-500", // Default color
+};
+Primary.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.primary,
+    },
+};
+export var Gray = Template.bind({});
+Gray.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.gray,
+    },
+};
+Gray.args = {
+    label: "Gray",
+    color: "bg-gray-500",
+};
+export var Success = Template.bind({});
+Success.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.success,
+    },
+};
+Success.args = {
+    label: "Success",
+    color: "bg-success-500",
+};
+export var Warning = Template.bind({});
+Warning.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.warning,
+    },
+};
+Warning.args = {
+    label: "Warning",
+    color: "bg-warning-500",
+};
+export var Danger = Template.bind({});
+Danger.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.danger,
+    },
+};
+Danger.args = {
+    label: "Danger",
+    color: "bg-danger-500",
+};
+export var Info = Template.bind({});
+Info.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: colorGroups.info,
+    },
+};
+Info.args = {
+    label: "Info",
+    color: "bg-info-500",
+};

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

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

package/dist/components/Icons/IconView.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconList } from "../../utils/iconList";
+export var IconView = function () {
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6", "data-testid": "icons-list", children: iconList.map(function (icon, index) {
+                return (_jsxs("div", { 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", children: [_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 32 32", fill: "none", className: "mb-2", role: "img", children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { d: icon === null || icon === void 0 ? void 0 : icon.path, fill: "#070808" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }), _jsx("p", { className: "lu-font-size-x-small lu-font-weight-regular text-gray-700 text-center", children: icon === null || icon === void 0 ? void 0 : icon.label })] }, index));
+            }) }) }));
+};

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

@@ -0,0 +1,20 @@
+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 { IconView } from "./IconView";
+export default {
+    title: "Components/Icon",
+    component: IconView,
+    tags: ['!autodocs'],
+};
+var Template = function (args) { return _jsx(IconView, __assign({}, args)); };
+export var iconView = Template.bind({});

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

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

package/dist/components/Icons/LUIcon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 (_jsx(_Fragment, { children: _jsx("div", { "data-testid": "single-icon", children: _jsxs("svg", { className: "".concat(size, " ").concat(className), viewBox: "0 0 32 32", fill: "none", children: [_jsx("g", { "clip-path": "url(#clip0_9168_14965)", children: _jsx("path", { d: (_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : '', className: "".concat(fill, " icon") }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }) }) }));
+};

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

@@ -0,0 +1,41 @@
+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 { 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 _jsx(LUIcon, __assign({}, 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

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

package/dist/components/Images/LuImage.js

@@ -0,0 +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) }) }));
+};

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

@@ -0,0 +1,49 @@
+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 { 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 _jsx(Image, __assign({}, 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

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

package/dist/components/Size/MinWidthHeight.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var MinWidthHeight = function (_a) {
+    var minWidth = _a.minWidth, minHeight = _a.minHeight;
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-fit", children: _jsx("div", { className: "bg-blue-500 ".concat(minWidth, " ").concat(minHeight, " rounded"), "data-testid": "minWidthHeight-box" }) }) }));
+};