@opexa/portal-components 0.0.278 → 0.0.279

package/dist/components/BetRecords/BetRecords.client.js

@@ -1,13 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createListCollection } from '@ark-ui/react/collection';
-import { parseDate } from '@ark-ui/react/date-picker';
+import { parseDate, useDatePickerContext } from '@ark-ui/react/date-picker';
 import { tz, TZDateMini } from '@date-fns/tz';
 import { endOfDay, format, startOfDay } from 'date-fns';
 import { useReducer, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useMediaQuery } from 'usehooks-ts';
 import { z } from 'zod';
 import { useBetRecordsQuery } from '../../client/hooks/useBetRecordsQuery.js';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { GAME_PROVIDER_DATA, GAME_TYPE_DATA, GAME_TYPES, } from '../../constants/index.js';
@@ -84,50 +87,46 @@ export function BetRecords__client(props) {
             }),
         },
     });
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (!open && !state.timestamp)
+                setTab('all');
+        },
+    });
     return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type ?? 'all', onValueChange: (details) => {
                         firstPage();
                         setState({
                             type: z.enum(GAME_TYPES).safeParse(details.value).data ?? null,
                             provider: null,
                         });
-                    }, className: "w-full overflow-x-auto lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
-                            .filter(Boolean)
-                            .map((d) => parseDate(d)), onValueChange: (details) => {
+                    }, className: "w-full overflow-x-auto lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                            const value = TabDefinition.parse(details.value);
+                            if (value === 'today') {
+                                const now = new Date();
+                                setState({
+                                    timestamp: {
+                                        start: startOfDay(now),
+                                        end: endOfDay(now),
+                                    },
+                                });
+                            }
+                            else {
+                                setState({
+                                    timestamp: null,
+                                });
+                            }
                             firstPage();
-                            setState({
-                                timestamp: {
-                                    start: details.value.at(0)?.toDate(DEVICE_TIMEZONE),
-                                    end: details.value.at(1)?.toDate(DEVICE_TIMEZONE),
-                                },
-                            });
-                        }, onOpenChange: (details) => {
-                            if (details.open)
-                                return;
-                            if (state.timestamp)
-                                return;
-                            setTab('all');
-                        }, selectionMode: "range", closeOnSelect: false, positioning: {
-                            gutter: 20,
-                            placement: 'bottom',
-                        }, children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
-                                    const value = TabDefinition.parse(details.value);
-                                    if (value === 'today') {
-                                        const now = new Date();
-                                        setState({
-                                            timestamp: {
-                                                start: startOfDay(now),
-                                                end: endOfDay(now),
-                                            },
-                                        });
-                                    }
-                                    else {
-                                        setState({
-                                            timestamp: null,
-                                        });
-                                    }
-                                    firstPage();
-                                    setTab(value);
-                                }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(DatePicker.Context, { children: (api) => (_jsx(SegmentGroup.Item, { value: "custom", onClick: () => api.setOpen(true), className: "w-full lg:w-auto", children: _jsxs(DatePicker.Control, { children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }) })) }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) }) })] }), _jsx("div", { className: "hidden grow lg:block" }), _jsxs(Select.Root, { collection: providerCollection, value: state.provider ? [state.provider] : [], onValueChange: (details) => {
+                            setTab(value);
+                        }, ids: {
+                            item(value) {
+                                return `segment-group:item:${value}`;
+                            },
+                        }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "custom", onClick: () => disclosure.setOpen(true), className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(RangeDatePicker, { value: {
+                            start: state.timestamp?.start,
+                            end: state.timestamp?.end,
+                        }, onValueChange: (timestamp) => {
+                            setState({ timestamp });
+                        }, open: disclosure.open, onOpenChange: disclosure.setOpen }), _jsx("div", { className: "hidden grow lg:block" }), _jsxs(Select.Root, { collection: providerCollection, value: state.provider ? [state.provider] : [], onValueChange: (details) => {
                             const value = z
                                 .enum((props.gameProviders ?? []))
                                 .safeParse(details.value.at(0)).data;
@@ -200,3 +199,42 @@ const statusCollection = createListCollection({
 });
 const TabDefinition = z.enum(['all', 'today', 'custom']);
 const DEVICE_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+function RangeDatePicker(props) {
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? null,
+        onChange: (value) => {
+            props.onValueChange?.(value);
+        },
+    });
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: (open) => {
+            props.onOpenChange?.(open);
+        },
+    });
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    return (_jsx(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [value?.start, value?.end]
+            .filter(Boolean)
+            .map((d) => parseDate(d)), onValueChange: (details) => {
+            setValue({
+                start: details.value.at(0)?.toDate(DEVICE_TIMEZONE),
+                end: details.value.at(1)?.toDate(DEVICE_TIMEZONE),
+            });
+        }, open: open, onOpenChange: (details) => {
+            setOpen(details.open);
+        }, selectionMode: "range", closeOnSelect: false, fixedWeeks: true, numOfMonths: desktop ? 2 : 1, positioning: {
+            gutter: 16,
+            placement: 'bottom',
+        }, ids: {
+            control: 'segment-group:item:custom',
+        }, children: _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { className: "p-0", children: _jsxs("div", { className: "flex", children: [_jsx(RangeDatePickerCalendar, { monthOffset: 0 }), desktop && _jsx(RangeDatePickerCalendar, { monthOffset: 1 })] }) }) }) }) }));
+}
+function RangeDatePickerCalendar({ monthOffset }) {
+    const datePicker = useDatePickerContext();
+    const offset = datePicker.getOffset({
+        months: monthOffset,
+    });
+    return (_jsxs(DatePicker.View, { view: "day", className: "border-border-secondary px-6 py-5 lg:first:border-r", children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx("span", { className: "text-text-secondary-700 text-base font-semibold", children: offset.visibleRangeText.start }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: datePicker.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.slice(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: offset.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, visibleRange: offset.visibleRange, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] }));
+}

package/dist/components/Bonuses/ClaimSpotBonus.lazy.js

@@ -13,7 +13,11 @@ import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 const definition = z.object({
-    code: z.string().min(1, 'Code is required').trim(),
+    code: z
+        .string()
+        .min(1, 'Code is required')
+        .max(10, 'Promo code is too long (max 10 characters)')
+        .trim(),
 });
 export function ClaimSpotBonus() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -39,7 +43,7 @@ export function ClaimSpotBonus() {
             code: '',
         },
     });
