@rockshin/tao-ui 0.0.1

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,33 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import { type TaoSize } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './checkbox.css';
+export type CheckboxSemanticPart = 'root' | 'indicator' | 'label';
+export interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    children?: ReactNode;
+    classNames?: SemanticClassNames<CheckboxSemanticPart>;
+    styles?: SemanticStyles<CheckboxSemanticPart>;
+}
+export declare function Checkbox({ checked, indeterminate, disabled, onChange, value, children, classNames, styles, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export type CheckboxOptionType = {
+    label: ReactNode;
+    value: string;
+    disabled?: boolean;
+} | string;
+export interface CheckboxGroupProps {
+    options?: CheckboxOptionType[];
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    disabled?: boolean;
+    size?: TaoSize;
+    direction?: 'horizontal' | 'vertical';
+    children?: ReactNode;
+}
+export declare function CheckboxGroup({ options, value, onChange, disabled, direction, children, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,312 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useRef } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./checkbox.css";
+const CheckboxGroupContext = /*#__PURE__*/ createContext(null);
+function Checkbox(t0) {
+    const $ = c(43);
+    const { checked, indeterminate, disabled, onChange, value, children, classNames, styles } = t0;
+    const ctx = useTaoConfig();
+    const groupCtx = useContext(CheckboxGroupContext);
+    const inputRef = useRef(null);
+    const resolvedDisabled = disabled ?? groupCtx?.disabled ?? ctx.disabled ?? false;
+    let t1;
+    if ($[0] !== checked || $[1] !== groupCtx || $[2] !== value) {
+        t1 = groupCtx ? groupCtx.value.includes(value ?? "") : checked;
+        $[0] = checked;
+        $[1] = groupCtx;
+        $[2] = value;
+        $[3] = t1;
+    } else t1 = $[3];
+    const resolvedChecked = t1;
+    let t2;
+    let t3;
+    if ($[4] !== indeterminate) {
+        t2 = ()=>{
+            if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
+        };
+        t3 = [
+            indeterminate
+        ];
+        $[4] = indeterminate;
+        $[5] = t2;
+        $[6] = t3;
+    } else {
+        t2 = $[5];
+        t3 = $[6];
+    }
+    useEffect(t2, t3);
+    let t4;
+    if ($[7] !== groupCtx || $[8] !== onChange || $[9] !== value) {
+        t4 = (e)=>{
+            if (groupCtx && null != value) groupCtx.onChange(value, e.target.checked);
+            else onChange?.(e);
+        };
+        $[7] = groupCtx;
+        $[8] = onChange;
+        $[9] = value;
+        $[10] = t4;
+    } else t4 = $[10];
+    const handleChange = t4;
+    const t5 = resolvedDisabled || void 0;
+    const t6 = classNames?.root;
+    let t7;
+    if ($[11] !== t6) {
+        t7 = cx(t6);
+        $[11] = t6;
+        $[12] = t7;
+    } else t7 = $[12];
+    const t8 = styles?.root;
+    const t9 = indeterminate ? "mixed" : void 0;
+    let t10;
+    if ($[13] !== handleChange || $[14] !== resolvedChecked || $[15] !== resolvedDisabled || $[16] !== t9) {
+        t10 = /*#__PURE__*/ jsx("input", {
+            ref: inputRef,
+            type: "checkbox",
+            checked: resolvedChecked,
+            disabled: resolvedDisabled,
+            onChange: handleChange,
+            "aria-checked": t9,
+            "data-tao-checkbox-input": ""
+        });
+        $[13] = handleChange;
+        $[14] = resolvedChecked;
+        $[15] = resolvedDisabled;
+        $[16] = t9;
+        $[17] = t10;
+    } else t10 = $[17];
+    const t11 = resolvedChecked || void 0;
+    const t12 = indeterminate || void 0;
+    const t13 = classNames?.indicator;
+    let t14;
+    if ($[18] !== t13) {
+        t14 = cx(t13);
+        $[18] = t13;
+        $[19] = t14;
+    } else t14 = $[19];
+    const t15 = styles?.indicator;
+    let t16;
+    if ($[20] !== indeterminate || $[21] !== resolvedChecked) {
+        t16 = resolvedChecked && !indeterminate && /*#__PURE__*/ jsx(CheckIcon, {});
+        $[20] = indeterminate;
+        $[21] = resolvedChecked;
+        $[22] = t16;
+    } else t16 = $[22];
+    let t17;
+    if ($[23] !== indeterminate) {
+        t17 = indeterminate && /*#__PURE__*/ jsx(MinusIcon, {});
+        $[23] = indeterminate;
+        $[24] = t17;
+    } else t17 = $[24];
+    let t18;
+    if ($[25] !== t11 || $[26] !== t12 || $[27] !== t14 || $[28] !== t15 || $[29] !== t16 || $[30] !== t17) {
+        t18 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-checkbox": "",
+            "data-tao-checked": t11,
+            "data-tao-indeterminate": t12,
+            className: t14,
+            style: t15,
+            children: [
+                t16,
+                t17
+            ]
+        });
+        $[25] = t11;
+        $[26] = t12;
+        $[27] = t14;
+        $[28] = t15;
+        $[29] = t16;
+        $[30] = t17;
+        $[31] = t18;
+    } else t18 = $[31];
+    let t19;
+    if ($[32] !== children || $[33] !== classNames?.label || $[34] !== styles?.label) {
+        t19 = null != children && /*#__PURE__*/ jsx("span", {
+            "data-tao-checkbox-label": "",
+            className: cx(classNames?.label),
+            style: styles?.label,
+            children: children
+        });
+        $[32] = children;
+        $[33] = classNames?.label;
+        $[34] = styles?.label;
+        $[35] = t19;
+    } else t19 = $[35];
+    let t20;
+    if ($[36] !== t10 || $[37] !== t18 || $[38] !== t19 || $[39] !== t5 || $[40] !== t7 || $[41] !== t8) {
+        t20 = /*#__PURE__*/ jsxs("label", {
+            "data-tao-checkbox-wrapper": "",
+            "data-tao-disabled": t5,
+            className: t7,
+            style: t8,
+            children: [
+                t10,
+                t18,
+                t19
+            ]
+        });
+        $[36] = t10;
+        $[37] = t18;
+        $[38] = t19;
+        $[39] = t5;
+        $[40] = t7;
+        $[41] = t8;
+        $[42] = t20;
+    } else t20 = $[42];
+    return t20;
+}
+function CheckboxGroup(t0) {
+    const $ = c(26);
+    const { options, value: t1, onChange, disabled, direction: t2, children } = t0;
+    let t3;
+    if ($[0] !== t1) {
+        t3 = void 0 === t1 ? [] : t1;
+        $[0] = t1;
+        $[1] = t3;
+    } else t3 = $[1];
+    const value = t3;
+    const direction = void 0 === t2 ? "horizontal" : t2;
+    const ctx = useTaoConfig();
+    const resolvedDisabled = disabled ?? ctx.disabled ?? false;
+    let t4;
+    if ($[2] !== onChange || $[3] !== value) {
+        t4 = (itemValue, checked)=>{
+            const next = checked ? [
+                ...value,
+                itemValue
+            ] : value.filter((v)=>v !== itemValue);
+            onChange?.(next);
+        };
+        $[2] = onChange;
+        $[3] = value;
+        $[4] = t4;
+    } else t4 = $[4];
+    const handleItemChange = t4;
+    let t5;
+    if ($[5] !== handleItemChange || $[6] !== resolvedDisabled || $[7] !== value) {
+        t5 = {
+            value,
+            disabled: resolvedDisabled,
+            onChange: handleItemChange
+        };
+        $[5] = handleItemChange;
+        $[6] = resolvedDisabled;
+        $[7] = value;
+        $[8] = t5;
+    } else t5 = $[8];
+    const groupCtxValue = t5;
+    let T0;
+    let t6;
+    let t7;
+    let t8;
+    let t9;
+    if ($[9] !== children || $[10] !== direction || $[11] !== groupCtxValue || $[12] !== options) {
+        const normalizedOptions = options?.map(_temp);
+        T0 = CheckboxGroupContext.Provider;
+        t9 = groupCtxValue;
+        t6 = "";
+        t7 = direction;
+        t8 = normalizedOptions ? normalizedOptions.map(_temp2) : children;
+        $[9] = children;
+        $[10] = direction;
+        $[11] = groupCtxValue;
+        $[12] = options;
+        $[13] = T0;
+        $[14] = t6;
+        $[15] = t7;
+        $[16] = t8;
+        $[17] = t9;
+    } else {
+        T0 = $[13];
+        t6 = $[14];
+        t7 = $[15];
+        t8 = $[16];
+        t9 = $[17];
+    }
+    let t10;
+    if ($[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
+        t10 = /*#__PURE__*/ jsx("div", {
+            "data-tao-checkbox-group": t6,
+            "data-tao-direction": t7,
+            children: t8
+        });
+        $[18] = t6;
+        $[19] = t7;
+        $[20] = t8;
+        $[21] = t10;
+    } else t10 = $[21];
+    let t11;
+    if ($[22] !== T0 || $[23] !== t10 || $[24] !== t9) {
+        t11 = /*#__PURE__*/ jsx(T0, {
+            value: t9,
+            children: t10
+        });
+        $[22] = T0;
+        $[23] = t10;
+        $[24] = t9;
+        $[25] = t11;
+    } else t11 = $[25];
+    return t11;
+}
+function _temp2(opt_0) {
+    return /*#__PURE__*/ jsx(Checkbox, {
+        value: opt_0.value,
+        disabled: opt_0.disabled,
+        children: opt_0.label
+    }, opt_0.value);
+}
+function _temp(opt) {
+    return "string" == typeof opt ? {
+        label: opt,
+        value: opt
+    } : opt;
+}
+function CheckIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-checkbox-icon": "",
+            width: "12",
+            height: "12",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("polyline", {
+                points: "20 6 9 17 4 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function MinusIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-checkbox-icon": "",
+            width: "12",
+            height: "12",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            children: /*#__PURE__*/ jsx("line", {
+                x1: "5",
+                y1: "12",
+                x2: "19",
+                y2: "12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { Checkbox, CheckboxGroup };

package/dist/components/date-picker/calendar/calendar-grid.d.ts

@@ -0,0 +1,18 @@
+import type { Dayjs } from 'dayjs';
+interface CalendarGridProps {
+    viewDate: Dayjs;
+    value?: Dayjs | null;
+    /** Range mode: start of confirmed range */
+    rangeStart?: Dayjs | null;
+    /** Range mode: end of confirmed range */
+    rangeEnd?: Dayjs | null;
+    /** Range mode: date currently being hovered */
+    hoverDate?: Dayjs | null;
+    onSelect: (date: Dayjs) => void;
+    onHover?: (date: Dayjs | null) => void;
+    disabledDate?: (date: Dayjs) => boolean;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+}
+export declare function CalendarGrid({ viewDate, value, rangeStart, rangeEnd, hoverDate, onSelect, onHover, disabledDate, minDate, maxDate, }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/date-picker/calendar/calendar-grid.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import dayjs from "dayjs";
+import { getCalendarWeeks } from "./use-calendar.js";
+const WEEKDAYS = [
+    'Mo',
+    'Tu',
+    'We',
+    'Th',
+    'Fr',
+    'Sa',
+    'Su'
+];
+function CalendarGrid(t0) {
+    const $ = c(33);
+    const { viewDate, value, rangeStart, rangeEnd, hoverDate, onSelect, onHover, disabledDate, minDate, maxDate } = t0;
+    let t1;
+    let t2;
+    let t3;
+    let t4;
+    if ($[0] !== disabledDate || $[1] !== hoverDate || $[2] !== maxDate || $[3] !== minDate || $[4] !== onHover || $[5] !== onSelect || $[6] !== rangeEnd || $[7] !== rangeStart || $[8] !== value || $[9] !== viewDate) {
+        const weeks = getCalendarWeeks(viewDate);
+        const today = dayjs();
+        let t5;
+        if ($[14] !== viewDate) {
+            t5 = viewDate.month();
+            $[14] = viewDate;
+            $[15] = t5;
+        } else t5 = $[15];
+        const currentMonth = t5;
+        const isRangeMode = void 0 !== rangeStart;
+        let t6;
+        if ($[16] !== disabledDate || $[17] !== maxDate || $[18] !== minDate) {
+            t6 = (date)=>{
+                if (disabledDate?.(date)) return true;
+                if (minDate && date.isBefore(minDate, "day")) return true;
+                if (maxDate && date.isAfter(maxDate, "day")) return true;
+                return false;
+            };
+            $[16] = disabledDate;
+            $[17] = maxDate;
+            $[18] = minDate;
+            $[19] = t6;
+        } else t6 = $[19];
+        const isDisabled = t6;
+        let t7;
+        if ($[20] !== hoverDate || $[21] !== isRangeMode || $[22] !== rangeEnd || $[23] !== rangeStart) {
+            t7 = ()=>{
+                if (!isRangeMode) return null;
+                const s = rangeStart;
+                const e = rangeEnd ?? hoverDate;
+                if (!s || !e) return null;
+                return s.isBefore(e, "day") ? [
+                    s,
+                    e
+                ] : [
+                    e,
+                    s
+                ];
+            };
+            $[20] = hoverDate;
+            $[21] = isRangeMode;
+            $[22] = rangeEnd;
+            $[23] = rangeStart;
+            $[24] = t7;
+        } else t7 = $[24];
+        const getEffectiveRange = t7;
+        const effectiveRange = getEffectiveRange();
+        const isInRange = (date_0)=>{
+            if (!effectiveRange) return false;
+            return date_0.isAfter(effectiveRange[0], "day") && date_0.isBefore(effectiveRange[1], "day");
+        };
+        const isRangeStart = (date_1)=>{
+            if (!effectiveRange) return false;
+            return date_1.isSame(effectiveRange[0], "day");
+        };
+        const isRangeEnd = (date_2)=>{
+            if (!effectiveRange) return false;
+            return date_2.isSame(effectiveRange[1], "day");
+        };
+        t2 = "";
+        t3 = "grid";
+        if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+            t4 = /*#__PURE__*/ jsx("thead", {
+                children: /*#__PURE__*/ jsx("tr", {
+                    children: WEEKDAYS.map(_temp)
+                })
+            });
+            $[25] = t4;
+        } else t4 = $[25];
+        t1 = weeks.map((week, wi)=>/*#__PURE__*/ jsx("tr", {
+                children: week.map((date_3)=>{
+                    const isOtherMonth = date_3.month() !== currentMonth;
+                    const disabled = isDisabled(date_3);
+                    const isSelected = !isRangeMode && value && date_3.isSame(value, "day");
+                    const isToday = date_3.isSame(today, "day");
+                    const inRange = !isOtherMonth && isInRange(date_3);
+                    const rStart = !isOtherMonth && isRangeStart(date_3);
+                    const rEnd = !isOtherMonth && isRangeEnd(date_3);
+                    return /*#__PURE__*/ jsx("td", {
+                        "data-tao-calendar-cell": "",
+                        "data-tao-selected": isSelected || void 0,
+                        "data-tao-today": isToday || void 0,
+                        "data-tao-other-month": isOtherMonth || void 0,
+                        "data-tao-disabled": disabled || void 0,
+                        "data-tao-in-range": inRange || void 0,
+                        "data-tao-range-start": rStart || void 0,
+                        "data-tao-range-end": rEnd || void 0,
+                        onClick: ()=>{
+                            if (!disabled) onSelect(date_3);
+                        },
+                        onMouseEnter: ()=>onHover?.(date_3),
+                        onMouseLeave: ()=>onHover?.(null),
+                        children: /*#__PURE__*/ jsx("span", {
+                            "data-tao-calendar-cell-inner": "",
+                            children: date_3.date()
+                        })
+                    }, date_3.format("YYYY-MM-DD"));
+                })
+            }, wi));
+        $[0] = disabledDate;
+        $[1] = hoverDate;
+        $[2] = maxDate;
+        $[3] = minDate;
+        $[4] = onHover;
+        $[5] = onSelect;
+        $[6] = rangeEnd;
+        $[7] = rangeStart;
+        $[8] = value;
+        $[9] = viewDate;
+        $[10] = t1;
+        $[11] = t2;
+        $[12] = t3;
+        $[13] = t4;
+    } else {
+        t1 = $[10];
+        t2 = $[11];
+        t3 = $[12];
+        t4 = $[13];
+    }
+    let t5;
+    if ($[26] !== t1) {
+        t5 = /*#__PURE__*/ jsx("tbody", {
+            children: t1
+        });
+        $[26] = t1;
+        $[27] = t5;
+    } else t5 = $[27];
+    let t6;
+    if ($[28] !== t2 || $[29] !== t3 || $[30] !== t4 || $[31] !== t5) {
+        t6 = /*#__PURE__*/ jsxs("table", {
+            "data-tao-calendar-grid": t2,
+            role: t3,
+            children: [
+                t4,
+                t5
+            ]
+        });
+        $[28] = t2;
+        $[29] = t3;
+        $[30] = t4;
+        $[31] = t5;
+        $[32] = t6;
+    } else t6 = $[32];
+    return t6;
+}
+function _temp(d) {
+    return /*#__PURE__*/ jsx("th", {
+        "data-tao-calendar-weekday": "",
+        children: d
+    }, d);
+}
+export { CalendarGrid };

package/dist/components/date-picker/calendar/calendar-header.d.ts

@@ -0,0 +1,10 @@
+import type { Dayjs } from 'dayjs';
+import type { PanelMode } from '../types';
+interface CalendarHeaderProps {
+    viewDate: Dayjs;
+    panelMode: PanelMode;
+    onViewDateChange: (date: Dayjs) => void;
+    onPanelModeChange: (mode: PanelMode) => void;
+}
+export declare function CalendarHeader({ viewDate, panelMode, onViewDateChange, onPanelModeChange, }: CalendarHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};