linkedunion-design-kit 1.10.4 → 1.10.5-beta.1

package/dist/build/types/app/layout.js

@@ -1,4 +1,4 @@
-// File: /Users/sameersultan/Desktop/linkedunion-design-kit/app/layout.tsx
+// File: /Users/avialdosolutions/linkedunion-design-kit/linkedunion-design-kit/app/layout.tsx
 import * as entry from '../../../app/layout.js';
 // Check that the entry is a valid entry
 checkFields();

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

@@ -1,4 +1,4 @@
-// File: /Users/sameersultan/Desktop/linkedunion-design-kit/app/page.tsx
+// File: /Users/avialdosolutions/linkedunion-design-kit/linkedunion-design-kit/app/page.tsx
 import * as entry from '../../../app/page.js';
 // Check that the entry is a valid entry
 checkFields();

package/dist/index.d.ts

@@ -23,11 +23,15 @@ export { AppIcon } from "./src/components/AppIcons";
 export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
 export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";
 export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
-export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, } from "./src/components/Table/Table";
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableButton, TableCellPadded, TableFooter, } from "./src/components/Table/Table";
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./src/components/Dropdown/DropdownMenu/DropdownMenu";
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
 export { Skeleton } from "./src/components/Skeleton/skeleton";
 export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogAction, DialogClose, } from "./src/components/Modal/Modal";
+export { DatePicker } from "./src/components/DatePicker/DatePicker";
+export { TimePicker } from "./src/components/TimePicker/TimePicker";

package/dist/index.js

@@ -23,11 +23,15 @@ export { AppIcon } from "./src/components/AppIcons";
 export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
 export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";
 export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
-export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, } from "./src/components/Table/Table";
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableButton, TableCellPadded, TableFooter, } from "./src/components/Table/Table";
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./src/components/Dropdown/DropdownMenu/DropdownMenu";
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
 export { Skeleton } from "./src/components/Skeleton/skeleton";
 export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogAction, DialogClose, } from "./src/components/Modal/Modal";
+export { DatePicker } from "./src/components/DatePicker/DatePicker";
+export { TimePicker } from "./src/components/TimePicker/TimePicker";

package/dist/src/components/Alerts/Alert/alert.js

@@ -1,3 +1,4 @@
+"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/src/components/Avatar/Avatar/Avatar1.stories.d.ts

@@ -0,0 +1,17 @@
+import { Avatar } from "../../../components/ui/avatar";
+import { Meta } from "@storybook/react";
+import { avatar1Shape, avatar1Size } from ".";
+declare const _default: Meta<typeof Avatar>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
+    size?: keyof typeof avatar1Size;
+    shape?: keyof typeof avatar1Shape;
+    status?: "online" | "offline" | "busy" | "away";
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const AvatarSize: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarFallBackValue: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarShape: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarWithNoImageAndFallBackValue: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarShapeSizeCombination: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarStatusIndicator: () => import("react/jsx-runtime").JSX.Element;
+export declare const RoundedAvatarStatusIndicatorSize: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Avatar/Avatar/Avatar1.stories.js

