@wallarm-org/design-system 0.11.0 → 0.12.0

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,75 @@
+import { type FC, type ReactNode } from 'react';
+import type { CalendarType, DateValue, PresetConfig } from './types';
+export interface CalendarProps {
+    /** Calendar type: 'single' for one month, 'range' for two months (date range selection) */
+    type?: CalendarType;
+    /** Show time selection (affects input placeholder text) */
+    showTime?: boolean;
+    /** Show keyboard shortcut hints in presets and footer */
+    showKeyboardHints?: boolean;
+    /** Controlled value - array of selected dates */
+    value?: DateValue[];
+    /** Default value for uncontrolled mode */
+    defaultValue?: DateValue[];
+    /** Callback fired when selected value changes */
+    onChange?: (value: DateValue[]) => void;
+    /** Minimum selectable date */
+    minDate?: DateValue;
+    /** Maximum selectable date */
+    maxDate?: DateValue;
+    /**
+     * Function to determine if a specific date should be unavailable/disabled.
+     * DateValue has year, month (1-12), and day properties.
+     * To get day of week, use: new Date(date.year, date.month - 1, date.day).getDay()
+     * where Sunday = 0, Saturday = 6.
+     */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /**
+     * When true, prevents selecting a range that contains any unavailable dates.
+     * Requires controlled mode (value + onChange props) to work properly.
+     */
+    disallowDisabledDatesInRange?: boolean;
+    /** Controlled open state of the calendar popover */
+    open?: boolean;
+    /** Default open state for uncontrolled mode */
+    defaultOpen?: boolean;
+    /** Callback fired when popover open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether to close calendar on date selection. Default: true */
+    closeOnSelect?: boolean;
+    /** Whether calendar is readonly (display only, no date selection allowed). Default: false */
+    readonly?: boolean;
+    /** Compound components (CalendarTrigger, CalendarContent, etc.) */
+    children?: ReactNode;
+}
+/** Default presets for single date selection */
+export declare const DEFAULT_SINGLE_PRESETS: PresetConfig[];
+/** Default presets for range selection */
+export declare const DEFAULT_RANGE_PRESETS: PresetConfig[];
+/**
+ * Calendar component for date and date range selection.
+ *
+ * Uses compound pattern — compose sub-components for full control:
+ * ```tsx
+ * <Calendar type='range'>
+ *   <CalendarTrigger>
+ *     <Button>Select date</Button>
+ *   </CalendarTrigger>
+ *   <CalendarContent>
+ *     <CalendarPresets presets={myPresets} />
+ *     <CalendarBody>
+ *       <CalendarInputHeader />
+ *       <CalendarGrids />
+ *       <CalendarFooter>
+ *         <CalendarKeyboardHints />
+ *         <CalendarFooterControls>
+ *           <CalendarResetButton />
+ *           <CalendarApplyButton />
+ *         </CalendarFooterControls>
+ *       </CalendarFooter>
+ *     </CalendarBody>
+ *   </CalendarContent>
+ * </Calendar>
+ * ```
+ */
+export declare const Calendar: FC<CalendarProps>;

package/dist/components/Calendar/Calendar.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Calendar/Calendar.figma.js