-    return (_jsx(Dialog.Root, { open: globalStore.spotBonus.open, onOpenChange: (details) => globalStore.spotBonus.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center lg:items-start", children: _jsxs(Dialog.Content, { className: "mx-auto w-[25rem] max-w-full rounded-xl p-3xl overflow-y-auto", children: [_jsx("div", { className: "overflow-hidden rounded-md", style: {
+    return (_jsx(Dialog.Root, { open: globalStore.spotBonus.open, onOpenChange: (details) => globalStore.spotBonus.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center lg:items-start", children: _jsxs(Dialog.Content, { className: "mx-auto w-[25rem] max-w-full overflow-y-auto rounded-xl p-3xl", children: [_jsx("div", { className: "overflow-hidden rounded-md", style: {
                                     background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
                                 }, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[12.5rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
                                     claimSpotBonusMutation.mutate(data.code);

package/dist/components/TransactionRecords/TableFilters.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createListCollection } from '@ark-ui/react/collection';
-import { parseDate } from '@ark-ui/react/date-picker';
+import { parseDate, useDatePickerContext } from '@ark-ui/react/date-picker';
 import { endOfDay, startOfDay } from 'date-fns';
 import { useState } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
 import { z } from 'zod';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
@@ -21,7 +23,7 @@ const DEPOSIT_TYPES = [
     'MAYA',
     'MANUAL',
     'ONLINE_BANK',
-    'QR_PH'
+    'QR_PH',
 ];
 const DEPOSIT_TYPES_MAP = {
     BANK: 'Bank',
@@ -165,36 +167,35 @@ export function TableFilters(props) {
             handleChange({ transactionType });
         },
     });
-    return (_jsxs("div", { className: "flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [timestamp?.start, timestamp?.end]
-                    .filter(Boolean)
-                    .map((d) => parseDate(d)), onValueChange: (details) => {
-                    setTimestamp({
-                        start: details.value.at(0)?.toDate(deviceTimezone),
-                        end: details.value.at(1)?.toDate(deviceTimezone),
-                    });
-                }, onOpenChange: (details) => {
-                    if (details.open)
-                        return;
-                    if (timestamp)
-                        return;
-                    setTab('all');
-                }, selectionMode: "range", closeOnSelect: false, positioning: {
-                    gutter: 20,
-                    placement: 'bottom',
-                }, children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
-                            const value = TabDefinition.parse(details.value);
-                            if (value === 'today') {
-                                const now = new Date();
-                                setTimestamp({
-                                    start: startOfDay(now),
-                                    end: endOfDay(now),
-                                });
-                            }
-                            else {
-                                setTimestamp(null);
-                            }
-                            setTab(value);
-                        }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(DatePicker.Context, { children: (api) => (_jsx(SegmentGroup.Item, { value: "custom", onClick: () => api.setOpen(true), className: "w-full lg:w-auto", children: _jsxs(DatePicker.Control, { children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }) })) }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) }) })] }), _jsx("div", { className: "hidden grow lg:block" }), props.enabledFilters?.depositType && (_jsxs(Select.Root, { collection: depositTypeCollection, value: depositType ? [depositType] : [], onValueChange: (details) => {
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (!open && !timestamp)
+                setTab('all');
+        },
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                    const value = TabDefinition.parse(details.value);
+                    if (value === 'today') {
+                        const now = new Date();
+                        setTimestamp({
+                            start: startOfDay(now),
+                            end: endOfDay(now),
+                        });
+                    }
+                    else {
+                        setTimestamp(null);
+                    }
+                    setTab(value);
+                }, className: "w-full lg:w-fit", ids: {
+                    item(value) {
+                        return `segment-group:item:${value}`;
+                    },
+                }, children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "custom", className: "w-full lg:w-auto", onClick: () => {
+                            disclosure.setOpen(true);
+                        }, children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(RangeDatePicker, { value: {
+                    start: timestamp?.start,
+                    end: timestamp?.end,
+                }, onValueChange: setTimestamp, open: disclosure.open, onOpenChange: disclosure.setOpen }), _jsx("div", { className: "hidden grow lg:block" }), props.enabledFilters?.depositType && (_jsxs(Select.Root, { collection: depositTypeCollection, value: depositType ? [depositType] : [], onValueChange: (details) => {
                     const value = z
                         .enum(DEPOSIT_TYPES)
                         .safeParse(details.value.at(0)).data;
@@ -241,3 +242,42 @@ export function TableFilters(props) {
                                                 e.stopPropagation();
                                             }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: transactionTypeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: transactionTypeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) }) })] }))] }));
 }
