@ifhover/leaf-ui 0.0.0-stage → 0.5.0

package/dist/esm/timepicker/time-panel.d.ts

@@ -0,0 +1,14 @@
+import { type TimeParts } from '../shared/time.js';
+interface TimePanelProps {
+    value: TimeParts;
+    onChange: (value: TimeParts) => void;
+    showSeconds?: boolean;
+    use12Hours?: boolean;
+    minuteStep?: number;
+    secondStep?: number;
+    autoFocus?: boolean;
+    disabledTime?: (parts: TimeParts) => boolean;
+}
+export declare function TimePanel({ value, onChange, showSeconds, use12Hours, minuteStep, secondStep, autoFocus, disabledTime, }: TimePanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=time-panel.d.ts.map

package/dist/esm/timepicker/time-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-panel.d.ts","sourceRoot":"","sources":["../../../src/timepicker/time-panel.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEzD,UAAU,cAAc;IACtB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;CAC9C;AA2GD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,UAAc,EACd,UAAc,EACd,SAAS,EACT,YAAY,GACb,EAAE,cAAc,+BAoFhB"}

package/dist/esm/timepicker/time-panel.js

@@ -0,0 +1,184 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useLeafConfig } from "../config-provider/context.js";
+import { padTime } from "../shared/time.js";
+const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+function keepTimeOptionVisible(column, row) {
+    const top = row.offsetTop;
+    const bottom = top + row.offsetHeight;
+    if (top < column.scrollTop) column.scrollTop = top;
+    else if (bottom > column.scrollTop + column.clientHeight) column.scrollTop = bottom - column.clientHeight;
+}
+function TimeColumn({ label, choices, selected, change, labels, disabled }) {
+    const ref = useRef(null);
+    const [selection, setSelection] = useState();
+    useBrowserLayoutEffect(()=>{
+        const column = ref.current;
+        if (!column) return;
+        const row = column.querySelector('[aria-selected="true"]:not(:disabled)');
+        const update = ()=>{
+            setSelection(row ? {
+                '--leaf-time-selection-y': `${row.offsetTop}px`,
+                '--leaf-time-selection-height': `${row.offsetHeight}px`
+            } : void 0);
+            if (row) keepTimeOptionVisible(column, row);
+        };
+        update();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(update);
+        observer.observe(column);
+        if (row) observer.observe(row);
+        return ()=>observer.disconnect();
+    }, [
+        selected,
+        choices,
+        disabled
+    ]);
+    const key = (event, current)=>{
+        const available = choices.filter((choice)=>!disabled?.(choice));
+        if (!available.length) return;
+        const index = available.indexOf(current);
+        let next = index;
+        if ('ArrowDown' === event.key) next = (index + 1) % available.length;
+        else if ('ArrowUp' === event.key) next = (index - 1 + available.length) % available.length;
+        else if ('Home' === event.key) next = 0;
+        else {
+            if ('End' !== event.key) return;
+            next = available.length - 1;
+        }
+        event.preventDefault();
+        change(available[next] ?? current);
+        const node = event.currentTarget.parentElement?.querySelectorAll('button:not(:disabled)')[next];
+        node?.focus({
+            preventScroll: true
+        });
+        if (node && ref.current) keepTimeOptionVisible(ref.current, node);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "leaf-time-picker__column-wrap",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "leaf-time-picker__column-label",
+                "aria-hidden": "true",
+                children: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: ref,
+                className: "leaf-time-picker__column",
+                role: "listbox",
+                "aria-label": label,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "leaf-time-picker__selection",
+                        "data-ready": Boolean(selection),
+                        "aria-hidden": "true",
+                        style: selection
+                    }),
+                    choices.map((option)=>/*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            role: "option",
+                            disabled: disabled?.(option),
+                            tabIndex: option === (disabled?.(selected) ? choices.find((choice)=>!disabled?.(choice)) : selected) ? 0 : -1,
+                            "aria-selected": option === selected,
+                            className: "leaf-floating__option",
+                            onClick: ()=>change(option),
+                            onKeyDown: (event)=>key(event, option),
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: labels?.[option] ?? padTime(option)
+                                }),
+                                /*#__PURE__*/ jsx(Check, {
+                                    size: 14,
+                                    "aria-hidden": "true",
+                                    className: "leaf-time-picker__check",
+                                    style: {
+                                        opacity: option === selected ? 1 : 0
+                                    }
+                                })
+                            ]
+                        }, option))
+                ]
+            })
+        ]
+    });
+}
+function TimePanel({ value, onChange, showSeconds, use12Hours, minuteStep = 5, secondStep = 1, autoFocus, disabledTime }) {
+    const { messages } = useLeafConfig();
+    const ref = useRef(null);
+    useEffect(()=>{
+        if (autoFocus) ref.current?.querySelector('[aria-selected="true"]')?.focus({
+            preventScroll: true
+        });
+    }, [
+        autoFocus
+    ]);
+    const options = (step, selected)=>{
+        const safe = Number.isFinite(step) ? Math.max(1, Math.min(60, Math.floor(step))) : 1;
+        return [
+            ...new Set([
+                ...Array.from({
+                    length: Math.ceil(60 / safe)
+                }, (_, i)=>i * safe),
+                selected
+            ])
+        ].sort((a, b)=>a - b);
+    };
+    const column = (label, choices, selected, change, labels, disabled)=>/*#__PURE__*/ jsx(TimeColumn, {
+            label: label,
+            choices: choices,
+            selected: selected,
+            change: change,
+            labels: labels,
+            disabled: disabled
+        }, label);
+    const hours = use12Hours ? Array.from({
+        length: 12
+    }, (_, i)=>i + 1) : Array.from({
+        length: 24
+    }, (_, i)=>i);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: "leaf-time-picker__columns",
+        children: [
+            column(messages.hours, hours, use12Hours ? value.hour % 12 || 12 : value.hour, (hour)=>onChange({
+                    ...value,
+                    hour: use12Hours ? hour % 12 + (value.hour < 12 ? 0 : 12) : hour
+                }), void 0, (hour)=>!!disabledTime?.({
+                    ...value,
+                    hour: use12Hours ? hour % 12 + (value.hour < 12 ? 0 : 12) : hour
+                })),
+            column(messages.minutes, options(minuteStep, value.minute), value.minute, (minute)=>onChange({
+                    ...value,
+                    minute
+                }), void 0, (minute)=>!!disabledTime?.({
+                    ...value,
+                    minute
+                })),
+            showSeconds && column(messages.seconds, options(secondStep, value.second), value.second, (second)=>onChange({
+                    ...value,
+                    second
+                }), void 0, (second)=>!!disabledTime?.({
+                    ...value,
+                    second
+                })),
+            use12Hours && column(messages.period, [
+                0,
+                1
+            ], value.hour < 12 ? 0 : 1, (period)=>onChange({
+                    ...value,
+                    hour: value.hour % 12 + 12 * period
+                }), [
+                messages.am,
+                messages.pm
+            ], (period)=>!!disabledTime?.({
+                    ...value,
+                    hour: value.hour % 12 + 12 * period
+                }))
+        ]
+    });
+}
+export { TimePanel };
+
+//# sourceMappingURL=time-panel.js.map

