linkedunion-design-kit 1.11.6 → 1.11.8

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

@@ -1,318 +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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { DateRangePicker } from "./DateRangePicker";
-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 { Default_DateRangePicker_Color, Default_DateRangePicker_Shadow, Default_DateRangePicker_Shape, Default_DateRangePicker_Size, Default_DateRangePicker_Variant, } from ".";
-import { inputVariantConfig } from "../Input/input";
-import { useState } from "react";
-import { addDays, subDays, startOfMonth, endOfMonth, subMonths, startOfYear, endOfYear, startOfDay, } from "date-fns";
-import { DateRangePickerDefaults } from "../../utils/constants";
-import { Button } from "../Button/Button/Button";
-// Destructure default values from enum
-var defaultNumberOfMonths = DateRangePickerDefaults.numberOfMonths, defaultDateFormat = DateRangePickerDefaults.dateFormat, defaultSeparator = DateRangePickerDefaults.separator, defaultStartLabel = DateRangePickerDefaults.startLabel, defaultEndLabel = DateRangePickerDefaults.endLabel;
-// Helper to get today's date
-var getToday = function () { return startOfDay(new Date()); };
-// Common preset configurations
-var getCommonPresets = function (today) { return [
-    { label: "Today", range: { from: today, to: today } },
-    { label: "Last 7 Days", range: { from: subDays(today, 6), to: today } },
-    { label: "Last 30 Days", range: { from: subDays(today, 29), to: today } },
-    {
-        label: "This Month",
-        range: { from: startOfMonth(today), to: endOfMonth(today) },
-    },
-]; };
-var getExtendedPresets = function (today) { return __spreadArray(__spreadArray([], getCommonPresets(today), true), [
-    { label: "Last 14 Days", range: { from: subDays(today, 13), to: today } },
-    {
-        label: "Last Month",
-        range: {
-            from: startOfMonth(subMonths(today, 1)),
-            to: endOfMonth(subMonths(today, 1)),
-        },
-    },
-    {
-        label: "This Year",
-        range: { from: startOfYear(today), to: endOfYear(today) },
-    },
-], false); };
-var getBookingPresets = function (today) { return [
-    {
-        label: "Weekend",
-        range: { from: addDays(today, 5), to: addDays(today, 7) },
-    },
-    { label: "1 Week", range: { from: today, to: addDays(today, 7) } },
-    { label: "2 Weeks", range: { from: today, to: addDays(today, 14) } },
-]; };
-var getAnalyticsPresets = function (today) { return [
-    { label: "Last 7 Days", range: { from: subDays(today, 6), to: today } },
-    { label: "Last 30 Days", range: { from: subDays(today, 29), to: today } },
-    { label: "Last 90 Days", range: { from: subDays(today, 89), to: today } },
-    {
-        label: "This Month",
-        range: { from: startOfMonth(today), to: endOfMonth(today) },
-    },
-    {
-        label: "Last Month",
-        range: {
-            from: startOfMonth(subMonths(today, 1)),
-            to: endOfMonth(subMonths(today, 1)),
-        },
-    },
-]; };
-// Reusable hook for date range state
-var useDateRangeState = function (initialValue) {
-    if (initialValue === void 0) { initialValue = null; }
-    return useState(initialValue);
-};
-// Helper component for displaying selected dates
-var SelectedDateDisplay = function (_a) {
-    var dateRange = _a.dateRange;
-    if (!(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from))
-        return null;
-    return (_jsxs(Caption, { variant: "sm", color: "gray", children: ["Selected: ", dateRange.from.toLocaleDateString(), dateRange.to && " - ".concat(dateRange.to.toLocaleDateString())] }));
-};
-export default {
-    title: "Components/DateRangePicker",
-    component: DateRangePicker,
-    tags: ["autodocs"],
-    argTypes: {
-        variant: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(inputVariantConfig.variant),
-            defaultValue: Default_DateRangePicker_Variant,
-        },
-        size: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(inputVariantConfig.size),
-            defaultValue: Default_DateRangePicker_Size,
-            description: "Size of the input and calendar",
-        },
-        color: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(inputVariantConfig.color),
-            defaultValue: Default_DateRangePicker_Color,
-            description: "Color scheme of the input",
-        },
-        shape: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(inputVariantConfig.shape),
-            defaultValue: Default_DateRangePicker_Shape,
-            description: "Shape of the input",
-        },
-        shadow: {
-            control: "boolean",
-            defaultValue: Default_DateRangePicker_Shadow,
-            description: "Show shadow on the calendar popover",
-        },
-        disabled: {
-            control: "boolean",
-            defaultValue: false,
-            description: "Whether the date range picker is disabled",
-        },
-        numberOfMonths: {
-            control: {
-                type: "number",
-                min: 1,
-                max: 2,
-            },
-            defaultValue: Number(defaultNumberOfMonths),
-            description: "Number of calendar months to display",
-        },
-        dateFormat: {
-            control: "text",
-            defaultValue: defaultDateFormat,
-            description: "Format for displaying dates",
-        },
-        separator: {
-            control: "text",
-            defaultValue: defaultSeparator,
-            description: "Separator between start and end dates",
-        },
-        showClearButton: {
-            control: "boolean",
-            defaultValue: true,
-            description: "Show clear button when date is selected",
-        },
-        showApplyButton: {
-            control: "boolean",
-            defaultValue: false,
-            description: "Show Apply and Cancel buttons in calendar footer",
-        },
-        startLabel: {
-            control: "text",
-            defaultValue: defaultStartLabel,
-            description: "Label for start date placeholder",
-        },
-        endLabel: {
-            control: "text",
-            defaultValue: defaultEndLabel,
-            description: "Label for end date placeholder",
-        },
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: "A date range picker component for selecting a start and end date. Built on top of react-day-picker with support for presets, custom date ranges, multiple months display, clear functionality, optional Apply/Cancel buttons, and customizable start/end labels for better UX. Automatically adapts to mobile screens (< 768px) with a step-by-step date selection process: first select start date, then end date, then confirm with Apply/Cancel buttons.",
-            },
-        },
-    },
-};
-var Template = function (args) {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "w-80", children: _jsx(DateRangePicker, __assign({}, args, { dateRange: dateRange, onChange: setDateRange })) }), _jsx(SelectedDateDisplay, { dateRange: dateRange })] }));
-};
-export var Default = Template.bind({});
-Default.args = {
-    size: Default_DateRangePicker_Size,
-    variant: Default_DateRangePicker_Variant,
-    color: Default_DateRangePicker_Color,
-    shape: Default_DateRangePicker_Shape,
-    shadow: Default_DateRangePicker_Shadow,
-    numberOfMonths: 2,
-};
-export var WithStartEndLabels = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Default Labels" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Shows \"Start date\" and \"End date\" by default" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, endIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Custom Labels" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Customize labels for your use case" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startLabel: "Check-in", endLabel: "Check-out", endIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Business Context" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Labels adapt to your domain" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startLabel: "From", endLabel: "To", endIcon: "calendar-days" })] })] }));
-};
-export var WithIcons = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "With Calendar Icon" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "With Both Icons" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", endIcon: "angle-down" })] })] }));
-};
-export var Sizes = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Small (sm)" }), _jsx(DateRangePicker, { size: "sm", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Medium (md)" }), _jsx(DateRangePicker, { size: "md", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Large (lg)" }), _jsx(DateRangePicker, { size: "lg", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] })] }));
-};
-export var Variants = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Filled (default)" }), _jsx(DateRangePicker, { variant: "filled", color: "default", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Outline" }), _jsx(DateRangePicker, { variant: "outlined", color: "default", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] })] }));
-};
-export var Shapes = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Square" }), _jsx(DateRangePicker, { shape: "square", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Rounded" }), _jsx(DateRangePicker, { shape: "rounded", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] })] }));
-};
-export var WithPresets = function () {
-    var today = getToday();
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsx(Label, { children: "With Quick Select Presets" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", presets: getExtendedPresets(today) }), _jsx(SelectedDateDisplay, { dateRange: dateRange })] }));
-};
-export var SingleMonth = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsx(Label, { children: "Single Month Display" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", numberOfMonths: 1 })] }));
-};
-export var WithDateRestrictions = function () {
-    var today = getToday();
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Only Future Dates" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Cannot select dates before today" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", minDate: today })] }), _jsxs("div", { children: [_jsx(Label, { children: "Only Past Dates" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Cannot select dates after today" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", maxDate: today })] }), _jsxs("div", { children: [_jsx(Label, { children: "Restricted Range" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Only dates within 30 days from today" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", minDate: subDays(today, 30), maxDate: addDays(today, 30) })] })] }));
-};
-export var DisabledState = function () {
-    var dateRange = useState({
-        from: startOfDay(new Date()),
-        to: addDays(startOfDay(new Date()), 7),
-    })[0];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Disabled Empty" }), _jsx(DateRangePicker, { disabled: true, startIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Disabled with Value" }), _jsx(DateRangePicker, { disabled: true, dateRange: dateRange, startIcon: "calendar-days" })] })] }));
-};
-export var CustomFormatting = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Custom Date Format" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Format: dd/MM/yyyy" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", dateFormat: "dd/MM/yyyy" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Custom Separator" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Separator: \" to \"" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", separator: " to " })] }), _jsxs("div", { children: [_jsx(Label, { children: "Long Date Format" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Format: MMM dd, yyyy" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", dateFormat: "MMM dd, yyyy" })] })] }));
-};
-export var Colors = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Default" }), _jsx(DateRangePicker, { color: "default", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Error" }), _jsx(DateRangePicker, { color: "danger", dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" }), _jsx(Caption, { variant: "sm", color: "danger", className: "mt-1", children: "Please select a valid date range" })] })] }));
-};
-export var FormIntegration = function () {
-    var today = getToday();
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    var _b = useState(false), submitted = _b[0], setSubmitted = _b[1];
-    var handleSubmit = function (e) {
-        e.preventDefault();
-        setSubmitted(true);
-        setTimeout(function () { return setSubmitted(false); }, 3000);
-    };
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "Booking Period" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Select your check-in and check-out dates" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", minDate: today, presets: getBookingPresets(today) })] }), _jsx(Button, { type: "submit", disabled: !(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from) || !(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to), className: "w-full", children: "Book Now" }), submitted && (_jsx("div", { className: "p-3 bg-green-50 border border-green-200 rounded-md", children: _jsxs(Body, { variant: "body-sm", color: "success", children: ["\u2713 Booking submitted for", " ", (dateRange === null || dateRange === void 0 ? void 0 : dateRange.from) && dateRange.from.toLocaleDateString(), (dateRange === null || dateRange === void 0 ? void 0 : dateRange.to) && " - ".concat(dateRange.to.toLocaleDateString())] }) }))] }));
-};
-export var WithTooltip = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { children: "Reporting Period" }), _jsx(Tooltip, { title: "Select the start and end dates for your report", children: _jsx(LUIcon, { icon: "info", size: "xs", color: "gray" }) })] }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }));
-};
-export var RealWorldExamples = function () {
-    var today = getToday();
-    var _a = useDateRangeState(), bookingRange = _a[0], setBookingRange = _a[1];
-    var _b = useDateRangeState({
-        from: subDays(today, 30),
-        to: today,
-    }), analyticsRange = _b[0], setAnalyticsRange = _b[1];
-    var _c = useDateRangeState(), projectRange = _c[0], setProjectRange = _c[1];
-    return (_jsxs("div", { className: "flex flex-col gap-6 max-w-2xl", children: [_jsxs("div", { children: [_jsx(Body, { variant: "body-lg-500", className: "mb-4", children: "Hotel Booking" }), _jsx("div", { className: "p-4 border border-gray-200 rounded-lg space-y-4", children: _jsxs("div", { children: [_jsx(Label, { children: "Select your stay dates" }), _jsx(DateRangePicker, { dateRange: bookingRange, onChange: setBookingRange, startIcon: "calendar-days", minDate: today, separator: " \u2192 ", numberOfMonths: 2, presets: getBookingPresets(today) })] }) })] }), _jsxs("div", { children: [_jsx(Body, { variant: "body-lg-500", className: "mb-4", children: "Analytics Dashboard" }), _jsxs("div", { className: "p-4 border border-gray-200 rounded-lg space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { children: "Date Range" }), _jsx(DateRangePicker, { dateRange: analyticsRange, onChange: setAnalyticsRange, startIcon: "calendar-days", numberOfMonths: 2, presets: getAnalyticsPresets(today) })] }), (analyticsRange === null || analyticsRange === void 0 ? void 0 : analyticsRange.from) && (analyticsRange === null || analyticsRange === void 0 ? void 0 : analyticsRange.to) && (_jsx("div", { className: "p-3 bg-blue-50 rounded-md", children: _jsxs(Caption, { variant: "sm", color: "info", children: ["Showing data for", " ", Math.ceil((analyticsRange.to.getTime() -
-                                            analyticsRange.from.getTime()) /
-                                            (1000 * 60 * 60 * 24)) + 1, " ", "days"] }) }))] })] }), _jsxs("div", { children: [_jsx(Body, { variant: "body-lg-500", className: "mb-4", children: "Project Timeline" }), _jsx("div", { className: "p-4 border border-gray-200 rounded-lg space-y-4", children: _jsxs("div", { children: [_jsx(Label, { children: "Project Duration" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Set the start and end dates for your project" }), _jsx(DateRangePicker, { dateRange: projectRange, onChange: setProjectRange, startIcon: "calendar-days", minDate: today, variant: "outlined", numberOfMonths: 2 })] }) })] })] }));
-};
-export var WithClearButton = function () {
-    var _a = useState({
-        from: startOfDay(new Date()),
-        to: addDays(startOfDay(new Date()), 7),
-    }), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsxs("div", { children: [_jsx(Label, { children: "With Clear Button (default)" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Clear button appears automatically when dates are selected" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", showClearButton: true })] }), _jsxs("div", { children: [_jsx(Label, { children: "Without Clear Button" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", showClearButton: false, endIcon: "angle-down" })] })] }));
-};
-export var WithApplyButton = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    var _b = useDateRangeState(), appliedRange = _b[0], setAppliedRange = _b[1];
-    return (_jsx("div", { className: "flex flex-col gap-4 max-w-sm", children: _jsxs("div", { children: [_jsx(Label, { children: "With Apply/Cancel Buttons" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Changes are only applied when you click Apply" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", showApplyButton: true, onApply: function (range) {
-                        setAppliedRange(range);
-                    }, onCancel: function () {
-                        setDateRange(appliedRange);
-                    }, onClear: function () {
-                        setAppliedRange(null);
-                    } })] }) }));
-};
-export var WithApplyButtonAndPresets = function () {
-    var today = getToday();
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsx(Label, { children: "Apply Button with Presets" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Preview your selection before applying" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", showApplyButton: true, presets: getCommonPresets(today) })] }));
-};
-export var ClearButtonCallbacks = function () {
-    var _a = useState({
-        from: startOfDay(new Date()),
-        to: addDays(startOfDay(new Date()), 7),
-    }), dateRange = _a[0], setDateRange = _a[1];
-    var _b = useState(0), clearCount = _b[0], setClearCount = _b[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4 max-w-sm", children: [_jsx(Label, { children: "Clear Button with Callback" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days", onClear: function () {
-                    setClearCount(function (prev) { return prev + 1; });
-                    console.log("Cleared");
-                } }), clearCount > 0 && (_jsxs(Caption, { variant: "sm", color: "gray", children: ["Cleared ", clearCount, " time", clearCount > 1 ? "s" : ""] }))] }));
-};
-export var MobileResponsive = function () {
-    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(Label, { children: "Mobile-Optimized Date Range Picker" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "Resize your browser to < 768px width to see the mobile experience" }), _jsx(Body, { as: "p", variant: "body-xs", color: "light-gray", className: "mb-2", children: "On mobile: Step 1 - Select start date \u2192 Step 2 - Select end date \u2192 Step 3 - Apply/Cancel" }), _jsx(DateRangePicker, { dateRange: dateRange, onChange: setDateRange, startIcon: "calendar-days" })] }), _jsx(SelectedDateDisplay, { dateRange: dateRange }), _jsx("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-md", children: _jsxs(Caption, { variant: "sm", color: "info", children: ["\uD83D\uDCA1 The component automatically detects screen size and provides:", _jsx("br", {}), "\u2022 Desktop (\u2265768px): Full calendar with 1-2 months", _jsx("br", {}), "\u2022 Mobile (<768px): Single month with step-by-step guidance", _jsx("br", {}), "\u2022 Apply/Cancel buttons automatically appear on mobile after both dates are selected"] }) })] }));
-};