@@ -0,0 +1,68 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarImage, AvatarFallback } from "../../../components/ui/avatar";
+import { avatar1Shape, avatar1Size } from ".";
+export default {
+    title: "Components/Avatar/Avatar1",
+    component: Avatar,
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+                options: Object.keys(avatar1Size),
+            },
+            description: "The size of the avatar.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+                options: Object.keys(avatar1Shape),
+            },
+            description: "The shape of the avatar.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "rounded" },
+            },
+        },
+        status: {
+            control: {
+                type: "select",
+                options: ["online", "offline", "busy", "away"],
+            },
+            description: "The status of the avatar.",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+    },
+};
+var Template = function (args) {
+    return (_jsxs(Avatar, __assign({}, args, { children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] })));
+};
+export var Default = Template.bind({});
+export var AvatarSize = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { size: size, children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, size)); }) })); };
+export var AvatarFallBackValue = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { size: size, children: [_jsx(AvatarImage, { src: "", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, size)); }) })); };
+export var AvatarShape = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Shape).map(function (shape) { return (_jsxs(Avatar, { shape: shape, size: "massive", status: "online", children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, shape)); }) })); };
+export var AvatarWithNoImageAndFallBackValue = function () {
+    var user = { name: "", image: null };
+    return (_jsx("div", { className: "flex flex-row space-x-2", children: _jsxs(Avatar, { size: "md", children: [_jsx(AvatarImage, { src: "", alt: "User avatar" }), _jsx(AvatarFallback, { children: (user === null || user === void 0 ? void 0 : user.name) ? user.name.charAt(0) : null })] }) }));
+};
+export var AvatarShapeSizeCombination = function () { return (_jsx("div", { className: "flex flex-col space-y-2", children: Object.keys(avatar1Shape).map(function (shape) {
+        return Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { shape: shape, size: size, children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, "".concat(shape, "-").concat(size))); });
+    }) })); };
+export var AvatarStatusIndicator = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: ["online", "offline", "busy", "away"].map(function (status) { return (_jsxs(Avatar, { size: "massive", shape: "square", status: status, children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, status)); }) })); };
+export var RoundedAvatarStatusIndicatorSize = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(avatar1Size).map(function (size) { return (_jsxs(Avatar, { size: size, shape: "rounded", status: "online", children: [_jsx(AvatarImage, { src: "https://www.w3schools.com/howto/img_avatar2.png", alt: "Avatar" }), _jsx(AvatarFallback, { children: "AB" })] }, size)); }) })); };

package/dist/src/components/Avatar/Avatar/type.d.ts

@@ -0,0 +1,12 @@
+import { avatarShape, avatarSize } from ".";
+import { iconList } from "../../../utils/iconList";
+type avatarSize = keyof typeof avatarSize;
+type avatarShape = keyof typeof avatarShape;
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    image?: string;
+    icon?: keyof typeof iconList;
+    shape?: avatarShape;
+    size?: avatarSize;
+    className?: string;
+}
+export {};

