@windrun-huaiin/third-ui 29.1.0 → 29.2.0

package/src/main/buttons/index.ts

@@ -1,6 +1,7 @@
 'use client';
 
 export * from './gradient-button';
+export * from './use-press-feedback';
 export * from './x-button';
 export * from './x-switch-button';
 export * from './x-toggle-button';

package/src/main/buttons/use-press-feedback.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+
+export type PressFeedbackKey = string;
+export type PressFeedbackMode = 'none' | 'subtle' | 'solid';
+export type PressFeedback = boolean | PressFeedbackMode;
+
+export interface PressFeedbackProps<T extends PressFeedbackKey> {
+  onPointerDown: () => void;
+  onPointerUp: () => void;
+  onPointerLeave: () => void;
+  onPointerCancel: () => void;
+  onBlur: () => void;
+}
+
+export function resolvePressFeedbackMode(pressFeedback?: PressFeedback): PressFeedbackMode {
+  if (pressFeedback === false || pressFeedback === 'none') {
+    return 'none';
+  }
+
+  if (pressFeedback === 'solid') {
+    return 'solid';
+  }
+
+  return 'subtle';
+}
+
+export function usePressFeedback<T extends PressFeedbackKey>(durationMs = 180) {
+  const [pressedKey, setPressedKey] = useState<T | null>(null);
+
+  function release(key: T) {
+    setPressedKey((current) => (current === key ? null : current));
+  }
+
+  function trigger(key: T) {
+    setPressedKey(key);
+  }
+
+  function flash(key: T) {
+    setPressedKey(key);
+    window.setTimeout(() => {
+      setPressedKey((current) => (current === key ? null : current));
+    }, durationMs);
+  }
+
+  function getPressProps(key: T): PressFeedbackProps<T> {
+    return {
+      onPointerDown: () => trigger(key),
+      onPointerUp: () => release(key),
+      onPointerLeave: () => release(key),
+      onPointerCancel: () => release(key),
+      onBlur: () => release(key),
+    };
+  }
+
+  return { pressedKey, trigger, release, flash, getPressProps };
+}

package/src/main/buttons/x-button.tsx

@@ -4,8 +4,14 @@ import React, { useState, useRef, useEffect, ReactNode } from 'react'
 import { ChevronDownIcon, Loader2Icon } from '@windrun-huaiin/base-ui/icons'
 import { themeBgColor, themeBorderColor, themeIconColor, themeMainBgColor } from '@windrun-huaiin/base-ui/lib'
 import { cn } from '@windrun-huaiin/lib/utils'
+import { PressFeedback, resolvePressFeedbackMode, usePressFeedback } from './use-press-feedback'
 
 type XButtonVariant = 'default' | 'soft' | 'subtle'
