linkedunion-design-kit 1.10.5-beta.0 → 1.10.5-beta.2

package/dist/src/components/Button/index.js

@@ -14,7 +14,7 @@ export var buttonStyles = {
         "light-indigo": "bg-indigo-100 text-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
         gray: "bg-gray-900 text-gray-50 hover:bg-gray-100 hover:text-gray-950 active:bg-gray-300 active:text-gray-950",
         "light-gray": "bg-gray-50 text-gray-950 hover:bg-gray-100 active:bg-gray-300",
-        disabled: "bg-gray-100 text-gray-300",
+        disabled: "bg-gray-100 text-gray-300 cursor-not-allowed",
     },
     size: {
         xl: "h-13 !py-3.5 !px-6 !text-base !font-normal !leading-normal",

package/dist/src/components/Card/contactProfile/ContactProfile.js

@@ -32,7 +32,7 @@ export var ContactProfile = function (_a) {
     };
     // Horizontal layout
     if (orientation === "horizontal") {
-        return (_jsxs("div", { className: "!p-5 bg-white rounded-xl flex ".concat(safeMediaPosition === "left" ? "sm:flex-row" : "sm:flex-row-reverse", " max-w-5xl !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover") }), _jsxs("div", { className: "flex-1 flex flex-col !gap-1 md:!gap-2.5 text-center sm:!text-left h-full justify-center min-w-0 ".concat(safeMediaPosition === "right" ? "order-1" : "order-2"), children: [_jsx(CardContent, {}), _jsx(CardButton, {})] })] }));
+        return (_jsxs("div", { className: "!p-5 bg-white rounded-xl flex ".concat(safeMediaPosition === "left" ? "sm:flex-row" : "sm:flex-row-reverse", " max-w-5xl !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover") }), _jsxs("div", { className: "flex-1 flex flex-col !gap-1 md:!gap-2.5 sm:!text-left h-full justify-center min-w-0 ".concat(safeMediaPosition === "right" ? "order-1" : "order-2"), children: [_jsx(CardContent, {}), _jsx(CardButton, {})] })] }));
     }
     // Vertical layout
     return (_jsxs("div", { className: "p-8 bg-white rounded-xl flex flex-col gap-6 max-w-md items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center"), children: [_jsx(CardMedia, { className: "w-full h-full aspect-5/4 object-cover" }), _jsx(CardContent, { className: "h-20" })] }), _jsx(CardButton, {})] }));

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Dialog } from "../../../components/ui/dialog";
+declare const meta: Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+export declare const Default: Story;
+export declare const WithoutCloseButton: Story;
+export declare const LongContent: Story;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "../../../components/ui/dialog";
+import { Button } from "../../../components/Button/Button/Button";
+var meta = {
+    title: "Components/Dialog",
+    component: Dialog,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export var Default = {
+    render: function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog Title" }), _jsx(DialogDescription, { children: "This is a simple dialog component. You can use it to display important information or get user confirmation." })] }), _jsx("div", { className: "py-4", children: _jsx("p", { className: "text-sm", children: "Dialog content goes here." }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", children: "Cancel" }), _jsx(Button, { children: "Confirm" })] })] })] })); },
+};
+export var WithoutCloseButton = {
+    render: function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { showCloseButton: false, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirmation Required" }), _jsx(DialogDescription, { children: "This dialog doesn't have a close button. You must use one of the action buttons below." })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", children: "Cancel" }), _jsx(Button, { children: "Confirm" })] })] })] })); },
+};
+export var LongContent = {
+    render: function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Terms and Conditions" }), _jsx(DialogDescription, { children: "Please read the following terms carefully." })] }), _jsxs("div", { className: "py-4 max-h-[400px] overflow-y-auto", children: [_jsx("p", { className: "text-sm mb-4", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx("p", { className: "text-sm mb-4", children: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx("p", { className: "text-sm mb-4", children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." }), _jsx("p", { className: "text-sm", children: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", children: "Decline" }), _jsx(Button, { children: "Accept" })] })] })] })); },
+};

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

@@ -39,7 +39,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, _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 translate-x-[-50%] translate-y-[-50%] gap-0 border bg-background 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 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 (_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 border bg-background 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 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", variant: "padded", size: iconSizes[size] }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })) })] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = function (_a) {
@@ -52,7 +52,7 @@ var DialogHeader = function (_a) {
 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 (_jsx("div", __assign({ className: cn("!py-4 !px-4", className) }, props)));
 };
 DialogBody.displayName = "DialogBody";
 var DialogFooter = function (_a) {
@@ -65,10 +65,10 @@ var DialogFooter = function (_a) {
 DialogFooter.displayName = "DialogFooter";
 var DialogTitle = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, size = _a.size, props = __rest(_a, ["className", "size"]);
+    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(titleSizeClasses[effectiveSize], "leading-normal text-gray-950", className), "data-size": effectiveSize }, props)));
+    return (_jsx(DialogPrimitive.Title, __assign({ ref: ref, className: cn("leading-normal text-gray-950", titleSizeClasses[effectiveSize], className), "data-size": effectiveSize }, props, { children: children })));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 var DialogSubTitle = React.forwardRef(function (_a, ref) {

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

@@ -37,9 +37,9 @@ export declare const titleSizeClasses: {
     full: string;
 };
 export declare const subTitleSizeClasses: {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    full: string;
+    readonly sm: `!pt-0 !px-4 !pb-3 ${string}`;
+    readonly md: `!pt-0 !px-4 !pb-3 ${string}`;
+    readonly lg: `!pt-0 !px-4 !pb-4 ${string}`;
+    readonly xl: `!pt-0 !px-4 !pb-4 ${string}`;
+    readonly full: `!pt-0 !px-4 !pb-4 ${string}`;
 };

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

@@ -1,11 +1,11 @@
 import { variant } from "../Typography/Heading/heading";
 import { variant as bodyVariant } from "../Typography/Body/body";
 export var sizes = {
-    sm: "max-w-xs",
-    md: "max-w-lg",
-    lg: "max-w-4xl",
-    xl: "max-w-6xl",
-    full: "w-full",
+    sm: "max-w-[min(20rem,calc(100%-2rem))]",
+    md: "max-w-[min(32rem,calc(100%-2rem))]",
+    lg: "max-w-[min(56rem,calc(100%-2rem))]",
+    xl: "max-w-[min(72rem,calc(100%-2rem))]",
+    full: "max-w-[calc(100%-2rem)]",
 };
 export var iconSizes = {
     sm: "sm",
@@ -38,6 +38,13 @@ export var titleSizeClasses = {
     xl: "!pt-4 !px-4 !pb-0 ".concat(variant["h4-600"]),
     full: "!pt-4 !px-4 !pb-0 ".concat(variant["h4-600"]),
 };
+// export const titleSizeClasses = {
+//   sm: `h5-600`,
+//   md: `h5-600`,
+//   lg: `h4-600`,
+//   xl: `h4-600`,
+//   full: `h4-600`,
+// } as const;
 export var subTitleSizeClasses = {
     sm: "!pt-0 !px-4 !pb-3 ".concat(bodyVariant["body-sm"]),
     md: "!pt-0 !px-4 !pb-3 ".concat(bodyVariant["body-md"]),

package/dist/src/components/ui/dialog.js

@@ -47,7 +47,7 @@ function DialogOverlay(_a) {
 }
 function DialogContent(_a) {
     var className = _a.className, children = _a.children, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? true : _b, props = __rest(_a, ["className", "children", "showCloseButton"]);
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ "data-slot": "dialog-content", className: cn("bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ "data-slot": "dialog-content", className: cn("bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
 }
 function DialogHeader(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);

package/dist/styles/global.css

@@ -11,9 +11,7 @@
     --container-xs: 20rem;
     --container-md: 28rem;
     --container-lg: 32rem;
-    --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;
@@ -867,15 +865,9 @@
   .w-xs {
     width: var(--container-xs);
   }
-  .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);
   }
@@ -891,18 +883,24 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-\[min\(20rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(20rem, calc(100% - 2rem));
+  }
+  .max-w-\[min\(32rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(32rem, calc(100% - 2rem));
+  }
+  .max-w-\[min\(56rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(56rem, calc(100% - 2rem));
+  }
+  .max-w-\[min\(72rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(72rem, calc(100% - 2rem));
+  }
   .max-w-fit {
     max-width: fit-content;
   }
-  .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);
   }
@@ -1650,6 +1648,9 @@
   .bg-yellow-950 {
     background-color: #473800;
   }
+  .lu-bg-transparent {
+    background-color: transparent;
+  }
   .bg-linear-to-t {
     --tw-gradient-position: to top;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -1827,9 +1828,6 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -3224,6 +3222,13 @@
       }
     }
   }
+  .hover\:lu-bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .hover\:text-blue-50 {
     &:hover {
       @media (hover: hover) {
@@ -3725,6 +3730,11 @@
       background-color: var(--accent);
     }
   }
+  .focus\:lu-bg-transparent {
+    &:focus {
+      background-color: transparent;
+    }
+  }
   .focus\:text-accent-foreground {
     &:focus {
       color: var(--accent-foreground);
@@ -3966,6 +3976,11 @@
       background-color: #dbac00;
     }
   }
+  .active\:lu-bg-transparent {
+    &:active {
+      background-color: transparent;
+    }
+  }
   .active\:text-blue-50 {
     &:active {
       color: #fbfcfe;
@@ -5286,11 +5301,6 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 }
-@layer utilities {
-  .lu-bg-transparent {
-    background-color: transparent;
-  }
-}
 @property --tw-border-spacing-x {
   syntax: "<length>";
   inherits: false;

package/package.json

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