package/dist/src/components/Avatar/Avatar/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -16,7 +16,7 @@ export declare const variant: {
 declare const buttonVariants: (props?: ({
     color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    shape?: "rounded-sm" | "rounded-full" | null | undefined;
+    shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
     variant?: "link" | "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, color, size, shape, variant, asChild, startIcon, endIcon, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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/Button/Button/Button.stories.d.ts

@@ -393,7 +393,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
-        shape?: "rounded-sm" | "rounded-full" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
@@ -693,7 +693,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
-        shape?: "rounded-sm" | "rounded-full" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;

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

@@ -9,7 +9,7 @@ export declare const variant: {
 declare const buttonVariants: (props?: ({
     color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    shape?: "rounded-sm" | "rounded-full" | null | undefined;
+    shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function IconButton({ className, color, size, shape, variant, asChild, icon, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

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

@@ -404,7 +404,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "outline" | "ghost" | undefined;
-        shape?: "rounded-sm" | "rounded-full" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
         asChild?: boolean | undefined;
         icon?: keyof typeof iconList | undefined;
     }>, context: import("@storybook/core/csf").StoryContext<import("@storybook/react").ReactRenderer, {
@@ -703,7 +703,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "outline" | "ghost" | undefined;
-        shape?: "rounded-sm" | "rounded-full" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
         asChild?: boolean | undefined;
         icon?: keyof typeof iconList | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

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

@@ -27,6 +27,7 @@ export declare const buttonStyles: {
         sm: string;
     };
     shape: {
+        "rounded-none": string;
         "rounded-sm": string;
         "rounded-full": string;
     };

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

@@ -29,6 +29,7 @@ export var buttonStyles = {
         sm: "size-9 !p-2.5",
     },
     shape: {
+        "rounded-none": styles["rounded-none"],
         "rounded-sm": styles["rounded-sm"],
         "rounded-full": styles["rounded-full"],
     },

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

@@ -4,6 +4,7 @@ import LuImage from "../../Images/LuImage";
 import { Heading } from "../../Typography/Heading/heading";
 import { Body } from "../../Typography/Body/body";
 import { Button } from "../../Button/Button/Button";
+import LUIcon from "../../../components/Icons/LUIcon";
 export var ContactProfile = function (_a) {
     var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
     // Normalize mediaPosition based on orientation
@@ -22,16 +23,16 @@ export var ContactProfile = function (_a) {
     // Common content section component
     var CardContent = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h5-600", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0"), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-md", className: " ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] }));
+        return (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className, " min-w-0"), children: [(item === null || item === void 0 ? void 0 : item.designation) && (_jsx(Body, { variant: "body-md", className: "text-gray-600 capitalize truncate min-w-0", children: item === null || item === void 0 ? void 0 : item.designation })), _jsx(Heading, { variant: "h5-600", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize truncate min-w-0"), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-md", className: " ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.email) && (_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: item === null || item === void 0 ? void 0 : item.email })] })), (item === null || item === void 0 ? void 0 : item.phone) && (_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: item === null || item === void 0 ? void 0 : item.phone })] }))] }));
     };
     // Common button component
     var CardButton = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (_jsx(Link, { href: href || "#", passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "sm", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, "  ").concat(className), children: btnLabel }) }));
+        return btnLabel ? (_jsx(Link, { href: href || "#", passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "sm", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, "  ").concat(className), children: btnLabel }) })) : null;
     };
     // 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 ".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 text-center 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/Card/contactProfile/ContactProfile.stories.d.ts

@@ -11,3 +11,4 @@ export declare const ContactProfileHorizontalRight: Story;
 export declare const ContactProfileVerticalTop: Story;
 export declare const ContactProfileVerticalMiddle: Story;
 export declare const ContactProfileVerticalBottom: Story;
+export declare const ContactProfileWithFullInfo: Story;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dummy_Image, Dummy_Para, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { DUMMY_designation, DUMMY_email, Dummy_Image, Dummy_Para, DUMMY_phone, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
 import { OrientationEnum } from "../../../utils/enums";
 import Card from "../card";
 var meta = {
@@ -98,3 +98,6 @@ export var ContactProfileVerticalMiddle = {
 export var ContactProfileVerticalBottom = {
     args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { orientation: OrientationEnum.vertical, mediaPosition: "bottom" }),
 };
+export var ContactProfileWithFullInfo = {
+    args: __assign(__assign({ type: "contactProfile" }, baseCardArgs), { item: __assign(__assign({}, baseCardArgs.item), { designation: DUMMY_designation, email: DUMMY_email, phone: DUMMY_phone }), orientation: OrientationEnum.horizontal, mediaPosition: "left", btnLabel: undefined }),
+};

package/dist/src/components/Card/type.d.ts

@@ -18,7 +18,10 @@ export interface CardDataProps {
     title?: string;
     short_description?: string;
     description?: string;
+    designation?: string;
     images?: AlbumGalleryDataProps[];
+    email?: string;
+    phone?: string;
 }
 export interface CardInterface {
     mediaPosition?: "top" | "middle" | "bottom" | "left" | "right";

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

@@ -0,0 +1,2 @@
+import { DatePickerProps } from "./types";
+export declare function DatePicker({ className, variant, size, color, shape, date, onChange, placeholder, disabled, startIcon, endIcon, shadow, minDate, maxDate, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DatePicker/DatePicker.js

@@ -0,0 +1,64 @@
+"use client";
+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)
+        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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { cn } from "../../lib/utils";
+import { Calendar } from "../ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import LUIcon from "../Icons/LUIcon";
+import { getIconSize, getPadding, getIconPosition } from "../Input";
+import { inputVariantConfig, inputVariants } from "../Input/input";
+import { Button } from "../Button/Button/Button";
+import { Default_DatePicker_Variant, Default_DatePicker_Color, Default_DatePicker_Shape, Default_DatePicker_Size, datePickerStyles, Default_DatePicker_Shadow, } from ".";
+import { useState } from "react";
+export function DatePicker(_a) {
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? Default_DatePicker_Variant : _b, _c = _a.size, size = _c === void 0 ? Default_DatePicker_Size : _c, _d = _a.color, color = _d === void 0 ? Default_DatePicker_Color : _d, _e = _a.shape, shape = _e === void 0 ? Default_DatePicker_Shape : _e, date = _a.date, onChange = _a.onChange, _f = _a.placeholder, placeholder = _f === void 0 ? "MM/DD/YYYY" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, _h = _a.shadow, shadow = _h === void 0 ? Default_DatePicker_Shadow : _h, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["className", "variant", "size", "color", "shape", "date", "onChange", "placeholder", "disabled", "startIcon", "endIcon", "shadow", "minDate", "maxDate"]);
+    var _j = useState(false), open = _j[0], setOpen = _j[1];
+    var iconSizeClass = getIconSize(size);
+    var paddingClass = getPadding(size, !!startIcon, !!endIcon);
+    var iconPosition = getIconPosition(size || Default_DatePicker_Size);
+    return (_jsxs(Popover, { open: !disabled && open, onOpenChange: disabled ? undefined : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative", children: [startIcon && (_jsx(LUIcon, { icon: startIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left) })), _jsx(Button, { color: "light-gray", "aria-expanded": open, "data-slot": "date-picker-input", className: cn("w-full justify-between !p-0", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !date && "text-muted-foreground", open &&
+                                color === "default" &&
+                                "border-blue-600 ring-2 ring-blue-200", disabled && [
+                                variant === "filled" && "bg-gray-100",
+                                "border border-gray-300 cursor-not-allowed pointer-events-none opacity-50",
+                            ]), shape: inputVariantConfig.shape[shape], disabled: disabled, tabIndex: disabled ? -1 : 0, children: _jsx("div", { className: cn("flex-grow flex items-center", paddingClass), children: date ? format(date, "MM/dd/yyyy") : placeholder }) }), endIcon && (_jsx(LUIcon, { icon: endIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.right) }))] }) }), _jsx(PopoverContent, __assign({ align: "start", className: cn("w-full p-0 bg-white", datePickerStyles.shadow[shadow], className) }, props, { children: _jsx(Calendar, __assign({}, {
+                    mode: "single",
+                    selected: date !== null && date !== void 0 ? date : undefined,
+                    onSelect: function (selectedDate) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+                        setOpen(false);
+                    },
+                    calendarSize: size !== null && size !== void 0 ? size : Default_DatePicker_Size,
+                    autoFocus: true,
+                    disabled: {
+                        before: minDate
+                            ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())
+                            : undefined,
+                        after: maxDate
+                            ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())
+                            : undefined,
+                    },
+                })) }))] }));
+}

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

