linkedunion-design-kit 1.10.5 → 1.10.6

package/dist/src/components/Button/Button/Button.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .rounded-sm {
   border-radius: var(--radius-sm, 0.25rem);
 }

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

@@ -11,6 +11,7 @@ declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogAction: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof sizes;
@@ -27,4 +28,4 @@ declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.
     size?: keyof typeof sizes;
 } & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogAction, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/src/components/Modal/Modal.js

@@ -25,17 +25,19 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "../../lib/utils";
 import LUIcon from "../Icons/LUIcon";
+import { variant } from "../Typography/Heading/heading";
 export var sizes = {
-    sm: "w-sm rounded-lg",
-    md: "w-md rounded-lg",
-    lg: "w-lg rounded-lg",
-    xl: "w-xl rounded-lg",
-    full: "w-full rounded-none",
+    sm: "max-w-xs",
+    md: "max-w-lg",
+    lg: "max-w-4xl",
+    xl: "max-w-6xl",
+    full: "w-full",
 };
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 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)));
@@ -43,7 +45,7 @@ var DialogOverlay = React.forwardRef(function (_a, ref) {
 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, props = __rest(_a, ["className", "children", "size"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-0 border bg-background !py-4 px-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", sizes[size], className) }, props, { children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 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: "md" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-0 border bg-background !py-4 px-6 rounded-lg shadow-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", sizes[size], className) }, props, { children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 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: "md" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = function (_a) {
@@ -57,11 +59,11 @@ var DialogFooter = function (_a) {
 };
 DialogFooter.displayName = "DialogFooter";
 var titleSizeClasses = {
-    sm: "text-lg font-semibold",
-    md: "text-xl font-semibold",
-    lg: "text-2xl font-semibold",
-    xl: "text-2xl font-bold",
-    full: "text-2xl font-bold",
+    sm: variant["h5-600"],
+    md: variant["h5-600"],
+    lg: variant["h4-500"],
+    xl: variant["h4-500"],
+    full: variant["h4-500"],
 };
 var DialogTitle = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
@@ -73,4 +75,4 @@ var DialogDescription = React.forwardRef(function (_a, ref) {
     return (_jsx(DialogPrimitive.Description, __assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogAction, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

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

@@ -29,3 +29,4 @@ export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<imp
 export declare const SimpleModal: () => import("react/jsx-runtime").JSX.Element;
 export declare const ModalSizes: () => 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;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, sizes, } from "./Modal";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, DialogAction, sizes, } from "./Modal";
 import { Button } from "../Button/Button/Button";
 import { Body } from "../Typography/Body/body";
 import { Heading } from "../Typography/Heading/heading";
@@ -41,3 +41,4 @@ Default.args = {
 export var SimpleModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Simple Modal" }), _jsx(DialogDescription, { children: "This is a simple modal example using the Modal component." })] }), _jsx("div", { className: "py-4", children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
 export var ModalSizes = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(sizes).map(function (size) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", size, " Modal"] }) }), _jsxs(DialogContent, { size: size, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: [size, " Modal"] }), _jsxs(DialogDescription, { children: ["This is a ", size, " modal example using the Modal component."] })] }), _jsx("div", { className: "py-4", children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, size)); }) })); };
 export var InformationModalWithoutFooter = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Info Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { size: "lg", className: "text-center", children: "Contact Profile" }) }), _jsxs("div", { className: "flex flex-col items-center justify-center gap-7", children: [_jsxs(Avatar, { size: "huge", children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Body, { variant: "body-md", children: "Designation" }), _jsx(Heading, { variant: "heading-md", children: "Heading" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "envelope", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "testing@gmail.com" })] }), _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "phone", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "03764734829" })] })] }), _jsx(Body, { variant: "body-md", children: Dummy_Para })] })] })] })); };
+export var ModalWithActionButtons = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogDescription, { children: "Are you sure you want to proceed with this action? This cannot be undone." })] }), _jsx("div", { className: "py-4", children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) })] })] })] })); };