package/dist/src/components/Dropdown/Combobox/Combobox.stories.js

@@ -1,225 +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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import Combobox from "./Combobox";
-import { comboboxColor, comboboxSelectType, comboboxShapes, comboboxSizes, } from ".";
-import LUIcon from "../../../components/Icons/LUIcon";
-import { Label } from "../../../components/Label/Label";
-import Tooltip from "../../../components/ToolTip/Tooltip";
-import { Caption } from "../../../components/Typography/Caption/caption";
-import { Button } from "../../../components/Button/Button/Button";
-import { Checkbox } from "../../../components/Checkbox/checkbox";
-import { Badge } from "../../../components/Badge/Badge";
-export default {
-    title: "Components/Dropdown/Combobox",
-    component: Combobox,
-    tags: ["autodocs"],
-    argTypes: {
-        options: {
-            control: { type: "object" },
-            description: "Options for the combobox dropdown",
-            table: {
-                type: { summary: "Array<{ value: string; label: string }>" },
-                defaultValue: { summary: "See default" },
-            },
-        },
-        size: {
-            control: { type: "select" },
-            options: Object.keys(comboboxSizes),
-            description: "Size of the combobox button",
-            table: {
-                type: { summary: "comboboxSizes" },
-                defaultValue: { summary: "md" },
-            },
-        },
-        placeholder: {
-            control: { type: "text" },
-            description: "Placeholder text for the combobox",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "Select Options" },
-            },
-        },
-        shape: {
-            control: { type: "select" },
-            options: Object.keys(comboboxShapes),
-            description: "Shape of the combobox button",
-            table: {
-                type: { summary: "comboboxShapes" },
-                defaultValue: { summary: "rectangular" },
-            },
-        },
-        variant: {
-            control: { type: "select" },
-            options: Object.keys(comboboxSelectType),
-            description: "Type of the combobox",
-            table: {
-                type: { summary: "comboboxSelectType" },
-                defaultValue: { summary: "fill" },
-            },
-        },
-        color: {
-            control: { type: "select" },
-            options: Object.keys(comboboxColor.fill),
-            description: "Color of the combobox",
-            table: {
-                type: { summary: "comboboxColor" },
-                defaultValue: { summary: "default" },
-            },
-        },
-        isSearch: {
-            control: { type: "boolean" },
-            description: "Enable search functionality",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: "false" },
-            },
-        },
-        isMulti: {
-            control: { type: "boolean" },
-            description: "Enable multi-select functionality",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: "false" },
-            },
-        },
-        onSelect: {
-            control: false,
-            description: "Callback fired when an option is selected",
-            table: {
-                type: { summary: "(selected: any) => void" },
-            },
-        },
-        disabled: {
-            control: { type: "boolean" },
-            description: "Disable the combobox",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: "false" },
-            },
-        },
-        renderOption: {
-            control: false,
-            description: "Custom render function for options",
-            table: {
-                type: { summary: "(option: any) => ReactNode" },
-            },
-        },
-        defaultValue: {
-            control: { type: "text" },
-            description: "Default value for the combobox",
-            table: {
-                type: { summary: "string | string[]" },
-            },
-        },
-    },
-};
-var Template = function (args) { return _jsx(Combobox, __assign({}, args)); };
-export var Default = Template.bind({});
-Default.args = {
-    size: "md",
-    placeholder: "Select Options",
-    shape: "rectangular",
-    options: [
-        { key: "next.js", value: "Next.js" },
-        { key: "sveltekit", value: "SvelteKit" },
-        { key: "nest.js", value: "Nest.js" },
-        { key: "remix", value: "Remix" },
-        { key: "astro", value: "Astro" },
-        { key: "react", value: "React" },
-        { key: "nest", value: "Nest" },
-        { key: "python", value: "Python" },
-        { key: "ai", value: "AI" },
-    ],
-    isSearch: true,
-    isMulti: true,
-    renderOption: function (option) { return (_jsxs(_Fragment, { children: [option.icon && _jsx(LUIcon, { icon: option.icon, size: "md" }), _jsx("span", { children: option.key })] })); },
-    onSelect: function (value) { return console.log(value); },
-};
-export var Basic = function () { return (_jsx(Combobox, { options: [
-        { key: "React", value: "react" },
-        { key: "Vue", value: "vue" },
-    ], onSelect: function (value) { return console.log(value); } })); };
-export var ComboboxSize = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Combobox, { size: "sm", options: [
-                { key: "React", value: "react" },
-                { key: "Vue", value: "vue" },
-            ], onSelect: function (value) { return console.log(value); } }), _jsx(Combobox, { size: "md", options: [
-                { key: "React", value: "react" },
-                { key: "Vue", value: "vue" },
-            ], onSelect: function (value) { return console.log(value); } }), _jsx(Combobox, { size: "lg", options: [
-                { key: "React", value: "react" },
-                { key: "Vue", value: "vue" },
-            ], onSelect: function (value) { return console.log(value); } })] })); };
-export var ComboboxType = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Label, { variant: "label-sm", children: "Text" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return _jsx("span", { children: option.value }); } }), _jsx(Label, { variant: "label-sm", children: "Text With Right Icon" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: option.value }), _jsx(LUIcon, { icon: "plus" })] })); } }), _jsx(Label, { variant: "label-sm", children: "Text With Left Icon" }), _jsx(Combobox, { isMulti: true, options: [
-                { key: "next.js", value: "Next.js", icon: "plus" },
-                { key: "sveltekit", value: "SvelteKit", icon: "star" },
-                { key: "nest.js", value: "Nest.js", icon: "check" },
-                { key: "remix", value: "Remix", icon: "minus" },
-                { key: "astro", value: "Astro", icon: "plus" },
-            ], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: option.icon }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Badge" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return (_jsx(Badge, { startIcon: "star", color: "light-blue", children: option.value })); } }), _jsx(Label, { variant: "label-sm", children: "Text+Counter" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: option.value }), _jsx(Badge, { color: "light-blue", children: +3 })] })); } })] })); };
-export var ComboboxWithCheckbox = function () {
-    var _a = useState([]), selected = _a[0], setSelected = _a[1];
-    var options = ["React", "Vue", "Angular"];
-    var onCheckChange = function (value) {
-        setSelected(function (prev) {
-            return prev.includes(value) ? prev.filter(function (v) { return v !== value; }) : __spreadArray(__spreadArray([], prev, true), [value], false);
-        });
-    };
-    return (_jsx(Combobox, { isMulti: true, options: options, onSelect: function (value) {
-            if (Array.isArray(value)) {
-                setSelected(value);
-            }
-        }, renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(Checkbox, { id: "checkbox-".concat(option.value), checked: selected.includes(option.value), onCheckedChange: function () {
-                        onCheckChange(option.value);
-                    } }), _jsx("span", { children: option.value })] })); } }));
-};
-export var ComboboxWithUserIcon = function () { return (_jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular", "Nest", "Next"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "user", variant: "padded" }), _jsx("span", { children: option.value })] })); } })); };
-export var ComboboxWithDefaultValue = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Label, { variant: "label-sm", children: "Multiple Default Values in Multiple Select" }), _jsx(Combobox, { isMulti: true, isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], defaultValue: ["React", "Vue"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Single Default Value in Multiple Select" }), _jsx(Combobox, { isMulti: true, isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], defaultValue: ["React"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Single Default Value in Single Select" }), _jsx(Combobox, { isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], defaultValue: "React", renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } })] })); };
-export var ListOfArray = function () { return (_jsx(Combobox, { isMulti: true, isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } })); };
-export var ComboboxValidation = function () {
-    var _a = useState(""), selected = _a[0], setSelected = _a[1];
-    var _b = useState(false), error = _b[0], setError = _b[1];
-    var handleSelect = function (value) {
-        // Since isMulti is false, value will be string
-        if (typeof value === "string") {
-            setSelected(value);
-            if (value && error)
-                setError(false);
-        }
-    };
-    var handleSubmit = function (e) {
-        e.preventDefault();
-        if (!selected) {
-            setError(true);
-        }
-        else {
-            setError(false);
-        }
-    };
-    return (_jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Label, { variant: "label-sm", children: "Select Category" }), _jsx("span", { className: "text-red-600", children: "*" }), _jsx(Tooltip, { title: "Select Option", children: _jsx(LUIcon, { variant: "padded", size: "xs", shape: "rounded", icon: "question", color: "light-blue" }) })] }), _jsxs("div", { children: [_jsx(Combobox, { placeholder: "Select framework...", size: "md", options: [
-                            { key: "next.js", value: "Next.js" },
-                            { key: "sveltekit", value: "SvelteKit" },
-                            { key: "nest.js", value: "Nest.js" },
-                            { key: "remix", value: "Remix" },
-                            { key: "astro", value: "Astro" },
-                        ], isSearch: true, onSelect: handleSelect, color: error ? "red" : "default", renderOption: function (option) { return _jsx("span", { children: option.value }); } }), error && (_jsx(Caption, { variant: "md", className: "mt-1 text-red-600", children: "field is required" }))] }), _jsx(Button, { type: "submit", children: "Submit" })] }));
-};

