linkedunion-design-kit 1.11.6 → 1.11.8

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

@@ -1,77 +0,0 @@
-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 ColorPicker from "./ColorPicker";
-import { Label } from "../Label/Label";
-import { inputVariantConfig } from "../Input/input";
-export default {
-    title: "Components/ColorPicker",
-    component: ColorPicker,
-    tags: ["autodocs"],
-    argTypes: {
-        size: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.size),
-        },
-        variant: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.variant),
-        },
-        color: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.color),
-        },
-        shape: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.shape),
-        },
-        value: {
-            control: "color",
-        },
-    },
-};
-var Template = function (args) { return _jsx(ColorPicker, __assign({}, args)); };
-export var Default = Template.bind({});
-Default.args = {
-    // Blue color
-    onChange: function (color) {
-        console.log("Selected color:", color);
-    },
-};
-export var Sizes = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Small" }), _jsx(ColorPicker, { size: "sm", value: "#ef4444", onChange: function (color) { return console.log("Small:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Medium" }), _jsx(ColorPicker, { size: "md", value: "#10b981", onChange: function (color) { return console.log("Medium:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Large" }), _jsx(ColorPicker, { size: "lg", value: "#8b5cf6", onChange: function (color) { return console.log("Large:", color); } })] })] })); };
-export var Variants = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Filled" }), _jsx(ColorPicker, { variant: "filled", value: "#f59e0b", onChange: function (color) { return console.log("Filled:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Outlined" }), _jsx(ColorPicker, { variant: "outlined", value: "#06b6d4", onChange: function (color) { return console.log("Outlined:", color); } })] })] })); };
-export var Colors = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Default" }), _jsx(ColorPicker, { color: "default", value: "#6366f1", onChange: function (color) { return console.log("Default:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Danger" }), _jsx(ColorPicker, { color: "danger", value: "#dc2626", onChange: function (color) { return console.log("Danger:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Warning" }), _jsx(ColorPicker, { color: "warning", value: "#d97706", onChange: function (color) { return console.log("Warning:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Success" }), _jsx(ColorPicker, { color: "success", value: "#059669", onChange: function (color) { return console.log("Success:", color); } })] })] })); };
-export var Shapes = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Square" }), _jsx(ColorPicker, { shape: "square", value: "#ec4899", onChange: function (color) { return console.log("Square:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Rounded" }), _jsx(ColorPicker, { shape: "rounded", value: "#14b8a6", onChange: function (color) { return console.log("Rounded:", color); } })] })] })); };
-export var AllCombinations = function () { return (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Small + Filled + Danger + Rounded" }), _jsx(ColorPicker, { size: "sm", variant: "filled", color: "danger", shape: "rounded", value: "#ef4444", onChange: function (color) { return console.log("Combo 1:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Medium + Outlined + Success + Square" }), _jsx(ColorPicker, { size: "md", variant: "outlined", color: "success", shape: "square", value: "#10b981", onChange: function (color) { return console.log("Combo 2:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Large + Filled + Warning + Rounded" }), _jsx(ColorPicker, { size: "lg", variant: "filled", color: "warning", shape: "rounded", value: "#f59e0b", onChange: function (color) { return console.log("Combo 3:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Small + Outlined + Default + Square" }), _jsx(ColorPicker, { size: "sm", variant: "outlined", color: "default", shape: "square", value: "#6366f1", onChange: function (color) { return console.log("Combo 4:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Large + Outlined + Danger + Rounded" }), _jsx(ColorPicker, { size: "lg", variant: "outlined", color: "danger", shape: "rounded", value: "#dc2626", onChange: function (color) { return console.log("Combo 5:", color); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Medium + Filled + Success + Square" }), _jsx(ColorPicker, { size: "md", variant: "filled", color: "success", shape: "square", value: "#059669", onChange: function (color) { return console.log("Combo 6:", color); } })] })] })); };
-export var WithCustomClassName = Template.bind({});
-WithCustomClassName.args = {
-    value: "#8b5cf6",
-    className: "border-2 border-purple-500 shadow-lg",
-    onChange: function (color) { return console.log("Custom styled:", color); },
-};
-export var Disabled = Template.bind({});
-Disabled.args = {
-    value: "#6b7280",
-    disabled: true,
-    onChange: function (color) { return console.log("Disabled:", color); },
-};
-export var Playground = Template.bind({});
-Playground.args = {
-    value: "#3b82f6",
-    size: "md",
-    variant: "filled",
-    color: "default",
-    shape: "square",
-    onChange: function (color) {
-        alert("onChange: ".concat(color));
-    },
-};

package/dist/src/components/Colors/color.stories.js

@@ -1,32 +0,0 @@
-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 } from "react/jsx-runtime";
-import { colors } from "../../utils/colors";
-import { Color } from "./color";
-export default {
-    title: "Components/Color",
-    component: Color,
-};
-var Template = function (args) { return (_jsx(Color, __assign({}, args))); };
-export var _Color = Template.bind({});
-_Color.args = {
-    color: "black", // Default color
-};
-_Color.argTypes = {
-    color: {
-        control: {
-            type: "select",
-            labels: Object.keys(colors),
-        },
-        options: Object.keys(colors),
-    },
-};

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

@@ -1,64 +0,0 @@
-"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, triggerClassName = _a.triggerClassName, props = __rest(_a, ["className", "variant", "size", "color", "shape", "date", "onChange", "placeholder", "disabled", "startIcon", "endIcon", "shadow", "minDate", "maxDate", "triggerClassName"]);
-    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: cn("relative", triggerClassName), 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 hover:!bg-transparent active:!bg-transparent", 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.js

@@ -1,171 +0,0 @@
-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)); }) }));
-};