package/dist/src/components/Title/Title.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .main-title {
   position: relative;
   z-index: 10;

package/dist/src/components/Typography/Heading/heading.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .h1 {
   margin: calc(var(--spacing, 0.25rem) * 0);
   font-size: var(--text-2xl, 1.5rem);

package/dist/styles/global.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -8,11 +8,12 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --spacing: 0.25rem;
-    --container-sm: 24rem;
+    --container-xs: 20rem;
     --container-md: 28rem;
     --container-lg: 32rem;
-    --container-xl: 36rem;
+    --container-4xl: 56rem;
     --container-5xl: 64rem;
+    --container-6xl: 72rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -54,6 +55,7 @@
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
@@ -194,6 +196,9 @@
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -224,7 +229,7 @@
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border-width: 0;
   }
@@ -839,21 +844,15 @@
   .w-full {
     width: 100%;
   }
-  .w-lg {
-    width: var(--container-lg);
-  }
-  .w-md {
-    width: var(--container-md);
-  }
-  .w-sm {
-    width: var(--container-sm);
-  }
-  .w-xl {
-    width: var(--container-xl);
+  .max-w-4xl {
+    max-width: var(--container-4xl);
   }
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
@@ -869,9 +868,15 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1208,9 +1213,6 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
-  .rounded-none {
-    border-radius: 0;
-  }
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
@@ -2283,7 +2285,7 @@
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -2332,6 +2334,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
@@ -4099,6 +4105,14 @@
       color: var(--primary-foreground);
     }
   }
+  .data-\[state\=closed\]\:scale-95 {
+    &[data-state="closed"] {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .data-\[state\=closed\]\:animate-accordion-up {
     &[data-state="closed"] {
       animation: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))ease-out;
@@ -4109,6 +4123,11 @@
       animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
     }
   }
+  .data-\[state\=closed\]\:opacity-0 {
+    &[data-state="closed"] {
+      opacity: 0%;
+    }
+  }
   .data-\[state\=closed\]\:fade-out-0 {
     &[data-state="closed"] {
       --tw-exit-opacity: calc(0/100);
@@ -4121,16 +4140,6 @@
       --tw-exit-scale: .95;
     }
   }
-  .data-\[state\=closed\]\:slide-out-to-left-1\/2 {
-    &[data-state="closed"] {
-      --tw-exit-translate-x: calc(1/2*100%);
-    }
-  }
-  .data-\[state\=closed\]\:slide-out-to-top-\[48\%\] {
-    &[data-state="closed"] {
-      --tw-exit-translate-y: calc(48%*-1);
-    }
-  }
   .data-\[state\=inactive\]\:bg-blue-100 {
     &[data-state="inactive"] {
       background-color: #e2edf9;
@@ -4141,6 +4150,14 @@
       color: #276ab3;
     }
   }
+  .data-\[state\=open\]\:scale-100 {
+    &[data-state="open"] {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .data-\[state\=open\]\:animate-accordion-down {
     &[data-state="open"] {
       animation: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))ease-out;
@@ -4161,6 +4178,11 @@
       color: var(--muted-foreground);
     }
   }
+  .data-\[state\=open\]\:opacity-100 {
+    &[data-state="open"] {
+      opacity: 100%;
+    }
+  }
   .data-\[state\=open\]\:fade-in-0 {
     &[data-state="open"] {
       --tw-enter-opacity: calc(0/100);
@@ -4173,16 +4195,6 @@
       --tw-enter-scale: .95;
     }
   }
-  .data-\[state\=open\]\:slide-in-from-left-1\/2 {
-    &[data-state="open"] {
-      --tw-enter-translate-x: calc(1/2*100%);
-    }
-  }
-  .data-\[state\=open\]\:slide-in-from-top-\[48\%\] {
-    &[data-state="open"] {
-      --tw-enter-translate-y: calc(48%*-1);
-    }
-  }
   .data-\[state\=selected\]\:bg-gray-50 {
     &[data-state="selected"] {
       background-color: #fafafa;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "private": false,
   "files": [
     "dist",