@rockshin/tao-ui 0.0.1

package/dist/components/date-picker/presets.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+function Presets(t0) {
+    const $ = c(7);
+    const { items, onSelect } = t0;
+    if (!items.length) return null;
+    let t1;
+    if ($[0] !== items || $[1] !== onSelect) {
+        let t2;
+        if ($[3] !== onSelect) {
+            t2 = (item)=>/*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "data-tao-preset-btn": "",
+                    onClick: ()=>onSelect(item.value),
+                    children: item.label
+                }, item.label);
+            $[3] = onSelect;
+            $[4] = t2;
+        } else t2 = $[4];
+        t1 = items.map(t2);
+        $[0] = items;
+        $[1] = onSelect;
+        $[2] = t1;
+    } else t1 = $[2];
+    let t2;
+    if ($[5] !== t1) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            "data-tao-picker-presets": "",
+            children: t1
+        });
+        $[5] = t1;
+        $[6] = t2;
+    } else t2 = $[6];
+    return t2;
+}
+export { Presets };

package/dist/components/date-picker/range-picker.d.ts

@@ -0,0 +1,30 @@
+import type { Dayjs } from 'dayjs';
+import { type ReactNode } from 'react';
+import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
+import './date-picker.css';
+import { type RangePresetItem } from './types';
+type RangeValue = [Dayjs | null, Dayjs | null] | null;
+export interface RangePickerProps {
+    value?: RangeValue;
+    defaultValue?: [Dayjs | null, Dayjs | null];
+    onChange?: (dates: RangeValue, dateStrings: [string, string]) => void;
+    picker?: 'date' | 'month' | 'year';
+    showTime?: boolean;
+    format?: string;
+    disabledDate?: (date: Dayjs) => boolean;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    presets?: RangePresetItem[];
+    placeholder?: [string, string];
+    separator?: ReactNode;
+    size?: TaoSize;
+    variant?: TaoVariant;
+    disabled?: boolean | [boolean, boolean];
+    allowClear?: boolean;
+    status?: 'error' | 'warning';
+    mobile?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function RangePicker({ value, onChange, picker, showTime, format: formatProp, disabledDate, minDate, maxDate, presets, placeholder, separator, size, variant, disabled, allowClear, status, mobile, open: controlledOpen, onOpenChange, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/date-picker/range-picker.js

@@ -0,0 +1,432 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import dayjs from "dayjs";
+import { useCallback, useState } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { Drawer } from "../drawer/drawer.js";
+import { useIsMobile } from "../select/use-is-mobile.js";
+import { CalendarGrid } from "./calendar/calendar-grid.js";
+import "./date-picker.css";
+import { Presets } from "./presets.js";
+import { getDefaultFormat } from "./types.js";
+import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
+function RangePicker({ value, onChange, picker = 'date', showTime, format: formatProp, disabledDate, minDate, maxDate, presets, placeholder = [
+    'Start date',
+    'End date'
+], separator = '~', size, variant, disabled, allowClear = true, status, mobile, open: controlledOpen, onOpenChange }) {
+    const ctx = useTaoConfig();
+    const resolvedSize = size ?? ctx.size;
+    const resolvedVariant = variant ?? ctx.variant;
+    const isDisabled = 'boolean' == typeof disabled ? disabled : disabled?.[0] && disabled?.[1];
+    const resolvedDisabled = isDisabled ?? ctx.disabled;
+    const autoMobile = useIsMobile();
+    const isMobile = mobile ?? autoMobile;
+    const fmt = formatProp ?? getDefaultFormat(picker, showTime);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [hovering, setHovering] = useState(false);
+    const isOpen = controlledOpen ?? internalOpen;
+    const setOpen = useCallback((v)=>{
+        setInternalOpen(v);
+        onOpenChange?.(v);
+    }, [
+        onOpenChange
+    ]);
+    const [viewDateStart, setViewDateStart] = useState(()=>value?.[0] ?? dayjs());
+    const viewDateEnd = viewDateStart.add(1, 'month');
+    const [selecting, setSelecting] = useState('start');
+    const [hoverDate, setHoverDate] = useState(null);
+    const [pendingStart, setPendingStart] = useState(null);
+    const rangeStart = pendingStart ?? value?.[0] ?? null;
+    const rangeEnd = pendingStart ? null : value?.[1] ?? null;
+    const handleDateSelect = useCallback((date)=>{
+        if ('start' === selecting) {
+            setPendingStart(date);
+            setSelecting('end');
+        } else {
+            let start = pendingStart ?? rangeStart;
+            let end = date;
+            if (start && date.isBefore(start)) [start, end] = [
+                date,
+                start
+            ];
+            onChange?.([
+                start,
+                end
+            ], [
+                start?.format(fmt) ?? '',
+                end.format(fmt)
+            ]);
+            setPendingStart(null);
+            setSelecting('start');
+            setHoverDate(null);
+            if (!showTime) setOpen(false);
+        }
+    }, [
+        selecting,
+        pendingStart,
+        rangeStart,
+        onChange,
+        fmt,
+        showTime,
+        setOpen
+    ]);
+    const handleClear = useCallback((e)=>{
+        e.stopPropagation();
+        onChange?.(null, [
+            '',
+            ''
+        ]);
+    }, [
+        onChange
+    ]);
+    const handlePresetSelect = useCallback((val)=>{
+        const [s, e_0] = val;
+        onChange?.([
+            s,
+            e_0
+        ], [
+            s.format(fmt),
+            e_0.format(fmt)
+        ]);
+        setOpen(false);
+    }, [
+        onChange,
+        fmt,
+        setOpen
+    ]);
+    const displayStart = rangeStart ? rangeStart.format(fmt) : '';
+    const displayEnd = rangeEnd ? rangeEnd.format(fmt) : '';
+    const showClearBtn = allowClear && (rangeStart || rangeEnd) && !resolvedDisabled;
+    const panelContent = /*#__PURE__*/ jsxs("div", {
+        "data-tao-range-panel": "",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                "data-tao-range-header": "",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-tao-calendar-nav": "",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "data-tao-calendar-nav-btn": "",
+                                onClick: ()=>setViewDateStart(viewDateStart.subtract(1, 'year')),
+                                "aria-label": "Previous year",
+                                children: /*#__PURE__*/ jsx(DoubleLeftIcon, {})
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "data-tao-calendar-nav-btn": "",
+                                onClick: ()=>setViewDateStart(viewDateStart.subtract(1, 'month')),
+                                "aria-label": "Previous month",
+                                children: /*#__PURE__*/ jsx(LeftIcon, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-tao-range-titles": "",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                "data-tao-range-title": "",
+                                children: viewDateStart.format('MMM YYYY')
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                "data-tao-range-title": "",
+                                children: viewDateEnd.format('MMM YYYY')
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-tao-calendar-nav": "",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "data-tao-calendar-nav-btn": "",
+                                onClick: ()=>setViewDateStart(viewDateStart.add(1, 'month')),
+                                "aria-label": "Next month",
+                                children: /*#__PURE__*/ jsx(RightIcon, {})
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "data-tao-calendar-nav-btn": "",
+                                onClick: ()=>setViewDateStart(viewDateStart.add(1, 'year')),
+                                "aria-label": "Next year",
+                                children: /*#__PURE__*/ jsx(DoubleRightIcon, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                "data-tao-range-panels": "",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        "data-tao-picker-panel": "",
+                        children: /*#__PURE__*/ jsx("div", {
+                            "data-tao-picker-body": "",
+                            children: /*#__PURE__*/ jsx(CalendarGrid, {
+                                viewDate: viewDateStart,
+                                rangeStart: rangeStart,
+                                rangeEnd: rangeEnd,
+                                hoverDate: hoverDate,
+                                onSelect: handleDateSelect,
+                                onHover: setHoverDate,
+                                disabledDate: disabledDate,
+                                minDate: minDate,
+                                maxDate: maxDate
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        "data-tao-picker-panel": "",
+                        children: /*#__PURE__*/ jsx("div", {
+                            "data-tao-picker-body": "",
+                            children: /*#__PURE__*/ jsx(CalendarGrid, {
+                                viewDate: viewDateEnd,
+                                rangeStart: rangeStart,
+                                rangeEnd: rangeEnd,
+                                hoverDate: hoverDate,
+                                onSelect: handleDateSelect,
+                                onHover: setHoverDate,
+                                disabledDate: disabledDate,
+                                minDate: minDate,
+                                maxDate: maxDate
+                            })
+                        })
+                    })
+                ]
+            }),
+            presets && presets.length > 0 && /*#__PURE__*/ jsx(Presets, {
+                items: presets,
+                onSelect: handlePresetSelect
+            })
+        ]
+    });
+    const trigger = /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        "data-tao-control": "",
+        "data-tao-range-trigger": "",
+        "data-tao-size": resolvedSize,
+        "data-tao-variant": resolvedVariant,
+        "data-tao-error": 'error' === status || void 0,
+        disabled: resolvedDisabled,
+        onClick: isMobile ? ()=>setOpen(true) : void 0,
+        onMouseEnter: ()=>setHovering(true),
+        onMouseLeave: ()=>setHovering(false),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-tao-range-input": "",
+                "data-tao-active": 'start' === selecting && isOpen || void 0,
+                children: displayStart || /*#__PURE__*/ jsx("span", {
+                    "data-tao-picker-placeholder": "",
+                    children: placeholder[0]
+                })
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "data-tao-range-separator": "",
+                children: separator
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "data-tao-range-input": "",
+                "data-tao-active": 'end' === selecting && isOpen || void 0,
+                children: displayEnd || /*#__PURE__*/ jsx("span", {
+                    "data-tao-picker-placeholder": "",
+                    children: placeholder[1]
+                })
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "data-tao-picker-icons": "",
+                children: showClearBtn && hovering ? /*#__PURE__*/ jsx("span", {
+                    "data-tao-picker-clear": "",
+                    onClick: handleClear,
+                    role: "button",
+                    "aria-label": "Clear",
+                    children: /*#__PURE__*/ jsx(CloseIcon, {})
+                }) : /*#__PURE__*/ jsx("span", {
+                    "data-tao-picker-suffix": "",
+                    children: /*#__PURE__*/ jsx(CalendarIcon, {})
+                })
+            })
+        ]
+    });
+    if (isMobile) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            trigger,
+            /*#__PURE__*/ jsx(Drawer, {
+                open: isOpen,
+                onClose: ()=>setOpen(false),
+                placement: "bottom",
+                title: "Select date range",
+                height: "85vh",
+                children: panelContent
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_popover_e2827c9f.Root, {
+        open: isOpen,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Trigger, {
+                asChild: true,
+                children: trigger
+            }),
+            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Portal, {
+                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+                    "data-tao-picker-dropdown": "",
+                    sideOffset: 4,
+                    align: "start",
+                    onOpenAutoFocus: (e_1)=>e_1.preventDefault(),
+                    children: panelContent
+                })
+            })
+        ]
+    });
+}
+function CalendarIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsxs("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "M8 2v4M16 2v4"
+                }),
+                /*#__PURE__*/ jsx("rect", {
+                    width: "18",
+                    height: "18",
+                    x: "3",
+                    y: "4",
+                    rx: "2"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M3 10h18"
+                })
+            ]
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function CloseIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M18 6 6 18M6 6l12 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function LeftIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "m15 18-6-6 6-6"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function RightIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "m9 18 6-6-6-6"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function DoubleLeftIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsxs("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "m11 17-5-5 5-5"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "m18 17-5-5 5-5"
+                })
+            ]
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function DoubleRightIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsxs("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "m6 17 5-5-5-5"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "m13 17 5-5-5-5"
+                })
+            ]
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { RangePicker };

