linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Modal/{Modal.js → Modal.jsx}

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "../../lib/utils";
@@ -34,12 +22,23 @@ var DialogClose = DialogPrimitive.Close;
 var DialogAction = DialogPrimitive.Close;
 var DialogOverlay = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Overlay, __assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
+    return (<DialogPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)} {...props}/>);
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.shadow, shadow = _c === void 0 ? true : _c, _d = _a.showCloseIcon, showCloseIcon = _d === void 0 ? true : _d, props = __rest(_a, ["className", "children", "size", "shadow", "showCloseIcon"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(ModalSizeContext.Provider, { value: size, children: _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 bg-white rounded-lg transition-all duration-300 ease-in-out data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 overflow-hidden", sizes[size], shadow ? "shadow-backdrop-shadow-xl" : "shadow-none", className) }, props, { children: [children, showCloseIcon && (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 z-[100] opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-offset-2 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(LUIcon, { icon: "xMark", size: iconSizes[size] }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })) })] }));
+    return (<DialogPortal>
+        <DialogOverlay />
+        <ModalSizeContext.Provider value={size}>
+          <DialogPrimitive.Content ref={ref} className={cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 bg-white rounded-lg transition-all duration-300 ease-in-out data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 overflow-hidden", sizes[size], shadow ? "shadow-backdrop-shadow-xl" : "shadow-none", className)} {...props}>
+            {children}
+            {showCloseIcon && (<DialogPrimitive.Close className="absolute right-4 top-4 z-[100] opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-offset-2 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <LUIcon icon="xMark" size={iconSizes[size]}/>
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>)}
+          </DialogPrimitive.Content>
+        </ModalSizeContext.Provider>
+      </DialogPortal>);
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = function (_a) {
@@ -47,12 +46,12 @@ var DialogHeader = function (_a) {
     var className = _a.className, _c = _a.variant, variant = _c === void 0 ? "none" : _c, size = _a.size, props = __rest(_a, ["className", "variant", "size"]);
     var contextSize = React.useContext(ModalSizeContext);
     var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
-    return (_jsx("div", __assign({ className: cn("flex flex-col text-center sm:text-left bg-white sticky top-0 z-10", headerVariants[variant], className), "data-size": effectiveSize }, props)));
+    return (<div className={cn("flex flex-col text-center sm:text-left bg-white sticky top-0 z-10", headerVariants[variant], className)} data-size={effectiveSize} {...props}/>);
 };
 DialogHeader.displayName = "DialogHeader";
 var DialogBody = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ className: cn("py-4 px-4", className) }, props)));
+    return (<div className={cn("!py-4 !px-4", className)} {...props}/>);
 };
 DialogBody.displayName = "DialogBody";
 var DialogFooter = function (_a) {
@@ -60,7 +59,7 @@ var DialogFooter = function (_a) {
     var className = _a.className, size = _a.size, _c = _a.variant, variant = _c === void 0 ? "none" : _c, props = __rest(_a, ["className", "size", "variant"]);
     var contextSize = React.useContext(ModalSizeContext);
     var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
-    return (_jsx("div", __assign({ className: cn("flex", footerSizeClasses[effectiveSize], footerVariants[variant], className), "data-size": effectiveSize }, props)));
+    return (<div className={cn("flex", footerSizeClasses[effectiveSize], footerVariants[variant], className)} data-size={effectiveSize} {...props}/>);
 };
 DialogFooter.displayName = "DialogFooter";
 var DialogTitle = React.forwardRef(function (_a, ref) {
@@ -68,7 +67,9 @@ var DialogTitle = React.forwardRef(function (_a, ref) {
     var className = _a.className, size = _a.size, children = _a.children, props = __rest(_a, ["className", "size", "children"]);
     var contextSize = React.useContext(ModalSizeContext);
     var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
-    return (_jsx(DialogPrimitive.Title, __assign({ ref: ref, className: cn("leading-normal text-gray-950", titleSizeClasses[effectiveSize], className), "data-size": effectiveSize }, props, { children: children })));
+    return (<DialogPrimitive.Title ref={ref} className={cn("leading-normal text-gray-950", titleSizeClasses[effectiveSize], className)} data-size={effectiveSize} {...props}>
+      {children}
+    </DialogPrimitive.Title>);
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 var DialogSubTitle = React.forwardRef(function (_a, ref) {
@@ -76,7 +77,7 @@ var DialogSubTitle = React.forwardRef(function (_a, ref) {
     var className = _a.className, size = _a.size, props = __rest(_a, ["className", "size"]);
     var contextSize = React.useContext(ModalSizeContext);
     var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
-    return (_jsx(DialogPrimitive.Description, __assign({ ref: ref, className: cn(subTitleSizeClasses[effectiveSize], "text-gray-950", className), "data-size": effectiveSize }, props)));
+    return (<DialogPrimitive.Description ref={ref} className={cn(subTitleSizeClasses[effectiveSize], "text-gray-950", className)} data-size={effectiveSize} {...props}/>);
 });
 DialogSubTitle.displayName = DialogPrimitive.Description.displayName;
 export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogAction, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogSubTitle, };

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

@@ -81,12 +81,12 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
-export declare const SimpleModal: () => import("react/jsx-runtime").JSX.Element;
-export declare const ModalSizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const HeaderVariants: () => import("react/jsx-runtime").JSX.Element;
-export declare const FooterVariants: () => import("react/jsx-runtime").JSX.Element;
+export declare const SimpleModal: () => React.JSX.Element;
+export declare const ModalSizes: () => React.JSX.Element;
+export declare const HeaderVariants: () => React.JSX.Element;
+export declare const FooterVariants: () => React.JSX.Element;
 export declare const FooterButtonsLeftPosition: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -95,13 +95,13 @@ export declare const FooterButtonsLeftPosition: {
         };
     };
 };
-export declare const FooterButtonsRightPosition: () => import("react/jsx-runtime").JSX.Element;
-export declare const FooterButtonsMiddlePosition: () => import("react/jsx-runtime").JSX.Element;
-export declare const ShadowVariations: () => import("react/jsx-runtime").JSX.Element;
-export declare const InformationModalWithoutFooter: () => import("react/jsx-runtime").JSX.Element;
-export declare const ModalWithActionButtons: () => import("react/jsx-runtime").JSX.Element;
-export declare const OutlineModal: () => import("react/jsx-runtime").JSX.Element;
-export declare const FullWidthButtonsModal: () => import("react/jsx-runtime").JSX.Element;
-export declare const BlockButtonModal: () => import("react/jsx-runtime").JSX.Element;
-export declare const NoCloseIconModal: () => import("react/jsx-runtime").JSX.Element;
-export declare const ModalWithoutHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const FooterButtonsRightPosition: () => React.JSX.Element;
+export declare const FooterButtonsMiddlePosition: () => React.JSX.Element;
+export declare const ShadowVariations: () => React.JSX.Element;
+export declare const InformationModalWithoutFooter: () => React.JSX.Element;
+export declare const ModalWithActionButtons: () => React.JSX.Element;
+export declare const OutlineModal: () => React.JSX.Element;
+export declare const FullWidthButtonsModal: () => React.JSX.Element;
+export declare const BlockButtonModal: () => React.JSX.Element;
+export declare const NoCloseIconModal: () => React.JSX.Element;
+export declare const ModalWithoutHeader: () => React.JSX.Element;

package/dist/src/components/Modal/Modal.stories.jsx

@@ -0,0 +1,487 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogClose, DialogAction, } from "./Modal";
+import { Button } from "../Button/Button/Button";
+import { Body } from "../Typography/Body/body";
+import { Heading } from "../Typography/Heading/heading";
+import LUIcon from "../Icons/LUIcon";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/Avatar/Avatar";
+import { Dummy_Para } from "../../utils/constants";
+import { footerVariants, headerVariants, sizes } from ".";
+export default {
+    title: "Components/Modal",
+    component: Dialog,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: Object.keys(sizes),
+            description: "Defines the size of the modal.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        headerVariants: {
+            control: { type: "select" },
+            options: Object.keys(headerVariants),
+            description: "Defines the variant style of the modal header.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "none" },
+            },
+        },
+        footerVariants: {
+            control: { type: "select" },
+            options: Object.keys(footerVariants),
+            description: "Defines the variant style of the modal footer.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "none" },
+            },
+        },
+        shadow: {
+            control: { type: "boolean" },
+            description: "Enable or disable modal shadow.",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        showCloseIcon: {
+            control: { type: "boolean" },
+            description: "Show or hide the close icon in the modal.",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+    },
+};
+var Template = function (args) {
+    var headerVariantProp = args.headerVariants, footerVariantProp = args.footerVariants, shadow = args.shadow, contentProps = __rest(args, ["headerVariants", "footerVariants", "shadow"]);
+    return (<Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Modal</Button>
+      </DialogTrigger>
+      <DialogContent {...contentProps} shadow={shadow}>
+        <DialogHeader variant={headerVariantProp}>
+          <DialogTitle>Modal Title</DialogTitle>
+          <DialogSubTitle>Subtitle</DialogSubTitle>
+        </DialogHeader>
+        <DialogBody>You can put any content here.</DialogBody>
+        <DialogFooter variant={footerVariantProp}>
+          <DialogClose asChild>
+            <Button>Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>);
+};
+export var Default = Template.bind({});
+Default.args = {
+    size: "md",
+    headerVariants: "none",
+    footerVariants: "none",
+    shadow: true,
+    showCloseIcon: true,
+};
+export var SimpleModal = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="sm">
+      <DialogHeader>
+        <DialogTitle>Simple Modal</DialogTitle>
+        <DialogSubTitle>Subtitle</DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>You can put any content here.</DialogBody>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button>Close</Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var ModalSizes = function () { return (<div className="flex flex-row gap-4">
+    {Object.keys(sizes).map(function (size) { return (<Dialog key={size}>
+        <DialogTrigger asChild>
+          <Button>Open {size} Modal</Button>
+        </DialogTrigger>
+        <DialogContent size={size}>
+          <DialogHeader>
+            <DialogTitle>{size} Modal</DialogTitle>
+            <DialogSubTitle>
+              This is a {size} modal example using the Modal component.
+            </DialogSubTitle>
+          </DialogHeader>
+          <DialogBody>You can put any content here.</DialogBody>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button>Close</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>); })}
+  </div>); };
+export var HeaderVariants = function () { return (<div className="flex flex-row gap-4">
+    {Object.keys(headerVariants).map(function (variant) { return (<Dialog key={variant}>
+        <DialogTrigger asChild>
+          <Button>Open {variant} Header</Button>
+        </DialogTrigger>
+        <DialogContent size="md">
+          <DialogHeader variant={variant}>
+            <DialogTitle>{variant} Header</DialogTitle>
+            <DialogSubTitle>
+              This modal uses the &quot;{variant}&quot; header variant.
+            </DialogSubTitle>
+          </DialogHeader>
+          <DialogBody>
+            <Body variant="body-md">
+              This demonstrates the {variant} header style.
+            </Body>
+          </DialogBody>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button>Close</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>); })}
+  </div>); };
+export var FooterVariants = function () { return (<div className="flex flex-row gap-4">
+    {Object.keys(footerVariants).map(function (variant) { return (<Dialog key={variant}>
+        <DialogTrigger asChild>
+          <Button>Open {variant} Footer</Button>
+        </DialogTrigger>
+        <DialogContent size="md">
+          <DialogHeader>
+            <DialogTitle>{variant} Footer</DialogTitle>
+            <DialogSubTitle>
+              This modal uses the &quot;{variant}&quot; footer variant.
+            </DialogSubTitle>
+          </DialogHeader>
+          <DialogBody>
+            <Body variant="body-md">
+              This demonstrates the {variant} footer style.
+            </Body>
+          </DialogBody>
+          <DialogFooter variant={variant}>
+            <DialogClose asChild>
+              <Button>Close</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>); })}
+  </div>); };
+export var FooterButtonsLeftPosition = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="md">
+      <DialogHeader>
+        <DialogTitle>Confirm Action</DialogTitle>
+        <DialogSubTitle>SubTitle</DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+      <DialogFooter className="gap-2">
+        <Button onClick={function () { return alert("Action confirmed!"); }}>Confirm</Button>
+        <Button variant="outline" onClick={function () { return alert("Action cancelled!"); }}>
+          Cancel
+        </Button>
+        <Button className="ms-auto">Help</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+FooterButtonsLeftPosition.parameters = {
+    docs: {
+        description: {
+            story: "On lg, footer buttons will be lg; on md, footer buttons will be md; and so on. The button size matches the modal size.",
+        },
+    },
+};
+export var FooterButtonsRightPosition = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="md">
+      <DialogHeader>
+        <DialogTitle>Confirm Action</DialogTitle>
+        <DialogSubTitle>SubTitle</DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+      <DialogFooter>
+        <Button>Help</Button>
+        <Button onClick={function () { return alert("Action confirmed!"); }} className="ms-auto mr-2">
+          Confirm
+        </Button>
+        <Button variant="outline" onClick={function () { return alert("Action cancelled!"); }}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var FooterButtonsMiddlePosition = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="md">
+      <DialogHeader>
+        <DialogTitle>Confirm Action</DialogTitle>
+        <DialogSubTitle>SubTitle</DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+      <DialogFooter className="flex-row justify-center items-center gap-2">
+        <Button onClick={function () { return alert("Action confirmed!"); }}>Confirm</Button>
+        <Button variant="outline" onClick={function () { return alert("Action cancelled!"); }}>
+          Cancel
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var ShadowVariations = function () { return (<div className="flex flex-row gap-4">
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Shadow</Button>
+      </DialogTrigger>
+      <DialogContent size="md" shadow={true}>
+        <DialogHeader>
+          <DialogTitle>Shadow True</DialogTitle>
+          <DialogSubTitle>This modal uses the custom shadow.</DialogSubTitle>
+        </DialogHeader>
+        <DialogBody>
+          <Body variant="body-md">This demonstrates the shadow style.</Body>
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button>Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open No Shadow</Button>
+      </DialogTrigger>
+      <DialogContent size="md" shadow={false}>
+        <DialogHeader>
+          <DialogTitle>Shadow False</DialogTitle>
+          <DialogSubTitle>This modal has no shadow.</DialogSubTitle>
+        </DialogHeader>
+        <DialogBody>
+          <Body variant="body-md">This demonstrates the no shadow style.</Body>
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button>Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>); };
+export var InformationModalWithoutFooter = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Info Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="lg">
+      <DialogHeader>
+        <DialogTitle size="lg" className="text-center">
+          Contact Profile
+        </DialogTitle>
+      </DialogHeader>
+      <DialogBody className="flex flex-col items-center justify-center gap-7">
+        <Avatar size="huge">
+          <AvatarImage alt="Avatar" src="/images/avatar.png"/>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col items-center">
+          <Body variant="body-md">Designation</Body>
+          <Heading variant="heading-md">Heading</Heading>
+        </div>
+        <div className="flex flex-col">
+          <div className="flex items-center gap-2 min-w-0">
+            <LUIcon icon="envelope" size="lg"/>
+            <Body variant="body-md" className="text-gray-600 truncate min-w-0">
+              testing@gmail.com
+            </Body>
+          </div>
+          <div className="flex items-center gap-2 min-w-0">
+            <LUIcon icon="phone" size="lg"/>
+            <Body variant="body-md" className="text-gray-600 truncate min-w-0">
+              03764734829
+            </Body>
+          </div>
+        </div>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+    </DialogContent>
+  </Dialog>); };
+export var ModalWithActionButtons = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="md">
+      <DialogHeader>
+        <DialogTitle>Confirm Action</DialogTitle>
+        <DialogSubTitle>
+          Are you sure you want to proceed with this action? This cannot be
+          undone.
+        </DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+      <DialogFooter>
+        <DialogAction asChild>
+          <Button variant="fill" className="mr-2" onClick={function () { return alert("Action confirmed!"); }}>
+            Confirm
+          </Button>
+        </DialogAction>
+        <DialogClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var OutlineModal = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Outline Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="md">
+      <DialogHeader variant="outline">
+        <DialogTitle>Outline Modal</DialogTitle>
+        <DialogSubTitle>
+          This modal uses the &quot;outline&quot; header variant.
+        </DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+      <DialogFooter variant="outline">
+        <DialogClose asChild>
+          <Button>Close</Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var FullWidthButtonsModal = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Full Width Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="lg">
+      <DialogHeader variant="outline">
+        <DialogTitle>Outline Modal</DialogTitle>
+        <DialogSubTitle>
+          This modal uses the &quot;outline&quot; shadow variant.
+        </DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+      <DialogFooter variant="outline">
+        <DialogAction asChild>
+          <Button variant="fill" size="lg" className="w-1/2 mr-2" onClick={function () { return alert("Action confirmed!"); }}>
+            Confirm
+          </Button>
+        </DialogAction>
+        <DialogClose asChild>
+          <Button variant="outline" size="lg" className="w-1/2" onClick={function () { return alert("Action cancelled!"); }}>
+            Close
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var BlockButtonModal = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Block Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="lg">
+      <DialogHeader variant="outline">
+        <DialogTitle>Outline Modal</DialogTitle>
+        <DialogSubTitle>
+          This modal uses the &quot;outline&quot; shadow variant.
+        </DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+      <DialogFooter variant="outline">
+        <DialogAction asChild>
+          <Button variant="fill" size="lg" className="w-full" onClick={function () { return alert("Action confirmed!"); }}>
+            Confirm
+          </Button>
+        </DialogAction>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var NoCloseIconModal = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Modal Without Close Icon</Button>
+    </DialogTrigger>
+    <DialogContent size="md" showCloseIcon={false}>
+      <DialogHeader>
+        <DialogTitle>No Close Icon</DialogTitle>
+        <DialogSubTitle>
+          This modal does not show the close icon.
+        </DialogSubTitle>
+      </DialogHeader>
+      <DialogBody>
+        You can put any content here. Use the footer button to close.
+      </DialogBody>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button>Close</Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>); };
+export var ModalWithoutHeader = function () { return (<Dialog>
+    <DialogTrigger asChild>
+      <Button>Open Info Modal</Button>
+    </DialogTrigger>
+    <DialogContent size="lg">
+      <DialogHeader className="min-h-[3rem]" variant="outline"/>
+      <DialogBody className="flex flex-col items-center justify-center gap-7">
+        <Avatar size="huge">
+          <AvatarImage alt="Avatar" src="/images/avatar.png"/>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col items-center">
+          <Body variant="body-md">Designation</Body>
+          <Heading variant="heading-md">Heading</Heading>
+        </div>
+        <div className="flex flex-col">
+          <div className="flex items-center gap-2 min-w-0">
+            <LUIcon icon="envelope" size="lg"/>
+            <Body variant="body-md" className="text-gray-600 truncate min-w-0">
+              testing@gmail.com
+            </Body>
+          </div>
+          <div className="flex items-center gap-2 min-w-0">
+            <LUIcon icon="phone" size="lg"/>
+            <Body variant="body-md" className="text-gray-600 truncate min-w-0">
+              03764734829
+            </Body>
+          </div>
+        </div>
+        <Body variant="body-md">{Dummy_Para}</Body>
+      </DialogBody>
+    </DialogContent>
+  </Dialog>); };

package/dist/src/components/Pagination/pagination.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ButtonProps } from "../Button/Button/Button";
 import LUIcon from "../Icons/LUIcon";
 declare const Pagination: {
-    ({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
     displayName: string;
 };
 declare const PaginationContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
@@ -14,20 +14,20 @@ type PaginationLinkProps = {
     variant?: ButtonProps["variant"];
 } & React.ComponentProps<"a">;
 declare const PaginationLink: {
-    ({ className, isActive, size, color, variant, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, isActive, size, color, variant, ...props }: PaginationLinkProps): React.JSX.Element;
     displayName: string;
 };
 declare const PaginationPrevious: {
-    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
     displayName: string;
 };
 declare const PaginationNext: {
-    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
     displayName: string;
 };
 type PaginationEllipsisProps = Omit<React.ComponentProps<typeof LUIcon>, "icon">;
 declare const PaginationEllipsis: {
-    ({ color, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
+    ({ color, ...props }: PaginationEllipsisProps): React.JSX.Element;
     displayName: string;
 };
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };