linkedunion-design-kit 1.11.6 → 1.11.8

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

@@ -0,0 +1,582 @@
+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 { 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 (<Caption variant="sm" color="gray">
+      Selected: {dateRange.from.toLocaleDateString()}
+      {dateRange.to && " - ".concat(dateRange.to.toLocaleDateString())}
+    </Caption>);
+};
+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 (<div className="flex flex-col gap-4">
+      <div className="w-80">
+        <DateRangePicker {...args} dateRange={dateRange} onChange={setDateRange}/>
+      </div>
+      <SelectedDateDisplay dateRange={dateRange}/>
+    </div>);
+};
+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 (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Default Labels</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Shows &quot;Start date&quot; and &quot;End date&quot; by default
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} endIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Custom Labels</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Customize labels for your use case
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startLabel="Check-in" endLabel="Check-out" endIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Business Context</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Labels adapt to your domain
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startLabel="From" endLabel="To" endIcon="calendar-days"/>
+      </div>
+    </div>);
+};
+export var WithIcons = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>With Calendar Icon</Label>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>With Both Icons</Label>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" endIcon="angle-down"/>
+      </div>
+    </div>);
+};
+export var Sizes = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Small (sm)</Label>
+        <DateRangePicker size="sm" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Medium (md)</Label>
+        <DateRangePicker size="md" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Large (lg)</Label>
+        <DateRangePicker size="lg" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+    </div>);
+};
+export var Variants = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Filled (default)</Label>
+        <DateRangePicker variant="filled" color="default" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Outline</Label>
+        <DateRangePicker variant="outlined" color="default" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+    </div>);
+};
+export var Shapes = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Square</Label>
+        <DateRangePicker shape="square" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Rounded</Label>
+        <DateRangePicker shape="rounded" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+    </div>);
+};
+export var WithPresets = function () {
+    var today = getToday();
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <Label>With Quick Select Presets</Label>
+      <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" presets={getExtendedPresets(today)}/>
+      <SelectedDateDisplay dateRange={dateRange}/>
+    </div>);
+};
+export var SingleMonth = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <Label>Single Month Display</Label>
+      <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" numberOfMonths={1}/>
+    </div>);
+};
+export var WithDateRestrictions = function () {
+    var today = getToday();
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Only Future Dates</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Cannot select dates before today
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" minDate={today}/>
+      </div>
+      <div>
+        <Label>Only Past Dates</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Cannot select dates after today
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" maxDate={today}/>
+      </div>
+      <div>
+        <Label>Restricted Range</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Only dates within 30 days from today
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" minDate={subDays(today, 30)} maxDate={addDays(today, 30)}/>
+      </div>
+    </div>);
+};
+export var DisabledState = function () {
+    var dateRange = useState({
+        from: startOfDay(new Date()),
+        to: addDays(startOfDay(new Date()), 7),
+    })[0];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Disabled Empty</Label>
+        <DateRangePicker disabled startIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Disabled with Value</Label>
+        <DateRangePicker disabled dateRange={dateRange} startIcon="calendar-days"/>
+      </div>
+    </div>);
+};
+export var CustomFormatting = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Custom Date Format</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Format: dd/MM/yyyy
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" dateFormat="dd/MM/yyyy"/>
+      </div>
+      <div>
+        <Label>Custom Separator</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Separator: &quot; to &quot;
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" separator=" to "/>
+      </div>
+      <div>
+        <Label>Long Date Format</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Format: MMM dd, yyyy
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" dateFormat="MMM dd, yyyy"/>
+      </div>
+    </div>);
+};
+export var Colors = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Default</Label>
+        <DateRangePicker color="default" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+      <div>
+        <Label>Error</Label>
+        <DateRangePicker color="danger" dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+        <Caption variant="sm" color="danger" className="mt-1">
+          Please select a valid date range
+        </Caption>
+      </div>
+    </div>);
+};
+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 (<form onSubmit={handleSubmit} className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>Booking Period</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Select your check-in and check-out dates
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" minDate={today} presets={getBookingPresets(today)}/>
+      </div>
+      <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">
+        Book Now
+      </Button>
+      {submitted && (<div className="p-3 bg-green-50 border border-green-200 rounded-md">
+          <Body variant="body-sm" color="success">
+            ✓ 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())}
+          </Body>
+        </div>)}
+    </form>);
+};
+export var WithTooltip = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div className="flex items-center gap-2">
+        <Label>Reporting Period</Label>
+        <Tooltip title="Select the start and end dates for your report">
+          <LUIcon icon="info" size="xs" color="gray"/>
+        </Tooltip>
+      </div>
+      <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+    </div>);
+};
+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 (<div className="flex flex-col gap-6 max-w-2xl">
+      <div>
+        <Body variant="body-lg-500" className="mb-4">
+          Hotel Booking
+        </Body>
+        <div className="p-4 border border-gray-200 rounded-lg space-y-4">
+          <div>
+            <Label>Select your stay dates</Label>
+            <DateRangePicker dateRange={bookingRange} onChange={setBookingRange} startIcon="calendar-days" minDate={today} separator=" → " numberOfMonths={2} presets={getBookingPresets(today)}/>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <Body variant="body-lg-500" className="mb-4">
+          Analytics Dashboard
+        </Body>
+        <div className="p-4 border border-gray-200 rounded-lg space-y-4">
+          <div>
+            <Label>Date Range</Label>
+            <DateRangePicker dateRange={analyticsRange} onChange={setAnalyticsRange} startIcon="calendar-days" numberOfMonths={2} presets={getAnalyticsPresets(today)}/>
+          </div>
+          {(analyticsRange === null || analyticsRange === void 0 ? void 0 : analyticsRange.from) && (analyticsRange === null || analyticsRange === void 0 ? void 0 : analyticsRange.to) && (<div className="p-3 bg-blue-50 rounded-md">
+              <Caption variant="sm" color="info">
+                Showing data for{" "}
+                {Math.ceil((analyticsRange.to.getTime() -
+                analyticsRange.from.getTime()) /
+                (1000 * 60 * 60 * 24)) + 1}{" "}
+                days
+              </Caption>
+            </div>)}
+        </div>
+      </div>
+
+      <div>
+        <Body variant="body-lg-500" className="mb-4">
+          Project Timeline
+        </Body>
+        <div className="p-4 border border-gray-200 rounded-lg space-y-4">
+          <div>
+            <Label>Project Duration</Label>
+            <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+              Set the start and end dates for your project
+            </Body>
+            <DateRangePicker dateRange={projectRange} onChange={setProjectRange} startIcon="calendar-days" minDate={today} variant="outlined" numberOfMonths={2}/>
+          </div>
+        </div>
+      </div>
+    </div>);
+};
+export var WithClearButton = function () {
+    var _a = useState({
+        from: startOfDay(new Date()),
+        to: addDays(startOfDay(new Date()), 7),
+    }), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>With Clear Button (default)</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Clear button appears automatically when dates are selected
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" showClearButton={true}/>
+      </div>
+      <div>
+        <Label>Without Clear Button</Label>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" showClearButton={false} endIcon="angle-down"/>
+      </div>
+    </div>);
+};
+export var WithApplyButton = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    var _b = useDateRangeState(), appliedRange = _b[0], setAppliedRange = _b[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <div>
+        <Label>With Apply/Cancel Buttons</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Changes are only applied when you click Apply
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" showApplyButton={true} onApply={function (range) {
+            setAppliedRange(range);
+        }} onCancel={function () {
+            setDateRange(appliedRange);
+        }} onClear={function () {
+            setAppliedRange(null);
+        }}/>
+      </div>
+      {/* {appliedRange?.from && (
+          <div className="p-3 bg-green-50 border border-green-200 rounded-md">
+            <Caption variant="sm" color="success">
+              ✓ Applied: {appliedRange.from.toLocaleDateString()}
+              {appliedRange.to && ` - ${appliedRange.to.toLocaleDateString()}`}
+            </Caption>
+          </div>
+        )} */}
+    </div>);
+};
+export var WithApplyButtonAndPresets = function () {
+    var today = getToday();
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4 max-w-sm">
+      <Label>Apply Button with Presets</Label>
+      <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+        Preview your selection before applying
+      </Body>
+      <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" showApplyButton={true} presets={getCommonPresets(today)}/>
+    </div>);
+};
+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 (<div className="flex flex-col gap-4 max-w-sm">
+      <Label>Clear Button with Callback</Label>
+      <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days" onClear={function () {
+            setClearCount(function (prev) { return prev + 1; });
+            console.log("Cleared");
+        }}/>
+      {clearCount > 0 && (<Caption variant="sm" color="gray">
+          Cleared {clearCount} time{clearCount > 1 ? "s" : ""}
+        </Caption>)}
+    </div>);
+};
+export var MobileResponsive = function () {
+    var _a = useDateRangeState(), dateRange = _a[0], setDateRange = _a[1];
+    return (<div className="flex flex-col gap-4">
+      <div>
+        <Label>Mobile-Optimized Date Range Picker</Label>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          Resize your browser to &lt; 768px width to see the mobile experience
+        </Body>
+        <Body as="p" variant="body-xs" color="light-gray" className="mb-2">
+          On mobile: Step 1 - Select start date → Step 2 - Select end date →
+          Step 3 - Apply/Cancel
+        </Body>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} startIcon="calendar-days"/>
+      </div>
+      <SelectedDateDisplay dateRange={dateRange}/>
+      <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
+        <Caption variant="sm" color="info">
+          💡 The component automatically detects screen size and provides:
+          <br />• Desktop (≥768px): Full calendar with 1-2 months
+          <br />• Mobile (&lt;768px): Single month with step-by-step guidance
+          <br />• Apply/Cancel buttons automatically appear on mobile after both
+          dates are selected
+        </Caption>
+      </div>
+    </div>);
+};

package/dist/src/components/Dropdown/Combobox/Combobox.d.ts

@@ -1,3 +1,3 @@
 import { ComboboxProps } from "./type";
-declare const Combobox: (props: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Combobox: (props: ComboboxProps) => import("react").JSX.Element;
 export default Combobox;