package/dist/esm/timepicker/time-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timepicker/time-panel.js","sources":["../../../src/timepicker/time-panel.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type KeyboardEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { padTime, type TimeParts } from '../shared/time';\n\ninterface TimePanelProps {\n  value: TimeParts;\n  onChange: (value: TimeParts) => void;\n  showSeconds?: boolean;\n  use12Hours?: boolean;\n  minuteStep?: number;\n  secondStep?: number;\n  autoFocus?: boolean;\n  disabledTime?: (parts: TimeParts) => boolean;\n}\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\ninterface TimeColumnProps {\n  label: string;\n  choices: number[];\n  selected: number;\n  change: (next: number) => void;\n  labels?: string[];\n  disabled?: (choice: number) => boolean;\n}\nfunction keepTimeOptionVisible(column: HTMLElement, row: HTMLElement) {\n  const top = row.offsetTop;\n  const bottom = top + row.offsetHeight;\n  if (top < column.scrollTop) column.scrollTop = top;\n  else if (bottom > column.scrollTop + column.clientHeight)\n    column.scrollTop = bottom - column.clientHeight;\n}\n\nfunction TimeColumn({ label, choices, selected, change, labels, disabled }: TimeColumnProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [selection, setSelection] = useState<CSSProperties>();\n  useBrowserLayoutEffect(() => {\n    const column = ref.current;\n    if (!column) return;\n    const row = column.querySelector<HTMLButtonElement>('[aria-selected=\"true\"]:not(:disabled)');\n    const update = () => {\n      setSelection(\n        row\n          ? ({\n              '--leaf-time-selection-y': `${row.offsetTop}px`,\n              '--leaf-time-selection-height': `${row.offsetHeight}px`,\n            } as CSSProperties)\n          : undefined,\n      );\n      // Scrolling a row into every ancestor moves the whole range popup and can\n      // hide its endpoint labels when both time panels are present.\n      if (row) keepTimeOptionVisible(column, row);\n    };\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(update);\n    observer.observe(column);\n    if (row) observer.observe(row);\n    return () => observer.disconnect();\n  }, [selected, choices, disabled]);\n  const key = (event: KeyboardEvent<HTMLButtonElement>, current: number) => {\n    const available = choices.filter((choice) => !disabled?.(choice));\n    if (!available.length) return;\n    const index = available.indexOf(current);\n    let next = index;\n    if (event.key === 'ArrowDown') next = (index + 1) % available.length;\n    else if (event.key === 'ArrowUp') next = (index - 1 + available.length) % available.length;\n    else if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = available.length - 1;\n    else return;\n    event.preventDefault();\n    change(available[next] ?? current);\n    const node =\n      event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\n        'button:not(:disabled)',\n      )[next];\n    node?.focus({ preventScroll: true });\n    if (node && ref.current) keepTimeOptionVisible(ref.current, node);\n  };\n  return (\n    <div className=\"leaf-time-picker__column-wrap\">\n      <div className=\"leaf-time-picker__column-label\" aria-hidden=\"true\">\n        {label}\n      </div>\n      <div ref={ref} className=\"leaf-time-picker__column\" role=\"listbox\" aria-label={label}>\n        <div\n          className=\"leaf-time-picker__selection\"\n          data-ready={Boolean(selection)}\n          aria-hidden=\"true\"\n          style={selection}\n        />\n        {choices.map((option) => (\n          <button\n            type=\"button\"\n            key={option}\n            role=\"option\"\n            disabled={disabled?.(option)}\n            tabIndex={\n              option ===\n              (disabled?.(selected) ? choices.find((choice) => !disabled?.(choice)) : selected)\n                ? 0\n                : -1\n            }\n            aria-selected={option === selected}\n            className=\"leaf-floating__option\"\n            onClick={() => change(option)}\n            onKeyDown={(event) => key(event, option)}\n          >\n            <span>{labels?.[option] ?? padTime(option)}</span>\n            <Check\n              size={14}\n              aria-hidden=\"true\"\n              className=\"leaf-time-picker__check\"\n              style={{ opacity: option === selected ? 1 : 0 }}\n            />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\nexport function TimePanel({\n  value,\n  onChange,\n  showSeconds,\n  use12Hours,\n  minuteStep = 5,\n  secondStep = 1,\n  autoFocus,\n  disabledTime,\n}: TimePanelProps) {\n  const { messages } = useLeafConfig();\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (autoFocus)\n      ref.current\n        ?.querySelector<HTMLButtonElement>('[aria-selected=\"true\"]')\n        ?.focus({ preventScroll: true });\n  }, [autoFocus]);\n  const options = (step: number, selected: number) => {\n    const safe = Number.isFinite(step) ? Math.max(1, Math.min(60, Math.floor(step))) : 1;\n    return [\n      ...new Set([...Array.from({ length: Math.ceil(60 / safe) }, (_, i) => i * safe), selected]),\n    ].sort((a, b) => a - b);\n  };\n  const column = (\n    label: string,\n    choices: number[],\n    selected: number,\n    change: (next: number) => void,\n    labels?: string[],\n    disabled?: (choice: number) => boolean,\n  ) => {\n    return (\n      <TimeColumn\n        key={label}\n        label={label}\n        choices={choices}\n        selected={selected}\n        change={change}\n        labels={labels}\n        disabled={disabled}\n      />\n    );\n  };\n  const hours = use12Hours\n    ? Array.from({ length: 12 }, (_, i) => i + 1)\n    : Array.from({ length: 24 }, (_, i) => i);\n  return (\n    <div ref={ref} className=\"leaf-time-picker__columns\">\n      {column(\n        messages.hours,\n        hours,\n        use12Hours ? value.hour % 12 || 12 : value.hour,\n        (hour) =>\n          onChange({\n            ...value,\n            hour: use12Hours ? (hour % 12) + (value.hour < 12 ? 0 : 12) : hour,\n          }),\n        undefined,\n        (hour) =>\n          !!disabledTime?.({\n            ...value,\n            hour: use12Hours ? (hour % 12) + (value.hour < 12 ? 0 : 12) : hour,\n          }),\n      )}\n      {column(\n        messages.minutes,\n        options(minuteStep, value.minute),\n        value.minute,\n        (minute) => onChange({ ...value, minute }),\n        undefined,\n        (minute) => !!disabledTime?.({ ...value, minute }),\n      )}\n      {showSeconds &&\n        column(\n          messages.seconds,\n          options(secondStep, value.second),\n          value.second,\n          (second) => onChange({ ...value, second }),\n          undefined,\n          (second) => !!disabledTime?.({ ...value, second }),\n        )}\n      {use12Hours &&\n        column(\n          messages.period,\n          [0, 1],\n          value.hour < 12 ? 0 : 1,\n          (period) => onChange({ ...value, hour: (value.hour % 12) + period * 12 }),\n          [messages.am, messages.pm],\n          (period) => !!disabledTime?.({ ...value, hour: (value.hour % 12) + period * 12 }),\n        )}\n    </div>\n  );\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","keepTimeOptionVisible","column","row","top","bottom","TimeColumn","label","choices","selected","change","labels","disabled","ref","useRef","selection","setSelection","useState","update","undefined","ResizeObserver","observer","key","event","current","available","choice","index","next","node","Boolean","option","padTime","Check","TimePanel","value","onChange","showSeconds","use12Hours","minuteStep","secondStep","autoFocus","disabledTime","messages","useLeafConfig","options","step","safe","Number","Math","Set","Array","_","i","a","b","hours","hour","minute","second","period"],"mappings":"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"}

package/dist/esm/timepicker/timepicker.d.ts

@@ -0,0 +1,15 @@
+import { type PickerFieldProps } from '../shared/date-input.js';
+import { type TimeParts } from '../shared/time.js';
+export interface TimePickerProps extends PickerFieldProps {
+    value?: string | null;
+    defaultValue?: string | null;
+    minuteStep?: number;
+    secondStep?: number;
+    showSeconds?: boolean;
+    use12Hours?: boolean;
+    onChange?: (value: string | null) => void;
+    onOpenChange?: (open: boolean) => void;
+    disabledTime?: (parts: TimeParts) => boolean;
+}
+export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=timepicker.d.ts.map

package/dist/esm/timepicker/timepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timepicker.d.ts","sourceRoot":"","sources":["../../../src/timepicker/timepicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxE,OAAO,EAA0B,KAAK,SAAS,EAAc,MAAM,gBAAgB,CAAC;AAGpF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;CAC9C;AACD,eAAO,MAAM,UAAU,8GA0HrB,CAAC"}

package/dist/esm/timepicker/timepicker.js

@@ -0,0 +1,130 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Clock3 } from "lucide-react";
+import { forwardRef, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { useFormField } from "../form/form.js";
+import { DateInput } from "../shared/date-input.js";
+import { useFieldValue, useMergedRef } from "../shared/field.js";
+import { usePopupState } from "../shared/floating.js";
+import { displayTime, parseTime, timeString } from "../shared/time.js";
+import { TimePanel } from "./time-panel.js";
+const timepicker_TimePicker = /*#__PURE__*/ forwardRef(function({ value, defaultValue = null, minuteStep = 5, secondStep = 1, showSeconds = false, use12Hours = false, onChange, onOpenChange, disabledTime, open: controlledOpen, defaultOpen, ...props }, ref) {
+    const { messages } = useLeafConfig();
+    const field = useFormField();
+    const trigger = useRef(null);
+    const merged = useMergedRef(trigger, ref);
+    const [selected, setSelected] = useFieldValue(value, defaultValue, trigger, props.form);
+    const [draft, setDraft] = useState(parseTime(selected) ?? {
+        hour: 9,
+        minute: 0,
+        second: 0
+    });
+    const [validText, setValidText] = useState(true);
+    const [open, setOpen] = usePopupState(props.disabled || field?.disabled || props.readOnly, onOpenChange, controlledOpen, defaultOpen);
+    const change = (parts)=>{
+        if (props.readOnly || props.disabled || field?.disabled || parts && disabledTime?.(parts)) return;
+        const next = parts ? timeString(parts, showSeconds) : null;
+        setSelected(next);
+        onChange?.(next);
+    };
+    const formatted = (parts)=>displayTime(parts, showSeconds, use12Hours, [
+            messages.am,
+            messages.pm
+        ]);
+    const parsed = parseTime(selected);
+    return /*#__PURE__*/ jsx(DateInput, {
+        ...props,
+        ref: merged,
+        className: [
+            'leaf-time-picker',
+            props.className
+        ].filter(Boolean).join(' '),
+        placeholder: props.placeholder ?? messages.time,
+        icon: /*#__PURE__*/ jsx(Clock3, {
+            size: 16,
+            "aria-hidden": "true"
+        }),
+        panelLabel: messages.chooseTime,
+        clearLabel: messages.clearTime,
+        commitOnBlur: false,
+        displayValue: parsed ? formatted(parsed) : '',
+        formValue: parsed ? timeString(parsed, showSeconds) : '',
+        open: open,
+        onOpenChange: setOpen,
+        onOpening: ()=>{
+            setDraft(parseTime(selected) ?? {
+                hour: 9,
+                minute: 0,
+                second: 0
+            });
+            setValidText(true);
+        },
+        onClear: ()=>change(null),
+        onTextChange: (text)=>{
+            const next = parseTime(text.trim());
+            setValidText(Boolean(next));
+            if (next) setDraft(next);
+        },
+        onTextCommit: (text)=>{
+            if (!text) {
+                change(null);
+                return true;
+            }
+            const next = parseTime(text);
+            if (!next || disabledTime?.(next)) return false;
+            change(next);
+            return true;
+        },
+        panelClassName: "leaf-time-picker__panel",
+        renderPanel: (close)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(TimePanel, {
+                        disabledTime: disabledTime,
+                        value: draft,
+                        onChange: (next)=>{
+                            setDraft(next);
+                            setValidText(true);
+                        },
+                        minuteStep: minuteStep,
+                        secondStep: secondStep,
+                        showSeconds: showSeconds,
+                        use12Hours: use12Hours
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-picker-footer",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: ()=>{
+                                    const now = new Date();
+                                    setDraft({
+                                        hour: now.getHours(),
+                                        minute: now.getMinutes(),
+                                        second: now.getSeconds()
+                                    });
+                                    setValidText(true);
+                                },
+                                children: messages.now
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "sm",
+                                disabled: !validText || disabledTime?.(draft),
+                                onClick: ()=>{
+                                    change(draft);
+                                    close();
+                                },
+                                children: messages.confirm
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+});
+timepicker_TimePicker.displayName = 'TimePicker';
+export { timepicker_TimePicker as TimePicker };
+
+//# sourceMappingURL=timepicker.js.map

package/dist/esm/timepicker/timepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timepicker/timepicker.js","sources":["../../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { Clock3 } from 'lucide-react';\nimport { forwardRef, useRef, useState } from 'react';\nimport { Button } from '../button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { DateInput, type PickerFieldProps } from '../shared/date-input';\nimport { useFieldValue, useMergedRef } from '../shared/field';\nimport { usePopupState } from '../shared/floating';\nimport { displayTime, parseTime, type TimeParts, timeString } from '../shared/time';\nimport { TimePanel } from './time-panel';\n\nexport interface TimePickerProps extends PickerFieldProps {\n  value?: string | null;\n  defaultValue?: string | null;\n  minuteStep?: number;\n  secondStep?: number;\n  showSeconds?: boolean;\n  use12Hours?: boolean;\n  onChange?: (value: string | null) => void;\n  onOpenChange?: (open: boolean) => void;\n  disabledTime?: (parts: TimeParts) => boolean;\n}\nexport const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(\n  {\n    value,\n    defaultValue = null,\n    minuteStep = 5,\n    secondStep = 1,\n    showSeconds = false,\n    use12Hours = false,\n    onChange,\n    onOpenChange,\n    disabledTime,\n    open: controlledOpen,\n    defaultOpen,\n    ...props\n  },\n  ref,\n) {\n  const { messages } = useLeafConfig();\n  const field = useFormField();\n  const trigger = useRef<HTMLInputElement>(null);\n  const merged = useMergedRef(trigger, ref);\n  const [selected, setSelected] = useFieldValue(value, defaultValue, trigger, props.form);\n  const [draft, setDraft] = useState<TimeParts>(\n    parseTime(selected) ?? { hour: 9, minute: 0, second: 0 },\n  );\n  const [validText, setValidText] = useState(true);\n  const [open, setOpen] = usePopupState(\n    props.disabled || field?.disabled || props.readOnly,\n    onOpenChange,\n    controlledOpen,\n    defaultOpen,\n  );\n  const change = (parts: TimeParts | null) => {\n    if (props.readOnly || props.disabled || field?.disabled || (parts && disabledTime?.(parts)))\n      return;\n    const next = parts ? timeString(parts, showSeconds) : null;\n    setSelected(next);\n    onChange?.(next);\n  };\n  const formatted = (parts: TimeParts) =>\n    displayTime(parts, showSeconds, use12Hours, [messages.am, messages.pm]);\n  const parsed = parseTime(selected);\n  return (\n    <DateInput\n      {...props}\n      ref={merged}\n      className={['leaf-time-picker', props.className].filter(Boolean).join(' ')}\n      placeholder={props.placeholder ?? messages.time}\n      icon={<Clock3 size={16} aria-hidden=\"true\" />}\n      panelLabel={messages.chooseTime}\n      clearLabel={messages.clearTime}\n      commitOnBlur={false}\n      displayValue={parsed ? formatted(parsed) : ''}\n      formValue={parsed ? timeString(parsed, showSeconds) : ''}\n      open={open}\n      onOpenChange={setOpen}\n      onOpening={() => {\n        setDraft(parseTime(selected) ?? { hour: 9, minute: 0, second: 0 });\n        setValidText(true);\n      }}\n      onClear={() => change(null)}\n      onTextChange={(text) => {\n        const next = parseTime(text.trim());\n        setValidText(Boolean(next));\n        if (next) setDraft(next);\n      }}\n      onTextCommit={(text) => {\n        if (!text) {\n          change(null);\n          return true;\n        }\n        const next = parseTime(text);\n        if (!next || disabledTime?.(next)) return false;\n        change(next);\n        return true;\n      }}\n      panelClassName=\"leaf-time-picker__panel\"\n      renderPanel={(close) => (\n        <>\n          <TimePanel\n            disabledTime={disabledTime}\n            value={draft}\n            onChange={(next) => {\n              setDraft(next);\n              setValidText(true);\n            }}\n            minuteStep={minuteStep}\n            secondStep={secondStep}\n            showSeconds={showSeconds}\n            use12Hours={use12Hours}\n          />\n          <div className=\"leaf-picker-footer\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => {\n                const now = new Date();\n                setDraft({\n                  hour: now.getHours(),\n                  minute: now.getMinutes(),\n                  second: now.getSeconds(),\n                });\n                setValidText(true);\n              }}\n            >\n              {messages.now}\n            </Button>\n            <Button\n              size=\"sm\"\n              disabled={!validText || disabledTime?.(draft)}\n              onClick={() => {\n                change(draft);\n                close();\n              }}\n            >\n              {messages.confirm}\n            </Button>\n          </div>\n        </>\n      )}\n    />\n  );\n});\nTimePicker.displayName = 'TimePicker';\n"],"names":["TimePicker","forwardRef","value","defaultValue","minuteStep","secondStep","showSeconds","use12Hours","onChange","onOpenChange","disabledTime","controlledOpen","defaultOpen","props","ref","messages","useLeafConfig","field","useFormField","trigger","useRef","merged","useMergedRef","selected","setSelected","useFieldValue","draft","setDraft","useState","parseTime","validText","setValidText","open","setOpen","usePopupState","change","parts","next","timeString","formatted","displayTime","parsed","DateInput","Boolean","Clock3","text","close","TimePanel","Button","now","Date"],"mappings":"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"}

package/dist/esm/timerangepicker/index.d.ts

@@ -0,0 +1,3 @@
+export type { TimeRange, TimeRangePickerProps } from './timerangepicker.js';
+export { TimeRangePicker } from './timerangepicker.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/timerangepicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/timerangepicker/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/timerangepicker/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { TimeRangePicker } from "./timerangepicker.js";

package/dist/esm/timerangepicker/timerangepicker.d.ts

@@ -0,0 +1,17 @@
+import { type PickerFieldProps } from '../shared/date-input.js';
+import { type TimeParts } from '../shared/time.js';
+export type TimeRange = readonly [string, string];
+export interface TimeRangePickerProps extends PickerFieldProps {
+    value?: TimeRange | null;
+    defaultValue?: TimeRange | null;
+    onChange?: (value: TimeRange | null) => void;
+    onOpenChange?: (open: boolean) => void;
+    showSeconds?: boolean;
+    use12Hours?: boolean;
+    minuteStep?: number;
+    secondStep?: number;
+    allowOvernight?: boolean;
+    disabledTime?: (parts: TimeParts, position: 'start' | 'end') => boolean;
+}
+export declare const TimeRangePicker: import("react").ForwardRefExoticComponent<TimeRangePickerProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=timerangepicker.d.ts.map

package/dist/esm/timerangepicker/timerangepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timerangepicker.d.ts","sourceRoot":"","sources":["../../../src/timerangepicker/timerangepicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxE,OAAO,EAA0B,KAAK,SAAS,EAAc,MAAM,gBAAgB,CAAC;AAGpF,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAClD,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,KAAK,OAAO,CAAC;CACzE;AAGD,eAAO,MAAM,eAAe,mHAuJ3B,CAAC"}

package/dist/esm/timerangepicker/timerangepicker.js

@@ -0,0 +1,180 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Clock3 } from "lucide-react";
+import { forwardRef, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { useFormField } from "../form/form.js";
+import { DateInput } from "../shared/date-input.js";
+import { useFieldValue, useMergedRef } from "../shared/field.js";
+import { usePopupState } from "../shared/floating.js";
+import { displayTime, parseTime, timeString } from "../shared/time.js";
+import { useText } from "../shared/use-text.js";
+import { TimePanel } from "../timepicker/time-panel.js";
+const startTime = {
+    hour: 9,
+    minute: 0,
+    second: 0
+};
+const endTime = {
+    hour: 18,
+    minute: 0,
+    second: 0
+};
+const timerangepicker_TimeRangePicker = /*#__PURE__*/ forwardRef(function({ value, defaultValue = null, onChange, onOpenChange, open: controlledOpen, defaultOpen, showSeconds = false, use12Hours = false, minuteStep = 5, secondStep = 1, allowOvernight = false, disabledTime, ...props }, ref) {
+    const t = useText();
+    const field = useFormField();
+    const { messages } = useLeafConfig();
+    const trigger = useRef(null);
+    const merged = useMergedRef(trigger, ref);
+    const [selected, setSelected] = useFieldValue(value, defaultValue, trigger, props.form);
+    const [open, setOpen] = usePopupState(props.disabled || field?.disabled || props.readOnly, onOpenChange, controlledOpen, defaultOpen);
+    const [draft, setDraft] = useState([
+        startTime,
+        endTime
+    ]);
+    const [active, setActive] = useState(0);
+    const [validText, setValidText] = useState(true);
+    const valid = (range)=>(allowOvernight || timeString(range[0], true) <= timeString(range[1], true)) && !disabledTime?.(range[0], 'start') && !disabledTime?.(range[1], 'end');
+    const format = (parts)=>displayTime(parts, showSeconds, use12Hours, [
+            messages.am,
+            messages.pm
+        ]);
+    const change = (parts)=>{
+        if (props.disabled || field?.disabled || props.readOnly || parts && !valid(parts)) return;
+        const next = parts ? [
+            timeString(parts[0], showSeconds),
+            timeString(parts[1], showSeconds)
+        ] : null;
+        setSelected(next);
+        onChange?.(next);
+    };
+    const parseRange = (text)=>{
+        const pair = text.split(/\s*[~～–—]\s*/);
+        if (2 !== pair.length) return null;
+        const first = parseTime(pair[0]);
+        const second = parseTime(pair[1]);
+        return first && second ? [
+            first,
+            second
+        ] : null;
+    };
+    const first = parseTime(selected?.[0]);
+    const second = parseTime(selected?.[1]);
+    return /*#__PURE__*/ jsx(DateInput, {
+        ...props,
+        ref: merged,
+        placeholder: props.placeholder ?? t('开始时间 ～ 结束时间', 'Start time ~ End time'),
+        icon: /*#__PURE__*/ jsx(Clock3, {
+            size: 16,
+            "aria-hidden": "true"
+        }),
+        panelLabel: t('选择时间范围', 'Choose time range'),
+        clearLabel: t('清除时间范围', 'Clear time range'),
+        displayValue: first && second ? `${format(first)} ~ ${format(second)}` : '',
+        formValue: selected ? selected.join('/') : '',
+        open: open,
+        onOpenChange: setOpen,
+        onOpening: ()=>{
+            setDraft([
+                first ?? startTime,
+                second ?? endTime
+            ]);
+            setActive(0);
+            setValidText(true);
+        },
+        onClear: ()=>change(null),
+        commitOnBlur: false,
+        onTextChange: (text)=>{
+            const next = parseRange(text);
+            setValidText(Boolean(next && valid(next)));
+            if (next) setDraft(next);
+        },
+        onTextCommit: (text)=>{
+            if (!text) {
+                change(null);
+                return true;
+            }
+            const next = parseRange(text);
+            if (!next || !valid(next)) return false;
+            change(next);
+            return true;
+        },
+        panelClassName: "leaf-time-range-picker__panel",
+        renderPanel: (close)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "leaf-time-range-picker__panels",
+                        children: [
+                            0,
+                            1
+                        ].map((index)=>/*#__PURE__*/ jsxs("fieldset", {
+                                onFocusCapture: ()=>setActive(index),
+                                children: [
+                                    /*#__PURE__*/ jsx("legend", {
+                                        children: 0 === index ? messages.start : messages.end
+                                    }),
+                                    /*#__PURE__*/ jsx(TimePanel, {
+                                        disabledTime: (parts)=>!!disabledTime?.(parts, 0 === index ? 'start' : 'end'),
+                                        value: draft[index],
+                                        onChange: (next)=>{
+                                            setActive(index);
+                                            setDraft((previous)=>0 === index ? [
+                                                    next,
+                                                    previous[1]
+                                                ] : [
+                                                    previous[0],
+                                                    next
+                                                ]);
+                                            setValidText(true);
+                                        },
+                                        minuteStep: minuteStep,
+                                        secondStep: secondStep,
+                                        showSeconds: showSeconds,
+                                        use12Hours: use12Hours
+                                    })
+                                ]
+                            }, index))
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-picker-footer",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: ()=>{
+                                    const now = new Date();
+                                    const next = {
+                                        hour: now.getHours(),
+                                        minute: now.getMinutes(),
+                                        second: now.getSeconds()
+                                    };
+                                    setDraft((previous)=>0 === active ? [
+                                            next,
+                                            previous[1]
+                                        ] : [
+                                            previous[0],
+                                            next
+                                        ]);
+                                    setValidText(true);
+                                },
+                                children: messages.now
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "sm",
+                                disabled: !validText || !valid(draft),
+                                onClick: ()=>{
+                                    change(draft);
+                                    close();
+                                },
+                                children: messages.confirm
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+});
+export { timerangepicker_TimeRangePicker as TimeRangePicker };
+
+//# sourceMappingURL=timerangepicker.js.map

package/dist/esm/timerangepicker/timerangepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timerangepicker/timerangepicker.js","sources":["../../../src/timerangepicker/timerangepicker.tsx"],"sourcesContent":["import { Clock3 } from 'lucide-react';\nimport { forwardRef, useRef, useState } from 'react';\nimport { Button } from '../button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { DateInput, type PickerFieldProps } from '../shared/date-input';\nimport { useFieldValue, useMergedRef } from '../shared/field';\nimport { usePopupState } from '../shared/floating';\nimport { displayTime, parseTime, type TimeParts, timeString } from '../shared/time';\nimport { useText } from '../shared/use-text';\nimport { TimePanel } from '../timepicker/time-panel';\nexport type TimeRange = readonly [string, string];\nexport interface TimeRangePickerProps extends PickerFieldProps {\n  value?: TimeRange | null;\n  defaultValue?: TimeRange | null;\n  onChange?: (value: TimeRange | null) => void;\n  onOpenChange?: (open: boolean) => void;\n  showSeconds?: boolean;\n  use12Hours?: boolean;\n  minuteStep?: number;\n  secondStep?: number;\n  allowOvernight?: boolean;\n  disabledTime?: (parts: TimeParts, position: 'start' | 'end') => boolean;\n}\nconst startTime: TimeParts = { hour: 9, minute: 0, second: 0 };\nconst endTime: TimeParts = { hour: 18, minute: 0, second: 0 };\nexport const TimeRangePicker = forwardRef<HTMLInputElement, TimeRangePickerProps>(\n  function TimeRangePicker(\n    {\n      value,\n      defaultValue = null,\n      onChange,\n      onOpenChange,\n      open: controlledOpen,\n      defaultOpen,\n      showSeconds = false,\n      use12Hours = false,\n      minuteStep = 5,\n      secondStep = 1,\n      allowOvernight = false,\n      disabledTime,\n      ...props\n    },\n    ref,\n  ) {\n    const t = useText();\n    const field = useFormField();\n    const { messages } = useLeafConfig();\n    const trigger = useRef<HTMLInputElement>(null);\n    const merged = useMergedRef(trigger, ref);\n    const [selected, setSelected] = useFieldValue(value, defaultValue, trigger, props.form);\n    const [open, setOpen] = usePopupState(\n      props.disabled || field?.disabled || props.readOnly,\n      onOpenChange,\n      controlledOpen,\n      defaultOpen,\n    );\n    const [draft, setDraft] = useState<readonly [TimeParts, TimeParts]>([startTime, endTime]);\n    const [active, setActive] = useState<0 | 1>(0);\n    const [validText, setValidText] = useState(true);\n    const valid = (range: readonly [TimeParts, TimeParts]) =>\n      (allowOvernight || timeString(range[0], true) <= timeString(range[1], true)) &&\n      !disabledTime?.(range[0], 'start') &&\n      !disabledTime?.(range[1], 'end');\n    const format = (parts: TimeParts) =>\n      displayTime(parts, showSeconds, use12Hours, [messages.am, messages.pm]);\n    const change = (parts: readonly [TimeParts, TimeParts] | null) => {\n      if (props.disabled || field?.disabled || props.readOnly || (parts && !valid(parts))) return;\n      const next = parts\n        ? ([timeString(parts[0], showSeconds), timeString(parts[1], showSeconds)] as const)\n        : null;\n      setSelected(next);\n      onChange?.(next);\n    };\n    const parseRange = (text: string): readonly [TimeParts, TimeParts] | null => {\n      const pair = text.split(/\\s*[~～–—]\\s*/);\n      if (pair.length !== 2) return null;\n      const first = parseTime(pair[0]);\n      const second = parseTime(pair[1]);\n      return first && second ? [first, second] : null;\n    };\n    const first = parseTime(selected?.[0]);\n    const second = parseTime(selected?.[1]);\n    return (\n      <DateInput\n        {...props}\n        ref={merged}\n        placeholder={props.placeholder ?? t('开始时间 ～ 结束时间', 'Start time ~ End time')}\n        icon={<Clock3 size={16} aria-hidden=\"true\" />}\n        panelLabel={t('选择时间范围', 'Choose time range')}\n        clearLabel={t('清除时间范围', 'Clear time range')}\n        displayValue={first && second ? `${format(first)} ~ ${format(second)}` : ''}\n        formValue={selected ? selected.join('/') : ''}\n        open={open}\n        onOpenChange={setOpen}\n        onOpening={() => {\n          setDraft([first ?? startTime, second ?? endTime]);\n          setActive(0);\n          setValidText(true);\n        }}\n        onClear={() => change(null)}\n        commitOnBlur={false}\n        onTextChange={(text) => {\n          const next = parseRange(text);\n          setValidText(Boolean(next && valid(next)));\n          if (next) setDraft(next);\n        }}\n        onTextCommit={(text) => {\n          if (!text) {\n            change(null);\n            return true;\n          }\n          const next = parseRange(text);\n          if (!next || !valid(next)) return false;\n          change(next);\n          return true;\n        }}\n        panelClassName=\"leaf-time-range-picker__panel\"\n        renderPanel={(close) => (\n          <>\n            <div className=\"leaf-time-range-picker__panels\">\n              {([0, 1] as const).map((index) => (\n                <fieldset key={index} onFocusCapture={() => setActive(index)}>\n                  <legend>{index === 0 ? messages.start : messages.end}</legend>\n                  <TimePanel\n                    disabledTime={(parts) => !!disabledTime?.(parts, index === 0 ? 'start' : 'end')}\n                    value={draft[index]}\n                    onChange={(next) => {\n                      setActive(index);\n                      setDraft((previous) =>\n                        index === 0 ? [next, previous[1]] : [previous[0], next],\n                      );\n                      setValidText(true);\n                    }}\n                    minuteStep={minuteStep}\n                    secondStep={secondStep}\n                    showSeconds={showSeconds}\n                    use12Hours={use12Hours}\n                  />\n                </fieldset>\n              ))}\n            </div>\n            <div className=\"leaf-picker-footer\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => {\n                  const now = new Date();\n                  const next = {\n                    hour: now.getHours(),\n                    minute: now.getMinutes(),\n                    second: now.getSeconds(),\n                  };\n                  setDraft((previous) =>\n                    active === 0 ? [next, previous[1]] : [previous[0], next],\n                  );\n                  setValidText(true);\n                }}\n              >\n                {messages.now}\n              </Button>\n              <Button\n                size=\"sm\"\n                disabled={!validText || !valid(draft)}\n                onClick={() => {\n                  change(draft);\n                  close();\n                }}\n              >\n                {messages.confirm}\n              </Button>\n            </div>\n          </>\n        )}\n      />\n    );\n  },\n);\n"],"names":["startTime","endTime","TimeRangePicker","forwardRef","value","defaultValue","onChange","onOpenChange","controlledOpen","defaultOpen","showSeconds","use12Hours","minuteStep","secondStep","allowOvernight","disabledTime","props","ref","t","useText","field","useFormField","messages","useLeafConfig","trigger","useRef","merged","useMergedRef","selected","setSelected","useFieldValue","open","setOpen","usePopupState","draft","setDraft","useState","active","setActive","validText","setValidText","valid","range","timeString","format","parts","displayTime","change","next","parseRange","text","pair","first","parseTime","second","DateInput","Clock3","Boolean","close","index","TimePanel","previous","Button","now","Date"],"mappings":";;;;;;;;;;;;;AAwBA,MAAMA,YAAuB;IAAE,MAAM;IAAG,QAAQ;IAAG,QAAQ;AAAE;AAC7D,MAAMC,UAAqB;IAAE,MAAM;IAAI,QAAQ;IAAG,QAAQ;AAAE;AACrD,MAAMC,kCAAkB,WAAHA,GAAGC,WAC7B,SACE,EACEC,KAAK,EACLC,eAAe,IAAI,EACnBC,QAAQ,EACRC,YAAY,EACZ,MAAMC,cAAc,EACpBC,WAAW,EACXC,cAAc,KAAK,EACnBC,aAAa,KAAK,EAClBC,aAAa,CAAC,EACdC,aAAa,CAAC,EACdC,iBAAiB,KAAK,EACtBC,YAAY,EACZ,GAAGC,OACJ,EACDC,GAAG;IAEH,MAAMC,IAAIC;IACV,MAAMC,QAAQC;IACd,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAMC,UAAUC,OAAyB;IACzC,MAAMC,SAASC,aAAaH,SAASP;IACrC,MAAM,CAACW,UAAUC,YAAY,GAAGC,cAAc1B,OAAOC,cAAcmB,SAASR,MAAM,IAAI;IACtF,MAAM,CAACe,MAAMC,QAAQ,GAAGC,cACtBjB,MAAM,QAAQ,IAAII,OAAO,YAAYJ,MAAM,QAAQ,EACnDT,cACAC,gBACAC;IAEF,MAAM,CAACyB,OAAOC,SAAS,GAAGC,SAA0C;QAACpC;QAAWC;KAAQ;IACxF,MAAM,CAACoC,QAAQC,UAAU,GAAGF,SAAgB;IAC5C,MAAM,CAACG,WAAWC,aAAa,GAAGJ,SAAS;IAC3C,MAAMK,QAAQ,CAACC,QACZ5B,AAAAA,CAAAA,kBAAkB6B,WAAWD,KAAK,CAAC,EAAE,EAAE,SAASC,WAAWD,KAAK,CAAC,EAAE,EAAE,KAAI,KAC1E,CAAC3B,eAAe2B,KAAK,CAAC,EAAE,EAAE,YAC1B,CAAC3B,eAAe2B,KAAK,CAAC,EAAE,EAAE;IAC5B,MAAME,SAAS,CAACC,QACdC,YAAYD,OAAOnC,aAAaC,YAAY;YAACW,SAAS,EAAE;YAAEA,SAAS,EAAE;SAAC;IACxE,MAAMyB,SAAS,CAACF;QACd,IAAI7B,MAAM,QAAQ,IAAII,OAAO,YAAYJ,MAAM,QAAQ,IAAK6B,SAAS,CAACJ,MAAMI,QAAS;QACrF,MAAMG,OAAOH,QACR;YAACF,WAAWE,KAAK,CAAC,EAAE,EAAEnC;YAAciC,WAAWE,KAAK,CAAC,EAAE,EAAEnC;SAAa,GACvE;QACJmB,YAAYmB;QACZ1C,WAAW0C;IACb;IACA,MAAMC,aAAa,CAACC;QAClB,MAAMC,OAAOD,KAAK,KAAK,CAAC;QACxB,IAAIC,AAAgB,MAAhBA,KAAK,MAAM,EAAQ,OAAO;QAC9B,MAAMC,QAAQC,UAAUF,IAAI,CAAC,EAAE;QAC/B,MAAMG,SAASD,UAAUF,IAAI,CAAC,EAAE;QAChC,OAAOC,SAASE,SAAS;YAACF;YAAOE;SAAO,GAAG;IAC7C;IACA,MAAMF,QAAQC,UAAUzB,UAAU,CAAC,EAAE;IACrC,MAAM0B,SAASD,UAAUzB,UAAU,CAAC,EAAE;IACtC,OAAO,WAAP,GACE,IAAC2B,WAASA;QACP,GAAGvC,KAAK;QACT,KAAKU;QACL,aAAaV,MAAM,WAAW,IAAIE,EAAE,eAAe;QACnD,oBAAM,IAACsC,QAAMA;YAAC,MAAM;YAAI,eAAY;;QACpC,YAAYtC,EAAE,UAAU;QACxB,YAAYA,EAAE,UAAU;QACxB,cAAckC,SAASE,SAAS,GAAGV,OAAOQ,OAAO,GAAG,EAAER,OAAOU,SAAS,GAAG;QACzE,WAAW1B,WAAWA,SAAS,IAAI,CAAC,OAAO;QAC3C,MAAMG;QACN,cAAcC;QACd,WAAW;YACTG,SAAS;gBAACiB,SAASpD;gBAAWsD,UAAUrD;aAAQ;YAChDqC,UAAU;YACVE,aAAa;QACf;QACA,SAAS,IAAMO,OAAO;QACtB,cAAc;QACd,cAAc,CAACG;YACb,MAAMF,OAAOC,WAAWC;YACxBV,aAAaiB,QAAQT,QAAQP,MAAMO;YACnC,IAAIA,MAAMb,SAASa;QACrB;QACA,cAAc,CAACE;YACb,IAAI,CAACA,MAAM;gBACTH,OAAO;gBACP,OAAO;YACT;YACA,MAAMC,OAAOC,WAAWC;YACxB,IAAI,CAACF,QAAQ,CAACP,MAAMO,OAAO,OAAO;YAClCD,OAAOC;YACP,OAAO;QACT;QACA,gBAAe;QACf,aAAa,CAACU,QAAAA,WAAAA,GACZ;;kCACE,IAAC;wBAAI,WAAU;kCACX;4BAAC;4BAAG;yBAAE,CAAW,GAAG,CAAC,CAACC,QAAAA,WAAAA,GACtB,KAAC;gCAAqB,gBAAgB,IAAMrB,UAAUqB;;kDACpD,IAAC;kDAAQA,AAAU,MAAVA,QAAcrC,SAAS,KAAK,GAAGA,SAAS,GAAG;;kDACpD,IAACsC,WAASA;wCACR,cAAc,CAACf,QAAU,CAAC,CAAC9B,eAAe8B,OAAOc,AAAU,MAAVA,QAAc,UAAU;wCACzE,OAAOzB,KAAK,CAACyB,MAAM;wCACnB,UAAU,CAACX;4CACTV,UAAUqB;4CACVxB,SAAS,CAAC0B,WACRF,AAAU,MAAVA,QAAc;oDAACX;oDAAMa,QAAQ,CAAC,EAAE;iDAAC,GAAG;oDAACA,QAAQ,CAAC,EAAE;oDAAEb;iDAAK;4CAEzDR,aAAa;wCACf;wCACA,YAAY5B;wCACZ,YAAYC;wCACZ,aAAaH;wCACb,YAAYC;;;+BAfDgD;;kCAoBnB,KAAC;wBAAI,WAAU;;0CACb,IAACG,QAAMA;gCACL,SAAQ;gCACR,MAAK;gCACL,SAAS;oCACP,MAAMC,MAAM,IAAIC;oCAChB,MAAMhB,OAAO;wCACX,MAAMe,IAAI,QAAQ;wCAClB,QAAQA,IAAI,UAAU;wCACtB,QAAQA,IAAI,UAAU;oCACxB;oCACA5B,SAAS,CAAC0B,WACRxB,AAAW,MAAXA,SAAe;4CAACW;4CAAMa,QAAQ,CAAC,EAAE;yCAAC,GAAG;4CAACA,QAAQ,CAAC,EAAE;4CAAEb;yCAAK;oCAE1DR,aAAa;gCACf;0CAEClB,SAAS,GAAG;;0CAEf,IAACwC,QAAMA;gCACL,MAAK;gCACL,UAAU,CAACvB,aAAa,CAACE,MAAMP;gCAC/B,SAAS;oCACPa,OAAOb;oCACPwB;gCACF;0CAECpC,SAAS,OAAO;;;;;;;AAO/B"}