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

package/dist/index.d.ts

@@ -24,11 +24,13 @@ export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/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 { 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 { DatePicker } from "./src/components/Input/DatePicker";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
+export { DatePicker } from "./src/components/DatePicker/DatePicker";
+export { TimePicker } from "./src/components/TimePicker/TimePicker";

package/dist/index.js

@@ -24,11 +24,13 @@ export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/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 { 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 { DatePicker } from "./src/components/Input/DatePicker";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
+export { DatePicker } from "./src/components/DatePicker/DatePicker";
+export { TimePicker } from "./src/components/TimePicker/TimePicker";

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.13 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.10 | 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

@@ -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",
@@ -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/ColorPicker/ColorPicker.stories.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ColorPicker from "./ColorPicker";
 import { Label } from "../Label/Label";
-import { inputVariantConfig } from "../Input";
+import { inputVariantConfig } from "../Input/input";
 export default {
     title: "Components/ColorPicker",
     component: ColorPicker,

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

@@ -1,4 +1,4 @@
-import { inputVariantConfig } from "../Input";
+import { inputVariantConfig } from "../Input/input";
 export declare const getColorPickerSizes: (size: keyof typeof inputVariantConfig.size) => {
     colorBox: string;
     left: string;

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";

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

@@ -0,0 +1,19 @@
+import { VariantProps } from "class-variance-authority";
+import { inputVariantConfig, inputVariants } from "../Input/input";
+import { iconList } from "../../utils/iconList";
+import { datePickerStyles } from ".";
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "size" | "color" | "onChange">, VariantProps<typeof inputVariants> {
+    date?: Date | null;
+    onChange?: (date: Date | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    startIcon?: keyof typeof iconList;
+    endIcon?: keyof typeof iconList;
+    shape?: keyof typeof inputVariantConfig.shape;
+    shadow?: keyof typeof datePickerStyles.shadow;
+    minDate?: Date;
+    maxDate?: Date;
+    size?: keyof typeof inputVariantConfig.size;
+    color?: keyof typeof inputVariantConfig.color;
+    variant?: keyof typeof inputVariantConfig.variant;
+}

package/dist/src/components/{ui → Dropdown/Combobox}/dialog.js

@@ -24,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { cn } from "../../lib/utils";
+import { cn } from "../../../lib/utils";
 function Dialog(_a) {
     var props = __rest(_a, []);
     return _jsx(DialogPrimitive.Root, __assign({ "data-slot": "dialog" }, props));

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

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import { InputFieldProps } from ".";
+import { InputFieldProps } from "./type";
 declare const _default: Meta<InputFieldProps>;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, InputFieldProps>;
@@ -11,4 +11,3 @@ export declare const VariantsWithIcons: () => import("react/jsx-runtime").JSX.El
 export declare const ErrorValidation: () => import("react/jsx-runtime").JSX.Element;
 export declare const SuccessValidation: () => import("react/jsx-runtime").JSX.Element;
 export declare const WarningValidation: () => import("react/jsx-runtime").JSX.Element;
-export declare const DatePickerExample: () => import("react/jsx-runtime").JSX.Element;

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

@@ -11,9 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Input } from "./input";
-import { DatePicker } from "./DatePicker";
-import { inputType, inputVariantConfig } from ".";
+import { Input, inputVariantConfig } from "./input";
+import { inputType } from "."; // Ensure this exports an object like { text: 'text', email: 'email', ... }
 import { Label } from "../Label/Label";
 import LUIcon from "../Icons/LUIcon";
 import Tooltip from "../ToolTip/Tooltip";
@@ -132,7 +131,3 @@ export var WarningValidation = function () {
                         ? "Password is weak. Consider using 8+ characters"
                         : "Enter a secure password" })] }) }));
 };
-export var DatePickerExample = function () {
-    var _a = React.useState(null), selectedDate = _a[0], setSelectedDate = _a[1];
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Select Date" }), _jsx(DatePicker, { placeholder: "Pick a date", value: selectedDate, onChange: setSelectedDate }), _jsx(Caption, { variant: "md", className: "mt-1 text-gray-500", children: "For full DatePicker documentation, see Components/Input/DatePicker" })] }) }));
-};