package/dist/src/components/Dropdown/Combobox/dialog.js

@@ -1,68 +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 * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-import { cn } from "../../../lib/utils";
-function Dialog(_a) {
-    var props = __rest(_a, []);
-    return _jsx(DialogPrimitive.Root, __assign({ "data-slot": "dialog" }, props));
-}
-function DialogTrigger(_a) {
-    var props = __rest(_a, []);
-    return _jsx(DialogPrimitive.Trigger, __assign({ "data-slot": "dialog-trigger" }, props));
-}
-function DialogPortal(_a) {
-    var props = __rest(_a, []);
-    return _jsx(DialogPrimitive.Portal, __assign({ "data-slot": "dialog-portal" }, props));
-}
-function DialogClose(_a) {
-    var props = __rest(_a, []);
-    return _jsx(DialogPrimitive.Close, __assign({ "data-slot": "dialog-close" }, props));
-}
-function DialogOverlay(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Overlay, __assign({ "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className) }, props)));
-}
-function DialogContent(_a) {
-    var className = _a.className, children = _a.children, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? true : _b, props = __rest(_a, ["className", "children", "showCloseButton"]);
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ "data-slot": "dialog-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
-}
-function DialogHeader(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className) }, props)));
-}
-function DialogFooter(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
-}
-function DialogTitle(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Title, __assign({ "data-slot": "dialog-title", className: cn("text-lg leading-none font-semibold", className) }, props)));
-}
-function DialogDescription(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Description, __assign({ "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className) }, props)));
-}
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/src/components/Dropdown/Combobox/utils/renderBadge.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from "../../../../components/Badge/Badge";
-export var renderBadge = function (option, handleRemove) {
-    return (_jsx(Badge, { color: "light-blue", startIcon: option.icon, onRemove: function () { return handleRemove(option.value); }, children: option.key }, option.value));
-};