package/dist/components/date-picker/types.d.ts

@@ -0,0 +1,39 @@
+import type { Dayjs } from 'dayjs';
+import type { ReactNode } from 'react';
+import type { TaoSize, TaoVariant } from '../../provider/tao-provider';
+export type PickerMode = 'date' | 'month' | 'year';
+export type PanelMode = 'date' | 'month' | 'year' | 'decade';
+export interface TimeConfig {
+    format?: string;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+}
+export interface PresetItem {
+    label: string;
+    value: Dayjs;
+}
+export interface RangePresetItem {
+    label: string;
+    value: [Dayjs, Dayjs];
+}
+export interface SharedPickerProps {
+    picker?: PickerMode;
+    showTime?: boolean | TimeConfig;
+    format?: string;
+    disabledDate?: (date: Dayjs) => boolean;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    placeholder?: string;
+    size?: TaoSize;
+    variant?: TaoVariant;
+    disabled?: boolean;
+    allowClear?: boolean;
+    prefix?: ReactNode;
+    suffixIcon?: ReactNode;
+    status?: 'error' | 'warning';
+    mobile?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function getDefaultFormat(picker: PickerMode, showTime?: boolean | TimeConfig): string;

package/dist/components/date-picker/types.js

@@ -0,0 +1,7 @@
+function getDefaultFormat(picker, showTime) {
+    if ('year' === picker) return 'YYYY';
+    if ('month' === picker) return 'YYYY-MM';
+    if (showTime) return 'YYYY-MM-DD HH:mm:ss';
+    return 'YYYY-MM-DD';
+}
+export { getDefaultFormat };