+type XButtonPressKey = 'single' | 'main' | 'dropdown'
+
+const PRESS_FEEDBACK_MS = 180
+const xButtonPressSubtleClass = 'translate-y-px scale-[0.98] shadow-inner brightness-95'
+const xButtonPressSolidClass = 'translate-y-[2px] scale-[0.95] shadow-[inset_0_2px_4px_rgba(15,23,42,0.18)] brightness-95'
 
 interface BaseButtonConfig {
   icon: ReactNode
@@ -30,6 +36,7 @@ interface SingleButtonProps {
   className?: string
   iconClassName?: string
   variant?: XButtonVariant
+  pressFeedback?: PressFeedback
 }
 
 interface SplitButtonProps {
@@ -43,6 +50,7 @@ interface SplitButtonProps {
   dropdownButtonClassName?: string
   iconClassName?: string
   variant?: XButtonVariant
+  pressFeedback?: PressFeedback
 }
 
 type xButtonProps = SingleButtonProps | SplitButtonProps
@@ -50,7 +58,9 @@ type xButtonProps = SingleButtonProps | SplitButtonProps
 export function XButton(props: xButtonProps) {
   const [isLoading, setIsLoading] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
-  const menuRef = useRef<HTMLDivElement>(null)
+  const splitRef = useRef<HTMLDivElement>(null)
+  const pressMode = resolvePressFeedbackMode(props.pressFeedback)
+  const { pressedKey, flash, getPressProps } = usePressFeedback<XButtonPressKey>(PRESS_FEEDBACK_MS)
 
   const { iconClassName } = props
   const defaultIconClass = "w-5 h-5"
@@ -76,7 +86,7 @@ export function XButton(props: xButtonProps) {
   useEffect(() => {
     if (props.type === 'split') {
       const handleClickOutside = (event: MouseEvent) => {
-        if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        if (splitRef.current && !splitRef.current.contains(event.target as Node)) {
           setMenuOpen(false)
         }
       }
@@ -104,7 +114,8 @@ export function XButton(props: xButtonProps) {
     }
   }
 
-  const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-colors"
+  const getButtonPressClass = () => pressMode === 'solid' ? xButtonPressSolidClass : xButtonPressSubtleClass
+  const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-[transform,background-color,filter,box-shadow,border-color,color]"
   const singleButtonVariantClass = variant === 'soft'
     ? cn(
         themeBgColor,
@@ -141,25 +152,38 @@ export function XButton(props: xButtonProps) {
           "bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:border-l",
           themeIconColor,
           "border-neutral-200 dark:border-neutral-800"
-        )
-      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
+      )
+    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
+  const splitContainerVariantClass = variant === 'soft'
+    ? cn('border', themeBorderColor)
+    : variant === 'subtle'
+      ? 'border border-neutral-200 dark:border-neutral-800'
+      : null
   const disabledClass = "opacity-60 cursor-not-allowed"
 
   if (props.type === 'single') {
     const { button, loadingText, minWidth = 'min-w-[110px]', className = '' } = props
     const isDisabled = button.disabled || isLoading
+    const isPressed = pressMode !== 'none' && pressedKey === 'single' && !button.disabled
     const actualLoadingText = loadingText || button.text?.trim() || 'Loading...'
 
     return (
       <button
-        onClick={() => handleButtonClick(button.onClick)}
+        onClick={() => {
+          if (!isDisabled && pressMode !== 'none') {
+            flash('single')
+          }
+          handleButtonClick(button.onClick)
+        }}
         disabled={isDisabled}
+        {...(pressMode !== 'none' && !isDisabled ? getPressProps('single') : {})}
         className={cn(
           "w-full sm:w-auto",
           minWidth,
           baseButtonClass,
           singleButtonVariantClass,
           "rounded-full",
+          isPressed && getButtonPressClass(),
           isDisabled && disabledClass,
           className
         )}
@@ -182,21 +206,33 @@ export function XButton(props: xButtonProps) {
 
   const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props
   const isMainDisabled = mainButton.disabled || isLoading
+  const isMainPressed = pressMode !== 'none' && pressedKey === 'main' && !mainButton.disabled
+  const isDropdownPressed = pressMode !== 'none' && pressedKey === 'dropdown' && !isLoading
   const actualLoadingText = loadingText || mainButton.text?.trim() || 'Loading...'
 
   return (
     <div className={cn(
-      "relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0",
+      "relative inline-flex flex-row items-stretch w-full sm:w-fit rounded-full gap-0",
+      splitContainerVariantClass,
       menuOpen && "z-90",
       className
-    )}>
+    )}
+      ref={splitRef}
+    >
       <button
-        onClick={() => handleButtonClick(mainButton.onClick)}
+        onClick={() => {
+          if (!isMainDisabled && pressMode !== 'none') {
+            flash('main')
+          }
+          handleButtonClick(mainButton.onClick)
+        }}
         disabled={isMainDisabled}
+        {...(pressMode !== 'none' && !isMainDisabled ? getPressProps('main') : {})}
         className={cn(
           "flex-1 min-w-0 sm:min-w-[100px] sm:flex-initial rounded-l-full",
           baseButtonClass,
           splitMainButtonVariantClass,
+          isMainPressed && getButtonPressClass(),
           isMainDisabled && disabledClass,
           mainButtonClassName
         )}
@@ -218,12 +254,19 @@ export function XButton(props: xButtonProps) {
 
       <button
         type="button"
-        onClick={() => setMenuOpen(!menuOpen)}
+        onClick={() => {
+          if (!isLoading && pressMode !== 'none') {
+            flash('dropdown')
+          }
+          setMenuOpen(!menuOpen)
+        }}
         disabled={isLoading}
+        {...(pressMode !== 'none' && !isLoading ? getPressProps('dropdown') : {})}
         className={cn(
           "w-12 rounded-r-full",
           baseButtonClass,
           splitDropdownVariantClass,
+          isDropdownPressed && getButtonPressClass(),
           isLoading && disabledClass,
           dropdownButtonClassName
         )}
@@ -234,7 +277,6 @@ export function XButton(props: xButtonProps) {
 
       {menuOpen && (
         <div
-          ref={menuRef}
           className={cn(
             "absolute top-full right-0 mt-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg z-50 overflow-hidden",
             menuWidth

package/src/main/calendar/calendar-date-range-input.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState } from 'react';
+import { CalendarDaysIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import {
+  type PressFeedback,
+  resolvePressFeedbackMode,
+  usePressFeedback,
+} from '../buttons/use-press-feedback';
+import { RandomDateRangeDialog, type RandomCalendarRange } from './random-date-range-dialog';
+
+export type CalendarDateRangeValue = RandomCalendarRange;
+
+export type CalendarDateRangeInputProps = {
+  value: CalendarDateRangeValue;
+  onChange: (value: CalendarDateRangeValue) => void;
+  placeholder?: string;
+  defaultRangeDays?: number;
+  disabled?: boolean;
+  className?: string;
+  showDayCount?: boolean;
+  dayCountUnit?: string;
+  themedCalendarIcon?: boolean;
+  clearPressFeedback?: PressFeedback;
+  onOpenChange?: (open: boolean) => void;
+};
+
+type DateRangeInputPressKey = 'clear';
+
+const DEFAULT_PLACEHOLDER = '滑动窗口日期';
+const DEFAULT_RANGE_DAYS = 7;
+const CLEAR_PRESS_FEEDBACK_MS = 180;
+
+function parseDateString(value: string): Date {
+  return new Date(`${value}T00:00:00.000Z`);
+}
+
+function getTodayString(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+function getInclusiveDayCount(value: CalendarDateRangeValue): number {
+  if (!value.startDate || !value.endDate) {
+    return 0;
+  }
+
+  const startTime = parseDateString(value.startDate).getTime();
+  const endTime = parseDateString(value.endDate).getTime();
+
+  return Math.max(0, Math.floor(Math.abs(endTime - startTime) / 86400000) + 1);
+}
+
+function getRangeLabel(value: CalendarDateRangeValue, showDayCount: boolean, dayCountUnit: string): string | null {
+  if (!value.startDate || !value.endDate) {
+    return null;
+  }
+
+  const dateLabel = `${value.startDate} ~ ${value.endDate}`;
+
+  if (!showDayCount) {
+    return dateLabel;
+  }
+
+  return `${dateLabel} · ${getInclusiveDayCount(value)}${dayCountUnit}`;
+}
+
+export function CalendarDateRangeInput({
+  value,
+  onChange,
+  placeholder = DEFAULT_PLACEHOLDER,
+  defaultRangeDays = DEFAULT_RANGE_DAYS,
+  disabled = false,
+  className,
+  showDayCount = false,
+  dayCountUnit = 'D',
+  themedCalendarIcon = true,
+  clearPressFeedback = 'subtle',
+  onOpenChange,
+}: CalendarDateRangeInputProps) {
+  const [open, setOpen] = useState(false);
+  const pressMode = resolvePressFeedbackMode(clearPressFeedback);
+  const { pressedKey, flash, getPressProps } = usePressFeedback<DateRangeInputPressKey>(CLEAR_PRESS_FEEDBACK_MS);
+  const label = getRangeLabel(value, showDayCount, dayCountUnit);
+  const hasValue = Boolean(value.startDate || value.endDate);
+  const isClearPressed = pressMode !== 'none' && pressedKey === 'clear' && !disabled;
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  }
+
+  function handleClear() {
+    onChange({ startDate: null, endDate: null });
+  }
+
+  return (
+    <>
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+        onClick={() => {
+          if (!disabled) {
+            handleOpenChange(true);
+          }
+        }}
+        onKeyDown={(event) => {
+          if (disabled) {
+            return;
+          }
+
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleOpenChange(true);
+          }
+        }}
+        className={cn(
+          'flex h-11 w-full cursor-pointer items-center rounded-2xl border border-border/70 bg-background/80 text-left text-sm shadow-sm transition hover:bg-accent/40',
+          disabled && 'cursor-not-allowed opacity-60 hover:bg-background/80',
+          className
+        )}
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-2 px-3">
+          <CalendarDaysIcon
+            className={cn('h-4 w-4 shrink-0', themedCalendarIcon ? themeIconColor : 'text-muted-foreground')}
+          />
+          <span className={cn('truncate', label ? 'text-foreground' : 'text-muted-foreground')}>
+            {label ?? placeholder}
+          </span>
+        </span>
+        <button
+          type="button"
+          disabled={disabled || !hasValue}
+          onClick={(event) => {
+            event.stopPropagation();
+            if (disabled || !hasValue) {
+              return;
+            }
+
+            if (pressMode !== 'none') {
+              flash('clear');
+            }
+            handleClear();
+          }}
+          className={cn(
+            'mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-[transform,background-color,color,box-shadow]',
+            hasValue
+              ? 'hover:bg-black/10 hover:text-foreground dark:hover:bg-white/12'
+              : 'cursor-default opacity-35',
+            isClearPressed &&
+              'scale-90 bg-black/15 text-foreground shadow-inner dark:bg-white/18'
+          )}
+          aria-label="Clear date range"
+          title="Clear date range"
+          {...(pressMode !== 'none' && !disabled && hasValue ? getPressProps('clear') : {})}
+        >
+          <XIcon className="h-4 w-4" />
+        </button>
+      </div>
+      <RandomDateRangeDialog
+        open={open}
+        value={value}
+        anchorDate={value.startDate ?? getTodayString()}
+        defaultRangeDays={defaultRangeDays}
+        onOpenChange={handleOpenChange}
+        onApply={onChange}
+        onClear={onChange}
+      />
+    </>
+  );
+}