@@ -0,0 +1,14 @@
+import type { Meta } from "@storybook/react";
+import { DatePickerProps } from ".";
+declare const _default: Meta<DatePickerProps>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DatePickerProps>;
+export declare const WithLabel: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithLabelAndCaption: () => import("react/jsx-runtime").JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithIcons: () => import("react/jsx-runtime").JSX.Element;
+export declare const ValidationStates: () => import("react/jsx-runtime").JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const Shapes: () => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarSizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Shadows: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,171 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { DatePicker } from "./DatePicker";
+import { Body } from "../Typography/Body/body";
+import { Label } from "../Label/Label";
+import { Caption } from "../Typography/Caption/caption";
+import Tooltip from "../ToolTip/Tooltip";
+import LUIcon from "../Icons/LUIcon";
+import { datePickerStyles, Default_DatePicker_Color, Default_DatePicker_Shadow, Default_DatePicker_Shape, Default_DatePicker_Size, Default_DatePicker_Variant, } from ".";
+import { inputVariantConfig } from "../Input/input";
+import { Calendar } from "../ui/calendar";
+import { useEffect, useState } from "react";
+export default {
+    title: "Components/DatePicker",
+    component: DatePicker,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.variant),
+            defaultValue: Default_DatePicker_Variant,
+        },
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.size),
+            defaultValue: Default_DatePicker_Size,
+        },
+        color: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.color),
+            defaultValue: Default_DatePicker_Color,
+            description: "Color variant of the trigger button",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.shape),
+            defaultValue: Default_DatePicker_Shape,
+            description: "Shape variant of the trigger button (border radius)",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        placeholder: {
+            control: "text",
+            defaultValue: "MM/DD/YYYY",
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false,
+        },
+        shadow: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(datePickerStyles.shadow),
+            defaultValue: Default_DatePicker_Shadow,
+            description: "Shadow styling for the calendar dropdown when opened",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+    },
+};
+var Template = function (args) {
+    var _a;
+    var _b = useState((_a = args.date) !== null && _a !== void 0 ? _a : null), date = _b[0], setDate = _b[1];
+    useEffect(function () {
+        var _a;
+        setDate((_a = args.date) !== null && _a !== void 0 ? _a : null);
+    }, [args.date]);
+    return (_jsx("div", { className: "w-full max-w-md", children: _jsx(DatePicker, __assign({}, args, { date: date, onChange: setDate })) }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    placeholder: "Select a date",
+    variant: Default_DatePicker_Variant,
+    size: Default_DatePicker_Size,
+};
+export var WithLabel = function () {
+    var _a = useState(null), date = _a[0], setDate = _a[1];
+    return (_jsx("div", { className: "w-full max-w-md", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(Tooltip, { title: "?", children: _jsx(LUIcon, { variant: "padded", size: "md", shape: "rounded", icon: "question", color: "light-blue" }) })] }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", date: date, onChange: setDate })] }) }));
+};
+export var WithLabelAndCaption = function () {
+    var _a = useState(null), date = _a[0], setDate = _a[1];
+    return (_jsx("div", { className: "w-full max-w-md", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(Tooltip, { title: "?", children: _jsx(LUIcon, { variant: "padded", size: "md", shape: "rounded", icon: "question", color: "light-blue" }) })] }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", date: date, onChange: setDate }), _jsx(Caption, { variant: "sm", children: "Enter your application/validation/helper content here" })] }) }));
+};
+export var Sizes = function () {
+    var sizes = Object.keys(inputVariantConfig.size);
+    var _a = useState({}), dates = _a[0], setDates = _a[1];
+    var handleDateChange = function (size, date) {
+        setDates(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[size] = date, _a)));
+        });
+    };
+    return (_jsx("div", { className: "space-y-4 w-full max-w-md", children: sizes.map(function (size) { return (_jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: size.charAt(0).toUpperCase() + size.slice(1) }), _jsx(DatePicker, { size: size, placeholder: "MM/DD/YYYY", date: dates[size], onChange: function (date) { return handleDateChange(size, date); } })] }, size)); }) }));
+};
+export var WithIcons = function () {
+    var _a = useState(null), dateStart = _a[0], setDateStart = _a[1];
+    var _b = useState(null), dateBoth = _b[0], setDateBoth = _b[1];
+    return (_jsxs("div", { className: "space-y-4 w-full max-w-md", children: [_jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: "With Start Icon" }), _jsx(DatePicker, { startIcon: "plus", placeholder: "MM/DD/YYYY", date: dateStart, onChange: setDateStart })] }), _jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: "With Both Icons" }), _jsx(DatePicker, { startIcon: "plus", endIcon: "calendar-days", placeholder: "MM/DD/YYYY", date: dateBoth, onChange: setDateBoth })] })] }));
+};
+export var ValidationStates = function () {
+    var _a = useState(null), dateDefault = _a[0], setDateDefault = _a[1];
+    var _b = useState(new Date()), dateSuccess = _b[0], setDateSuccess = _b[1];
+    var _c = useState(null), dateWarning = _c[0], setDateWarning = _c[1];
+    var _d = useState(null), dateError = _d[0], setDateError = _d[1];
+    return (_jsxs("div", { className: "space-y-4 w-full max-w-md", children: [_jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: "Default" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", date: dateDefault, onChange: setDateDefault }), _jsx(Caption, { variant: "sm", children: "Enter your application/validation/helper content here" })] })] }), _jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: "Success" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", color: "success", date: dateSuccess, onChange: setDateSuccess }), _jsx(Caption, { variant: "sm", children: "Correct date selected" })] })] }), _jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: "Warning" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", color: "warning", date: dateWarning, onChange: setDateWarning }), _jsx(Caption, { variant: "sm", children: "Please verify the selected date" })] })] }), _jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: "Error" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", color: "danger", date: dateError, onChange: setDateError }), _jsx(Caption, { variant: "sm", children: "Invalid date selection" })] })] })] }));
+};
+export var Disabled = function () {
+    return (_jsx("div", { className: "w-full max-w-md", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", disabled: true })] }) }));
+};
+export var Shapes = function () {
+    var shapes = Object.keys(inputVariantConfig.shape);
+    var _a = useState({}), dates = _a[0], setDates = _a[1];
+    var handleDateChange = function (shape, date) {
+        setDates(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[shape] = date, _a)));
+        });
+    };
+    return (_jsx("div", { className: "space-y-4 w-full max-w-md", children: shapes.map(function (shape) { return (_jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: shape.charAt(0).toUpperCase() + shape.slice(1) }), _jsx(DatePicker, { shape: shape, placeholder: "MM/DD/YYYY", date: dates[shape], onChange: function (date) { return handleDateChange(shape, date); } })] }, shape)); }) }));
+};
+export var CalendarSizes = function () {
+    var sizes = Object.keys(inputVariantConfig.size);
+    var _a = useState({}), dates = _a[0], setDates = _a[1];
+    return (_jsx("div", { className: "flex gap-8 items-start flex-wrap", children: sizes.map(function (size) {
+            var _a;
+            return (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Body, { variant: "body-sm-500", className: "mb-4", children: size.charAt(0).toUpperCase() + size.slice(1) }), _jsx("div", { className: "border border-gray-200 rounded-lg shadow-lg p-0 bg-white", children: _jsx(Calendar, { mode: "single",
+                            selected: (_a = dates[size]) !== null && _a !== void 0 ? _a : undefined,
+                            onSelect: function (date) {
+                                setDates(function (prev) {
+                                    var _a;
+                                    return (__assign(__assign({}, prev), (_a = {}, _a[size] = date !== null && date !== void 0 ? date : null, _a)));
+                                });
+                            },
+                            calendarSize: size }) })] }, size));
+        }) }));
+};
+export var Shadows = function () {
+    var shadows = Object.keys(datePickerStyles.shadow);
+    var _a = useState({}), dates = _a[0], setDates = _a[1];
+    var handleDateChange = function (shadow, date) {
+        setDates(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[shadow] = date, _a)));
+        });
+    };
+    return (_jsx("div", { className: "space-y-4 w-full max-w-md", children: shadows.map(function (shadow) { return (_jsxs("div", { children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: shadow !== "none" ? "With Shadow" : "Without Shadow" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { variant: "label-lg", children: "Label" }), _jsx(DatePicker, { placeholder: "MM/DD/YYYY", shadow: shadow, date: dates[shadow], onChange: function (date) { return handleDateChange(shadow, date); } })] })] }, shadow)); }) }));
+};

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

@@ -0,0 +1,14 @@
+import { inputVariantConfig } from "../Input/input";
+export declare const Default_DatePicker_Variant: keyof typeof inputVariantConfig.variant;
+export declare const Default_DatePicker_Size: keyof typeof inputVariantConfig.size;
+export declare const Default_DatePicker_Color: keyof typeof inputVariantConfig.color;
+export declare const Default_DatePicker_Shape: keyof typeof inputVariantConfig.shape;
+export declare const datePickerStyles: {
+    shadow: {
+        lg: string;
+        none: string;
+    };
+};
+export declare const Default_DatePicker_Shadow: keyof typeof datePickerStyles.shadow;
+export { DatePicker } from "./DatePicker";
+export type { DatePickerProps } from "./types";

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

@@ -0,0 +1,12 @@
+export var Default_DatePicker_Variant = "filled";
+export var Default_DatePicker_Size = "lg";
+export var Default_DatePicker_Color = "default";
+export var Default_DatePicker_Shape = "square";
+export var datePickerStyles = {
+    shadow: {
+        lg: "rounded-md shadow-lg border border-gray-200",
+        none: "",
+    },
+};
+export var Default_DatePicker_Shadow = "lg";
+export { DatePicker } from "./DatePicker";