linkedunion-design-kit 1.10.6 → 1.10.7-beta.1

package/dist/index.d.ts

@@ -24,7 +24,7 @@ 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";
@@ -32,3 +32,10 @@ export { Pagination, PaginationContent, PaginationLink, PaginationItem, Paginati
 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, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
+export { DatePicker } from "./src/components/DatePicker/DatePicker";
+export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/NavigationMenu";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export * from "./src/components/MenuBar/menubar";
+export * from "./src/components/Alerts/Alert/alert";

package/dist/index.js

@@ -24,7 +24,7 @@ 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";
@@ -32,3 +32,10 @@ export { Pagination, PaginationContent, PaginationLink, PaginationItem, Paginati
 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, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
+export { DatePicker } from "./src/components/DatePicker/DatePicker";
+export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/NavigationMenu";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export * from "./src/components/MenuBar/menubar";
+export * from "./src/components/Alerts/Alert/alert";

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

@@ -15,8 +15,9 @@ 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;
+    size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    linkSize?: "sm" | "md" | "lg" | "none" | 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.js

@@ -37,30 +37,39 @@ import LUIcon from "../../Icons/LUIcon";
 import { buttonStyles } from "..";
 export var variant = {
     fill: "",
-    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none",
+    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none font-normal leading-normal",
     outline: "border lu-bg-transparent",
     ghost: "lu-bg-transparent border-none",
 };
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
     variants: {
         color: buttonStyles.fillColor,
-        size: buttonStyles.size,
+        size: __assign(__assign({}, buttonStyles.size), { none: "" }),
+        linkSize: __assign(__assign({}, buttonStyles.linkSize), { none: "" }),
         shape: buttonStyles.shape,
         variant: variant,
     },
     defaultVariants: {
         color: "blue",
         size: "md",
+        linkSize: "none",
         shape: "rounded-sm",
         variant: "fill",
     },
-    compoundVariants: __spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
+    compoundVariants: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
             color: color,
             variant: "link",
             class: className,
         });
+    }), true), Object.entries(buttonStyles.linkSize).map(function (_a) {
+        var sizeKey = _a[0], className = _a[1];
+        return ({
+            linkSize: sizeKey,
+            variant: "link",
+            class: className,
+        });
     }), true), Object.entries(buttonStyles.outlineColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
@@ -78,7 +87,7 @@ var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespa
     }), true),
 });
 function Button(_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, size = _a.size, shape = _a.shape, _c = _a.variant, variant = _c === void 0 ? "fill" : _c, _d = _a.asChild, asChild = _d === void 0 ? false : _d, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, shape = _a.shape, _d = _a.variant, variant = _d === void 0 ? "fill" : _d, _e = _a.asChild, asChild = _e === void 0 ? false : _e, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
     var Comp = asChild ? Slot : "button";
     // Map button size to appropriate icon sizes for start and end icons
     var getIconSizes = function () {
@@ -98,6 +107,9 @@ function Button(_a) {
     // Use the calculated sizes based on button size
     var startIconSizeValue = iconSizes.startIcon;
     var endIconSizeValue = iconSizes.endIcon;
-    return (_jsxs(Comp, __assign({ "data-slot": "button", "data-size": size, "data-variant": variant, "data-color": color, className: cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className })) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
+    var sizeProps = variant === "link"
+        ? { linkSize: (size === "xl" ? "lg" : size), size: "none" }
+        : { size: size, linkSize: "none" };
+    return (_jsxs(Comp, __assign({ "data-slot": "button", "data-size": size, "data-variant": variant, "data-color": color, className: cn(buttonVariants(__assign(__assign({ variant: variant, color: color }, sizeProps), { shape: shape })), className) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
 }
 export { Button, buttonVariants };

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

@@ -391,9 +391,10 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
-        shape?: "rounded-sm" | "rounded-full" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
@@ -691,9 +692,10 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
-        shape?: "rounded-sm" | "rounded-full" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "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;
     };
@@ -42,6 +43,7 @@ export declare const buttonStyles: {
     linkSize: {
         lg: string;
         md: string;
+        sm: string;
     };
     outlineColor: {
         blue: string;

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

@@ -1,4 +1,3 @@
-// Button style types
 import styles from "./Button/Button.module.css";
 export var buttonStyles = {
     fillColor: {
@@ -14,7 +13,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 +28,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"],
     },
@@ -42,8 +42,9 @@ export var buttonStyles = {
         disabled: "text-gray-300 hover:no-underline",
     },
     linkSize: {
-        lg: "!text-base !font-normal !leading-normal",
-        md: "!text-sm !font-normal !leading-5",
+        lg: "!text-lg",
+        md: "!text-base",
+        sm: "!text-sm",
     },
     outlineColor: {
         blue: "text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",

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/Dropdown/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { checkBoxSize, dropdownMenuSize } from ".";
+import { checkBoxSize, dropdownContentPosition, dropdownMenuSize } from ".";
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -13,9 +13,13 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
 } & React.RefAttributes<HTMLDivElement>>;
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    size?: keyof typeof dropdownMenuSize;
+    align?: keyof typeof dropdownContentPosition;
+};
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
-    align?: "start" | "center" | "end";
+    align?: keyof typeof dropdownContentPosition;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;