+function RangeDatePicker(props) {
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? null,
+        onChange: (value) => {
+            props.onValueChange?.(value);
+        },
+    });
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: (open) => {
+            props.onOpenChange?.(open);
+        },
+    });
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    return (_jsx(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [value?.start, value?.end]
+            .filter(Boolean)
+            .map((d) => parseDate(d)), onValueChange: (details) => {
+            setValue({
+                start: details.value.at(0)?.toDate(deviceTimezone),
+                end: details.value.at(1)?.toDate(deviceTimezone),
+            });
+        }, open: open, onOpenChange: (details) => {
+            setOpen(details.open);
+        }, selectionMode: "range", closeOnSelect: false, fixedWeeks: true, numOfMonths: desktop ? 2 : 1, positioning: {
+            gutter: 16,
+            placement: 'bottom',
+        }, ids: {
+            control: 'segment-group:item:custom',
+        }, children: _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { className: "p-0", children: _jsxs("div", { className: "flex", children: [_jsx(RangeDatePickerCalendar, { monthOffset: 0 }), desktop && _jsx(RangeDatePickerCalendar, { monthOffset: 1 })] }) }) }) }) }));
+}
+function RangeDatePickerCalendar({ monthOffset }) {
+    const datePicker = useDatePickerContext();
+    const offset = datePicker.getOffset({
+        months: monthOffset,
+    });
+    return (_jsxs(DatePicker.View, { view: "day", className: "border-border-secondary px-6 py-5 lg:first:border-r", children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx("span", { className: "text-text-secondary-700 text-base font-semibold", children: offset.visibleRangeText.start }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: datePicker.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.slice(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: offset.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, visibleRange: offset.visibleRange, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.278",
+  "version": "0.0.279",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",