@@ -0,0 +1,324 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Button } from "../Button/index.js";
+import { Calendar } from "./Calendar.js";
+import { CalendarApplyButton } from "./CalendarApplyButton.js";
+import { CalendarBody } from "./CalendarBody.js";
+import { CalendarContent } from "./CalendarContent.js";
+import { CalendarFooter } from "./CalendarFooter.js";
+import { CalendarFooterControls } from "./CalendarFooterControls.js";
+import { CalendarGrids } from "./CalendarGrids.js";
+import { CalendarInputHeader } from "./CalendarInputHeader.js";
+import { CalendarKeyboardHints } from "./CalendarKeyboardHints.js";
+import { CalendarPresets } from "./CalendarPresets.js";
+import { CalendarResetButton } from "./CalendarResetButton.js";
+import { CalendarTrigger } from "./CalendarTrigger.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=2233-8455';
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Single',
+        Presets: false,
+        Input: false,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "single",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date"
+                    })
+                }),
+                /*#__PURE__*/ jsx(CalendarContent, {
+                    children: /*#__PURE__*/ jsx(CalendarBody, {
+                        children: /*#__PURE__*/ jsx(CalendarGrids, {})
+                    })
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Single',
+        Presets: false,
+        Input: true,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "single",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date"
+                    })
+                }),
+                /*#__PURE__*/ jsx(CalendarContent, {
+                    children: /*#__PURE__*/ jsxs(CalendarBody, {
+                        children: [
+                            /*#__PURE__*/ jsx(CalendarInputHeader, {}),
+                            /*#__PURE__*/ jsx(CalendarGrids, {})
+                        ]
+                    })
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Single',
+        Presets: true,
+        Input: false,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "single",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(CalendarContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarPresets, {}),
+                        /*#__PURE__*/ jsx(CalendarBody, {
+                            children: /*#__PURE__*/ jsx(CalendarGrids, {})
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Single',
+        Presets: true,
+        Input: true,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "single",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(CalendarContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarPresets, {}),
+                        /*#__PURE__*/ jsxs(CalendarBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(CalendarInputHeader, {}),
+                                /*#__PURE__*/ jsx(CalendarGrids, {})
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Single',
+        Presets: true,
+        Input: true,
+        Footer: true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "single",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(CalendarContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarPresets, {}),
+                        /*#__PURE__*/ jsxs(CalendarBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(CalendarInputHeader, {}),
+                                /*#__PURE__*/ jsx(CalendarGrids, {}),
+                                /*#__PURE__*/ jsxs(CalendarFooter, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(CalendarKeyboardHints, {}),
+                                        /*#__PURE__*/ jsxs(CalendarFooterControls, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(CalendarResetButton, {}),
+                                                /*#__PURE__*/ jsx(CalendarApplyButton, {})
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Double',
+        Presets: false,
+        Input: false,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "range",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date range"
+                    })
+                }),
+                /*#__PURE__*/ jsx(CalendarContent, {
+                    children: /*#__PURE__*/ jsx(CalendarBody, {
+                        children: /*#__PURE__*/ jsx(CalendarGrids, {})
+                    })
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Double',
+        Presets: false,
+        Input: true,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "range",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date range"
+                    })
+                }),
+                /*#__PURE__*/ jsx(CalendarContent, {
+                    children: /*#__PURE__*/ jsxs(CalendarBody, {
+                        children: [
+                            /*#__PURE__*/ jsx(CalendarInputHeader, {}),
+                            /*#__PURE__*/ jsx(CalendarGrids, {})
+                        ]
+                    })
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Double',
+        Presets: true,
+        Input: false,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "range",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date range"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(CalendarContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarPresets, {}),
+                        /*#__PURE__*/ jsx(CalendarBody, {
+                            children: /*#__PURE__*/ jsx(CalendarGrids, {})
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Double',
+        Presets: true,
+        Input: true,
+        Footer: false
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "range",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date range"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(CalendarContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarPresets, {}),
+                        /*#__PURE__*/ jsxs(CalendarBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(CalendarInputHeader, {}),
+                                /*#__PURE__*/ jsx(CalendarGrids, {})
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(Calendar, figmaNodeUrl, {
+    variant: {
+        Type: 'Double',
+        Presets: true,
+        Input: true,
+        Footer: true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Calendar, {
+            type: "range",
+            children: [
+                /*#__PURE__*/ jsx(CalendarTrigger, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "neutral",
+                        children: "Select date range"
+                    })
+                }),
+                /*#__PURE__*/ jsxs(CalendarContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarPresets, {}),
+                        /*#__PURE__*/ jsxs(CalendarBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(CalendarInputHeader, {}),
+                                /*#__PURE__*/ jsx(CalendarGrids, {}),
+                                /*#__PURE__*/ jsxs(CalendarFooter, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(CalendarKeyboardHints, {}),
+                                        /*#__PURE__*/ jsxs(CalendarFooterControls, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(CalendarResetButton, {}),
+                                                /*#__PURE__*/ jsx(CalendarApplyButton, {})
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+});

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,187 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { DatePicker } from "@ark-ui/react";
+import { CalendarDate, endOfMonth, getLocalTimeZone, startOfMonth, today } from "@internationalized/date";
+import { CalendarProvider } from "./CalendarContext.js";
+const toDateValue = (date)=>date;
+const getThisMonthRange = ()=>{
+    const now = today(getLocalTimeZone());
+    return [
+        toDateValue(startOfMonth(now)),
+        toDateValue(endOfMonth(now))
+    ];
+};
+const getRelativeDate = (daysAgo)=>{
+    const now = today(getLocalTimeZone());
+    return [
+        toDateValue(now.subtract({
+            days: daysAgo
+        }))
+    ];
+};
+const getFirstOfThisMonth = ()=>{
+    const now = today(getLocalTimeZone());
+    return [
+        toDateValue(startOfMonth(now))
+    ];
+};
+const getFirstOfLastMonth = ()=>{
+    const now = today(getLocalTimeZone());
+    return [
+        toDateValue(startOfMonth(now.subtract({
+            months: 1
+        })))
+    ];
+};
+const DEFAULT_SINGLE_PRESETS = [
+    {
+        label: 'Today',
+        value: getRelativeDate(0),
+        shortcut: 'T'
+    },
+    {
+        label: 'Yesterday',
+        value: getRelativeDate(1),
+        shortcut: 'Y'
+    },
+    {
+        label: '1 week ago',
+        value: getRelativeDate(7),
+        shortcut: 'W'
+    },
+    {
+        label: '2 weeks ago',
+        value: getRelativeDate(14),
+        shortcut: '2'
+    },
+    {
+        label: '1st of this month',
+        value: getFirstOfThisMonth(),
+        shortcut: 'M'
+    },
+    {
+        label: '1st of last month',
+        value: getFirstOfLastMonth(),
+        shortcut: 'L'
+    },
+    {
+        label: '1 month ago',
+        value: getRelativeDate(30),
+        shortcut: '3'
+    },
+    {
+        label: '3 months ago',
+        value: getRelativeDate(90),
+        shortcut: '9'
+    }
+];
+const DEFAULT_RANGE_PRESETS = [
+    {
+        label: 'Today',
+        value: 'last3Days',
+        shortcut: 'T'
+    },
+    {
+        label: 'Last week',
+        value: 'lastWeek',
+        shortcut: 'W'
+    },
+    {
+        label: 'Last 2 weeks',
+        value: 'last14Days',
+        shortcut: '2'
+    },
+    {
+        label: 'This month',
+        value: getThisMonthRange(),
+        shortcut: 'M'
+    },
+    {
+        label: 'Last month',
+        value: 'lastMonth',
+        shortcut: 'L'
+    },
+    {
+        label: 'Last 3 months',
+        value: 'lastQuarter',
+        shortcut: '3'
+    },
+    {
+        label: 'Last 90 days',
+        value: 'last90Days',
+        shortcut: '9'
+    }
+];
+const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true, value, defaultValue, onChange, minDate, maxDate, isDateUnavailable, disallowDisabledDatesInRange = false, open, defaultOpen, onOpenChange, closeOnSelect = true, readonly = false, children })=>{
+    const isRange = 'range' === type;
+    const numOfMonths = isRange ? 2 : 1;
+    const hasUnavailableDateInRange = useCallback((start, end)=>{
+        if (!isDateUnavailable) return false;
+        let current = new CalendarDate(start.year, start.month, start.day);
+        const endDate = new CalendarDate(end.year, end.month, end.day);
+        while(current.compare(endDate) <= 0){
+            if (isDateUnavailable(toDateValue(current))) return true;
+            current = current.add({
+                days: 1
+            });
+        }
+        return false;
+    }, [
+        isDateUnavailable
+    ]);
+    const handleValueChange = useCallback((details)=>{
+        const newValue = details.value;
+        if (isRange && 2 === newValue.length) {
+            const [start, end] = newValue;
+            if (start && end) {
+                const startDate = new CalendarDate(start.year, start.month, start.day);
+                const endDate = new CalendarDate(end.year, end.month, end.day);
+                if (endDate.compare(startDate) < 0) return;
+            }
+        }
+        if (disallowDisabledDatesInRange && isRange && 2 === newValue.length) {
+            const [start, end] = newValue;
+            if (start && end && hasUnavailableDateInRange(start, end)) return;
+        }
+        onChange?.(newValue);
+    }, [
+        onChange,
+        disallowDisabledDatesInRange,
+        isRange,
+        hasUnavailableDateInRange
+    ]);
+    const handleOpenChange = useCallback((details)=>{
+        onOpenChange?.(details.open);
+    }, [
+        onOpenChange
+    ]);
+    const isControlled = void 0 !== value;
+    const contextValue = {
+        type,
+        isRange,
+        showKeyboardHints,
+        showTime,
+        readonly
+    };
+    return /*#__PURE__*/ jsx(DatePicker.Root, {
+        selectionMode: isRange ? 'range' : 'single',
+        numOfMonths: numOfMonths,
+        value: isControlled ? value : void 0,
+        defaultValue: defaultValue,
+        onValueChange: handleValueChange,
+        open: open,
+        defaultOpen: defaultOpen,
+        onOpenChange: handleOpenChange,
+        min: minDate,
+        max: maxDate,
+        isDateUnavailable: isDateUnavailable,
+        outsideDaySelectable: true,
+        closeOnSelect: closeOnSelect,
+        children: /*#__PURE__*/ jsx(CalendarProvider, {
+            value: contextValue,
+            children: children
+        })
+    });
+};
+Calendar.displayName = 'Calendar';
+export { Calendar, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS };

package/dist/components/Calendar/CalendarApplyButton.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps } from '../Button';
+export interface CalendarApplyButtonProps extends Omit<ButtonProps, 'onClick'> {
+    /** Callback fired before closing calendar */
+    onClick?: () => void;
+}
+/**
+ * Apply button for the calendar footer.
+ * Calls onClick, then closes the calendar.
+ */
+export declare const CalendarApplyButton: import("react").ForwardRefExoticComponent<Omit<CalendarApplyButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Calendar/CalendarApplyButton.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DatePicker } from "@ark-ui/react";
+import { Button } from "../Button/index.js";
+const CalendarApplyButton = /*#__PURE__*/ forwardRef(({ onClick, children = 'Apply', variant = 'primary', color = 'brand', size = 'small', ...props }, ref)=>/*#__PURE__*/ jsx(DatePicker.Context, {
+        children: (api)=>/*#__PURE__*/ jsx(Button, {
+                ref: ref,
+                variant: variant,
+                color: color,
+                size: size,
+                onClick: ()=>{
+                    onClick?.();
+                    api.setOpen(false);
+                },
+                ...props,
+                children: children
+            })
+    }));
+CalendarApplyButton.displayName = 'CalendarApplyButton';
+export { CalendarApplyButton };

package/dist/components/Calendar/CalendarBody.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface CalendarBodyProps {
+    /** Content to render (InputHeader, Grid(s), etc.) */
+    children: ReactNode;
+    /** Additional className for styling */
+    className?: string;
+}
+/**
+ * Container for the main calendar body content.
+ * Wraps InputHeader, Grid(s), and optionally Footer.
+ */
+export declare const CalendarBody: import("react").ForwardRefExoticComponent<CalendarBodyProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Calendar/CalendarBody.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+const CalendarBody = /*#__PURE__*/ forwardRef(({ children, className }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: cn('flex flex-col', className),
+        children: children
+    }));
+CalendarBody.displayName = 'CalendarBody';
+export { CalendarBody };

package/dist/components/Calendar/CalendarContent.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export interface CalendarContentProps {
+    /** Content to render inside the calendar popover */
+    children: ReactNode;
+    /** Additional className for styling */
+    className?: string;
+}
+/**
+ * Content container for the calendar popover.
+ * Renders within a Portal with positioning and animation.
+ */
+export declare const CalendarContent: import("react").ForwardRefExoticComponent<CalendarContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Calendar/CalendarContent.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DatePicker, Portal } from "@ark-ui/react";
+import { cn } from "../../utils/cn.js";
+const CalendarContent = /*#__PURE__*/ forwardRef(({ children, className }, ref)=>/*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx(DatePicker.Positioner, {
+            children: /*#__PURE__*/ jsx(DatePicker.Content, {
+                ref: ref,
+                className: cn('flex bg-bg-surface-1 rounded-12 shadow-lg', 'border border-border-primary-light', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className),
+                children: children
+            })
+        })
+    }));
+CalendarContent.displayName = 'CalendarContent';
+export { CalendarContent };