linkedunion-design-kit 1.11.6 → 1.11.8

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

@@ -0,0 +1,138 @@
+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 <ColorPicker {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    // Blue color
+    onChange: function (color) {
+        console.log("Selected color:", color);
+    },
+};
+export var Sizes = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Small</Label>
+      <ColorPicker size="sm" value="#ef4444" onChange={function (color) { return console.log("Small:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Medium</Label>
+      <ColorPicker size="md" value="#10b981" onChange={function (color) { return console.log("Medium:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Large</Label>
+      <ColorPicker size="lg" value="#8b5cf6" onChange={function (color) { return console.log("Large:", color); }}/>
+    </div>
+  </div>); };
+export var Variants = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Filled</Label>
+      <ColorPicker variant="filled" value="#f59e0b" onChange={function (color) { return console.log("Filled:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Outlined</Label>
+      <ColorPicker variant="outlined" value="#06b6d4" onChange={function (color) { return console.log("Outlined:", color); }}/>
+    </div>
+  </div>); };
+export var Colors = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Default</Label>
+      <ColorPicker color="default" value="#6366f1" onChange={function (color) { return console.log("Default:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Danger</Label>
+      <ColorPicker color="danger" value="#dc2626" onChange={function (color) { return console.log("Danger:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Warning</Label>
+      <ColorPicker color="warning" value="#d97706" onChange={function (color) { return console.log("Warning:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Success</Label>
+      <ColorPicker color="success" value="#059669" onChange={function (color) { return console.log("Success:", color); }}/>
+    </div>
+  </div>); };
+export var Shapes = function () { return (<div className="space-y-4">
+    <div>
+      <Label variant="label-sm">Square</Label>
+      <ColorPicker shape="square" value="#ec4899" onChange={function (color) { return console.log("Square:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Rounded</Label>
+      <ColorPicker shape="rounded" value="#14b8a6" onChange={function (color) { return console.log("Rounded:", color); }}/>
+    </div>
+  </div>); };
+export var AllCombinations = function () { return (<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div>
+      <Label variant="label-sm">Small + Filled + Danger + Rounded</Label>
+      <ColorPicker size="sm" variant="filled" color="danger" shape="rounded" value="#ef4444" onChange={function (color) { return console.log("Combo 1:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Medium + Outlined + Success + Square</Label>
+      <ColorPicker size="md" variant="outlined" color="success" shape="square" value="#10b981" onChange={function (color) { return console.log("Combo 2:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Large + Filled + Warning + Rounded</Label>
+      <ColorPicker size="lg" variant="filled" color="warning" shape="rounded" value="#f59e0b" onChange={function (color) { return console.log("Combo 3:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Small + Outlined + Default + Square</Label>
+      <ColorPicker size="sm" variant="outlined" color="default" shape="square" value="#6366f1" onChange={function (color) { return console.log("Combo 4:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Large + Outlined + Danger + Rounded</Label>
+      <ColorPicker size="lg" variant="outlined" color="danger" shape="rounded" value="#dc2626" onChange={function (color) { return console.log("Combo 5:", color); }}/>
+    </div>
+    <div>
+      <Label variant="label-sm">Medium + Filled + Success + Square</Label>
+      <ColorPicker size="md" variant="filled" color="success" shape="square" value="#059669" onChange={function (color) { return console.log("Combo 6:", color); }}/>
+    </div>
+  </div>); };
+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.d.ts

@@ -1,4 +1,4 @@
 import { colors } from "../../utils/colors";
 export declare const Color: ({ color }: {
     color?: keyof typeof colors;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/src/components/Colors/{color.js → color.jsx}

@@ -1,6 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { colors } from "../../utils/colors";
 export var Color = function (_a) {
     var _b = _a.color, color = _b === void 0 ? "black" : _b;
-    return _jsx("div", { style: { color: colors[color] || colors.black }, children: color });
+    return <div style={{ color: colors[color] || colors.black }}>{color}</div>;
 };

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

@@ -0,0 +1,20 @@
+import { colors } from "../../utils/colors";
+import { Color } from "./color";
+export default {
+    title: "Components/Color",
+    component: Color,
+};
+var Template = function (args) { return (<Color {...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/Colors/{color.test.js → color.test.jsx}

@@ -1,22 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import { colors } from "../../utils/colors";
 import { Color } from "./color";
 describe("TextColor Component", function () {
     it("renders with default color (black)", function () {
-        render(_jsx(Color, {}));
+        render(<Color />);
         var textElement = screen.getByText("black");
         expect(textElement).toBeInTheDocument();
         expect(textElement).toHaveStyle({ color: colors.black });
     });
     it("renders with a specified color", function () {
-        render(_jsx(Color, { color: "blue-500" }));
+        render(<Color color="blue-500"/>);
         var textElement = screen.getByText("blue-500");
         expect(textElement).toBeInTheDocument();
         expect(textElement).toHaveStyle({ color: colors["blue-500"] });
     });
     it("handles invalid color gracefully", function () {
-        render(_jsx(Color, { color: "invalid-color" }));
+        render(<Color color={"invalid-color"}/>);
         var textElement = screen.getByText("invalid-color");
         expect(textElement).toBeInTheDocument();
         expect(textElement).toHaveStyle({ color: colors.black }); // It should default to black

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

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

package/dist/src/components/DatePicker/DatePicker.jsx

@@ -0,0 +1,67 @@
+"use client";
+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 { 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 (<Popover open={!disabled && open} onOpenChange={disabled ? undefined : setOpen}>
+      <PopoverTrigger asChild>
+        <div className={cn("relative", triggerClassName)}>
+          {startIcon && (<LUIcon icon={startIcon} size={iconSizeClass} className={cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left)}/>)}
+          <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}>
+            <div className={cn("flex-grow flex items-center", paddingClass)}>
+              {date ? format(date, "MM/dd/yyyy") : placeholder}
+            </div>
+          </Button>
+          {endIcon && (<LUIcon icon={endIcon} size={iconSizeClass} className={cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.right)}/>)}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={cn("w-full p-0 bg-white", datePickerStyles.shadow[shadow], className)} {...props}>
+        <Calendar {...{
+        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,
+        },
+    }}/>
+      </PopoverContent>
+    </Popover>);
+}

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

@@ -3,12 +3,12 @@ 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;
+export declare const WithLabel: () => import("react").JSX.Element;
+export declare const WithLabelAndCaption: () => import("react").JSX.Element;
+export declare const Sizes: () => import("react").JSX.Element;
+export declare const WithIcons: () => import("react").JSX.Element;
+export declare const ValidationStates: () => import("react").JSX.Element;
+export declare const Disabled: () => import("react").JSX.Element;
+export declare const Shapes: () => import("react").JSX.Element;
+export declare const CalendarSizes: () => import("react").JSX.Element;
+export declare const Shadows: () => import("react").JSX.Element;

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

@@ -0,0 +1,291 @@
+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 { 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 (<div className="w-full max-w-md">
+      <DatePicker {...args} date={date} onChange={setDate}/>
+    </div>);
+};
+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 (<div className="w-full max-w-md">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Label variant="label-lg">Label</Label>
+          <Tooltip title="?">
+            <LUIcon variant="padded" size="md" shape="rounded" icon="question" color="light-blue"/>
+          </Tooltip>
+        </div>
+        <DatePicker placeholder="MM/DD/YYYY" date={date} onChange={setDate}/>
+      </div>
+    </div>);
+};
+export var WithLabelAndCaption = function () {
+    var _a = useState(null), date = _a[0], setDate = _a[1];
+    return (<div className="w-full max-w-md">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Label variant="label-lg">Label</Label>
+          <Tooltip title="?">
+            <LUIcon variant="padded" size="md" shape="rounded" icon="question" color="light-blue"/>
+          </Tooltip>
+        </div>
+        <DatePicker placeholder="MM/DD/YYYY" date={date} onChange={setDate}/>
+        <Caption variant="sm">
+          Enter your application/validation/helper content here
+        </Caption>
+      </div>
+    </div>);
+};
+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 (<div className="space-y-4 w-full max-w-md">
+      {sizes.map(function (size) { return (<div key={size}>
+          <Body variant="body-sm-500" className="mb-2">
+            {size.charAt(0).toUpperCase() + size.slice(1)}
+          </Body>
+          <DatePicker size={size} placeholder="MM/DD/YYYY" date={dates[size]} onChange={function (date) { return handleDateChange(size, date); }}/>
+        </div>); })}
+    </div>);
+};
+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 (<div className="space-y-4 w-full max-w-md">
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          With Start Icon
+        </Body>
+        <DatePicker startIcon="plus" placeholder="MM/DD/YYYY" date={dateStart} onChange={setDateStart}/>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          With Both Icons
+        </Body>
+        <DatePicker startIcon="plus" endIcon="calendar-days" placeholder="MM/DD/YYYY" date={dateBoth} onChange={setDateBoth}/>
+      </div>
+    </div>);
+};
+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 (<div className="space-y-4 w-full max-w-md">
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Default
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <DatePicker placeholder="MM/DD/YYYY" date={dateDefault} onChange={setDateDefault}/>
+          <Caption variant="sm">
+            Enter your application/validation/helper content here
+          </Caption>
+        </div>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Success
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <DatePicker placeholder="MM/DD/YYYY" color="success" date={dateSuccess} onChange={setDateSuccess}/>
+          <Caption variant="sm">Correct date selected</Caption>
+        </div>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Warning
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <DatePicker placeholder="MM/DD/YYYY" color="warning" date={dateWarning} onChange={setDateWarning}/>
+          <Caption variant="sm">Please verify the selected date</Caption>
+        </div>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Error
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <DatePicker placeholder="MM/DD/YYYY" color="danger" date={dateError} onChange={setDateError}/>
+          <Caption variant="sm">Invalid date selection</Caption>
+        </div>
+      </div>
+    </div>);
+};
+export var Disabled = function () {
+    return (<div className="w-full max-w-md">
+      <div className="flex flex-col gap-1">
+        <Label variant="label-lg">Label</Label>
+        <DatePicker placeholder="MM/DD/YYYY" disabled={true}/>
+      </div>
+    </div>);
+};
+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 (<div className="space-y-4 w-full max-w-md">
+      {shapes.map(function (shape) { return (<div key={shape}>
+          <Body variant="body-sm-500" className="mb-2">
+            {shape.charAt(0).toUpperCase() + shape.slice(1)}
+          </Body>
+          <DatePicker shape={shape} placeholder="MM/DD/YYYY" date={dates[shape]} onChange={function (date) { return handleDateChange(shape, date); }}/>
+        </div>); })}
+    </div>);
+};
+export var CalendarSizes = function () {
+    var sizes = Object.keys(inputVariantConfig.size);
+    var _a = useState({}), dates = _a[0], setDates = _a[1];
+    return (<div className="flex gap-8 items-start flex-wrap">
+      {sizes.map(function (size) {
+            var _a;
+            return (<div key={size} className="flex flex-col items-center">
+          <Body variant="body-sm-500" className="mb-4">
+            {size.charAt(0).toUpperCase() + size.slice(1)}
+          </Body>
+          <div className="border border-gray-200 rounded-lg shadow-lg p-0 bg-white">
+            <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,
+            }}/>
+          </div>
+        </div>);
+        })}
+    </div>);
+};
+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 (<div className="space-y-4 w-full max-w-md">
+      {shadows.map(function (shadow) { return (<div key={shadow}>
+          <Body variant="body-sm-500" className="mb-2">
+            {shadow !== "none" ? "With Shadow" : "Without Shadow"}
+          </Body>
+          <div className="flex flex-col gap-1">
+            <Label variant="label-lg">Label</Label>
+            <DatePicker placeholder="MM/DD/YYYY" shadow={shadow} date={dates[shadow]} onChange={function (date) { return handleDateChange(shadow, date); }}/>
+          </div>
+        </div>); })}
+    </div>);
+};

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

@@ -1,2 +1,2 @@
 import { DateRangePickerProps } from "./types";
-export declare function DateRangePicker({ className, variant, size, color, shape, dateRange, onChange, disabled, startIcon, endIcon, shadow, minDate, maxDate, numberOfMonths, dateFormat, separator, presets, startLabel, endLabel, showClearButton, showApplyButton, onApply, onCancel, onClear, ...props }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePicker({ className, variant, size, color, shape, dateRange, onChange, disabled, startIcon, endIcon, shadow, minDate, maxDate, numberOfMonths, dateFormat, separator, presets, startLabel, endLabel, showClearButton, showApplyButton, onApply, onCancel, onClear, ...props }: DateRangePickerProps): import("react").JSX.Element;