dishui 0.0.64 → 0.0.66

package/dist/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useClickOutside } from '../../hooks/useClickOutside';\n\nexport interface Option {\n  value: string | number;\n  label: string;\n}\n\nexport interface SelectProps {\n  options: Option[];\n  value?: string | number | (string | number)[];\n  onChange: (value: string | number | (string | number)[]) => void;\n  placeholder?: string;\n  multiple?: boolean;\n  fixedHeight?: boolean;\n  style?: React.CSSProperties;       // Allow passing inline styles\n  className?: string;                // Allow passing CSS classes for the wrapper\n}\n\n// SVG component for the dropdown arrow\nconst DropdownArrow: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    style={{\n      display: 'block',\n      width: 16,\n      height: 16,\n      transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n      transition: 'transform 200ms ease-in-out',\n    }}\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n  </svg>\n);\n\n// SVG component for the remove button 'x'\nconst RemoveIcon: React.FC = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\n// Select Component Implementation using daisyUI/Tailwind\nconst Select: React.FC<SelectProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select...',\n  multiple = false,\n  fixedHeight = false,\n  style,\n  className // This className applies to the wrapper\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const [tooltipText, setTooltipText] = useState('');\n  const [showArrow, setShowArrow] = useState(true);\n  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null); // Ref for the header div\n  const optionsListRef = useRef<HTMLUListElement>(null);\n  // Tracks a touch/pen press on an option so a tap selects while a drag scrolls.\n  // (pointerdown on touch must NOT preventDefault — that blocks native scrolling.)\n  const touchPressRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (wrapperRef.current?.contains(target) || optionsListRef.current?.contains(target)) return;\n      setIsOpen(false);\n    };\n    document.addEventListener('pointerdown', handlePointerDown);\n    document.addEventListener('mousedown', handlePointerDown);\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const selectedValuesArray = Array.isArray(value) ? value : (value !== undefined && value !== null ? [value] : []);\n\n  // Close dropdown when clicking outside\n  useClickOutside(wrapperRef, useCallback(() => setIsOpen(false), []));\n\n  const updateDropdownPosition = useCallback(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    const estimatedHeight = Math.min(options.length, 8) * 36 + 8;\n    const fitsBelow = rect.bottom + 4 + estimatedHeight <= window.innerHeight;\n    setDropdownStyle({\n      position: 'fixed',\n      left: rect.left,\n      top: fitsBelow ? rect.bottom + 4 : Math.max(8, rect.top - estimatedHeight - 4),\n      width: rect.width,\n      zIndex: 10000,\n    });\n  }, [options.length]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    updateDropdownPosition();\n    window.addEventListener('resize', updateDropdownPosition);\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    return () => {\n      window.removeEventListener('resize', updateDropdownPosition);\n      window.removeEventListener('scroll', updateDropdownPosition, true);\n    };\n  }, [isOpen, updateDropdownPosition]);\n\n  // Hide the decorative arrow when the control becomes too narrow to reserve\n  // space for both it and a useful amount of label text.\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const update = () => setShowArrow(wrapper.clientWidth >= 88);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, []);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setHighlightedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));\n          scrollToHighlightedOption();\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setHighlightedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));\n          scrollToHighlightedOption();\n          break;\n        case 'Enter':\n        case ' ': // Space key\n          event.preventDefault();\n          if (highlightedIndex >= 0 && highlightedIndex < options.length) {\n            handleOptionClick(options[highlightedIndex]);\n            if (!multiple) setIsOpen(false); // Close dropdown on selection if single mode\n          } else if (!multiple) {\n            setIsOpen(false); // Close dropdown if Enter/Space is pressed without a highlighted option in single mode\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          break;\n        default:\n          // Optional: Implement type-ahead find\n          break;\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, highlightedIndex, options, multiple]); // Added multiple to dependencies\n\n  const scrollToHighlightedOption = useCallback(() => {\n    if (optionsListRef.current && highlightedIndex >= 0) {\n      const list = optionsListRef.current;\n      const optionElement = list.children[highlightedIndex] as HTMLLIElement;\n      if (optionElement) {\n        const listRect = list.getBoundingClientRect();\n        const optionRect = optionElement.getBoundingClientRect();\n\n        if (optionRect.bottom > listRect.bottom) {\n          list.scrollTop += optionRect.bottom - listRect.bottom;\n        } else if (optionRect.top < listRect.top) {\n          list.scrollTop -= listRect.top - optionRect.top;\n        }\n      }\n    }\n  }, [highlightedIndex]);\n\n  const toggleDropdown = () => {\n    const next = !isOpen;\n    setIsOpen(next);\n    setHighlightedIndex(next ? 0 : -1); // Reset or set initial highlight\n    if (next) updateDropdownPosition();\n  };\n\n  const handleOptionClick = (option: Option) => {\n    if (multiple) {\n      const currentValues = Array.isArray(value) ? value : [];\n      let newValue;\n      if (currentValues.includes(option.value)) {\n        newValue = currentValues.filter(v => v !== option.value);\n      } else {\n        newValue = [...currentValues, option.value];\n      }\n      onChange(newValue);\n    } else {\n      onChange(option.value);\n      setIsOpen(false); // Close dropdown on single select\n    }\n    // Keep highlight on the selected item in multi-select? Maybe not.\n    // setHighlightedIndex(options.findIndex(o => o.value === option.value));\n  };\n\n  // Mouse: select immediately on press (existing desktop behavior).\n  // Touch/pen: only record the press — selection happens on pointerup if the\n  // gesture turned out to be a tap rather than a scroll. preventDefault() on a\n  // touch pointerdown suppresses the browser's native pan gesture, which made\n  // long dropdowns impossible to scroll on mobile (and every scroll attempt\n  // selected an option instead).\n  const handleOptionPointerDown = (event: React.PointerEvent<HTMLLIElement>, option: Option) => {\n    if (event.pointerType === 'mouse') {\n      event.preventDefault();\n      event.stopPropagation();\n      handleOptionClick(option);\n      return;\n    }\n    event.stopPropagation();\n    touchPressRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\n  };\n\n  const handleOptionPointerUp = (event: React.PointerEvent<HTMLLIElement>, option: Option) => {\n    const press = touchPressRef.current;\n    touchPressRef.current = null;\n    if (!press || event.pointerId !== press.pointerId) return;\n    // Select only if the finger did not move much — otherwise it was a scroll.\n    const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);\n    if (moved < 10) {\n      event.stopPropagation();\n      handleOptionClick(option);\n    }\n  };\n\n  const handleOptionPointerCancel = () => {\n    touchPressRef.current = null;\n  };\n\n  const handleRemoveItem = (e: React.MouseEvent, itemValue: string | number) => {\n    e.stopPropagation(); // Prevent dropdown from opening/closing\n    const currentValues = Array.isArray(value) ? value : [];\n    onChange(currentValues.filter(v => v !== itemValue));\n  };\n\n  // Update tooltip text and check for overflow\n  useEffect(() => {\n    if (multiple && headerRef.current) {\n      const header = headerRef.current;\n      const selectedLabels = options\n        .filter(opt => selectedValuesArray.includes(opt.value))\n        .map(opt => opt.label)\n        .join(', ');\n\n      // Check if the content (scrollWidth) exceeds the visible area (clientWidth)\n      const isOverflowing = header.scrollWidth > header.clientWidth;\n      setTooltipText(isOverflowing ? selectedLabels : ''); // Only set text if overflowing\n    } else {\n      setTooltipText(''); // Clear tooltip for single select or empty multi-select\n    }\n  }, [value, multiple, options, selectedValuesArray]);\n\n\n  const renderSelectedValue = () => {\n    if (selectedValuesArray.length === 0) {\n      return <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n\n    const selectedOptions = options.filter(opt => selectedValuesArray.includes(opt.value));\n\n    if (multiple) {\n      const isFixed = fixedHeight;\n      // Apply overflow-x-auto for horizontal scrolling in fixedHeight mode\n      const containerClasses = `\n        flex gap-1 \n        ${isFixed ? 'flex-nowrap overflow-x-auto overflow-y-hidden' : 'flex-wrap overflow-hidden'} // Enable horizontal scroll, hide vertical scrollbar if any\n        ${tooltipText ? 'tooltip tooltip-bottom' : ''} // Keep tooltip for overflow\n      `;\n      // Removed showEllipsisPrefix\n\n      return (\n        <div\n          ref={headerRef}\n          className={containerClasses}\n          data-tip={tooltipText ? tooltipText : undefined} // Keep tooltip logic\n          // Add scrollbar styling if desired (e.g., using ::-webkit-scrollbar pseudo-element via CSS or a utility)\n          style={{\n            scrollbarWidth: 'thin',\n            // 为固定高度模式添加右侧内边距，避免与下拉图标重叠\n            ...(isFixed ? { paddingRight: '1.75rem' } : {})\n          }}\n        >\n          {/* Removed wrapper for ellipsis and its popup */}\n\n          {/* Render the badges */}\n          {selectedOptions.map(option => (\n            <span key={option.value} className=\"badge badge-ghost gap-1 text-xs items-center whitespace-nowrap flex-shrink-0\">\n              {option.label}\n              <button\n                type=\"button\"\n                onClick={(e) => handleRemoveItem(e, option.value)}\n                className=\"btn btn-xs btn-ghost btn-circle p-0 m-0 hover:bg-error hover:text-error-content\"\n                aria-label={`Remove ${option.label}`}\n              >\n                <RemoveIcon />\n              </button>\n            </span>\n          ))}\n        </div>\n      );\n    } else {\n      const selectedOption = options.find(opt => opt.value === selectedValuesArray[0]);\n      return selectedOption ? <span className=\"truncate\">{selectedOption.label}</span> : <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n  };\n\n  // Match the default control height to a normal line of form text. Multi-select\n  // may still grow when wrapping tags unless fixedHeight is requested.\n  const selectClasses = `\n    relative border border-base-300 rounded-lg bg-base-100 w-full\n    flex justify-between items-center cursor-pointer px-3 text-sm\n    focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50\n    hover:border-base-content/30\n    ${multiple\n      ? (fixedHeight ? 'h-8' : 'min-h-8 h-auto py-1')\n      : 'h-8'}\n  `;\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={style}\n      className={`relative w-full font-sans select-none ${className || ''}`}\n    >\n      {/* Header */}\n      <div\n        tabIndex={0}\n        className={selectClasses}\n        onClick={toggleDropdown}\n        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') toggleDropdown(); }}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <div\n          className=\"flex-1 min-w-0 overflow-hidden\"\n          style={{ paddingRight: showArrow ? 28 : 0 }}\n        >\n          {renderSelectedValue()}\n        </div>\n        {/* Inline positioning avoids utility CSS/theme overrides moving the icon. */}\n        {showArrow && (\n          <div\n            aria-hidden=\"true\"\n            style={{\n              position: 'absolute',\n              right: 10,\n              top: '50%',\n              transform: 'translateY(-50%)',\n              pointerEvents: 'none',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              width: 16,\n              height: 16,\n            }}\n          >\n            <DropdownArrow isOpen={isOpen} />\n          </div>\n        )}\n      </div>\n\n      {/* Dropdown Options */}\n      {isOpen && typeof document !== 'undefined' && createPortal(\n        <ul\n          ref={optionsListRef}\n          className=\"bg-base-100 border border-base-300 rounded-md shadow-lg list-none p-0 m-0 max-h-60 overflow-y-auto focus:outline-none\"\n          style={{ ...dropdownStyle, touchAction: 'pan-y' }}\n          onPointerDown={(event) => event.stopPropagation()}\n          role=\"listbox\" // ARIA role\n          aria-activedescendant={highlightedIndex >= 0 ? `option-${options[highlightedIndex]?.value}` : undefined} // For screen readers\n          tabIndex={-1} // Allows focus programmatically but not via tab\n        >\n          {options.length > 0 ? (\n            options.map((option, index) => (\n              <li\n                key={option.value}\n                id={`option-${option.value}`} // ID for aria-activedescendant\n                className={`p-2 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-base-200 ${index === highlightedIndex ? 'bg-base-300' : '' // Highlight style\n                  } ${selectedValuesArray.includes(option.value) && !multiple ? 'font-semibold bg-base-200' : '' // Style for selected single item\n                  } ${selectedValuesArray.includes(option.value) && multiple ? 'font-semibold' : '' // Style for selected multi items (less prominent background)\n                  }`}\n                onPointerDown={(event) => handleOptionPointerDown(event, option)}\n                onPointerUp={(event) => handleOptionPointerUp(event, option)}\n                onPointerCancel={handleOptionPointerCancel}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }}\n                onMouseEnter={() => setHighlightedIndex(index)} // Highlight on hover\n                role=\"option\" // ARIA role\n                aria-selected={selectedValuesArray.includes(option.value)}\n              >\n                {/* Optional: Add a checkmark or similar for selected items, especially in multi-select */}\n                {option.label}\n              </li>\n            ))\n          ) : (\n            <li className=\"p-2 text-base-content/60 italic\">\n              No options available\n            </li>\n          )}\n        </ul>,\n        document.body,\n      )}\n    </div>\n  );\n};\n\nexport default Select; "],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useClickOutside } from '../../hooks/useClickOutside';\n\nexport interface Option {\n  value: string | number;\n  label: string;\n}\n\nexport interface SelectProps {\n  options: Option[];\n  value?: string | number | (string | number)[];\n  onChange: (value: string | number | (string | number)[]) => void;\n  placeholder?: string;\n  multiple?: boolean;\n  fixedHeight?: boolean;\n  style?: React.CSSProperties;       // Allow passing inline styles\n  className?: string;                // Allow passing CSS classes for the wrapper\n}\n\n// SVG component for the dropdown arrow\nconst DropdownArrow: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    style={{\n      display: 'block',\n      width: 16,\n      height: 16,\n      transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n      transition: 'transform 200ms ease-in-out',\n    }}\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n  </svg>\n);\n\n// SVG component for the remove button 'x'\nconst RemoveIcon: React.FC = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\n// Select Component Implementation using daisyUI/Tailwind\nconst Select: React.FC<SelectProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select...',\n  multiple = false,\n  fixedHeight = false,\n  style,\n  className // This className applies to the wrapper\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const [tooltipText, setTooltipText] = useState('');\n  const [showArrow, setShowArrow] = useState(true);\n  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null); // Ref for the header div\n  const optionsListRef = useRef<HTMLUListElement>(null);\n  // Tracks a touch/pen press on an option so a tap selects while a drag scrolls.\n  // (pointerdown on touch must NOT preventDefault — that blocks native scrolling.)\n  const touchPressRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (wrapperRef.current?.contains(target) || optionsListRef.current?.contains(target)) return;\n      setIsOpen(false);\n    };\n    document.addEventListener('pointerdown', handlePointerDown);\n    document.addEventListener('mousedown', handlePointerDown);\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const selectedValuesArray = Array.isArray(value) ? value : (value !== undefined && value !== null ? [value] : []);\n\n  // Close dropdown when clicking outside\n  useClickOutside(wrapperRef, useCallback(() => setIsOpen(false), []));\n\n  const updateDropdownPosition = useCallback(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    const estimatedHeight = Math.min(options.length, 8) * 36 + 8;\n    const fitsBelow = rect.bottom + 4 + estimatedHeight <= window.innerHeight;\n    setDropdownStyle({\n      position: 'fixed',\n      left: rect.left,\n      top: fitsBelow ? rect.bottom + 4 : Math.max(8, rect.top - estimatedHeight - 4),\n      width: rect.width,\n      zIndex: 10000,\n    });\n  }, [options.length]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    updateDropdownPosition();\n    window.addEventListener('resize', updateDropdownPosition);\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    return () => {\n      window.removeEventListener('resize', updateDropdownPosition);\n      window.removeEventListener('scroll', updateDropdownPosition, true);\n    };\n  }, [isOpen, updateDropdownPosition]);\n\n  // Hide the decorative arrow when the control becomes too narrow to reserve\n  // space for both it and a useful amount of label text.\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    const update = () => setShowArrow(wrapper.clientWidth >= 88);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, []);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          setHighlightedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));\n          scrollToHighlightedOption();\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          setHighlightedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));\n          scrollToHighlightedOption();\n          break;\n        case 'Enter':\n        case ' ': // Space key\n          event.preventDefault();\n          if (highlightedIndex >= 0 && highlightedIndex < options.length) {\n            handleOptionClick(options[highlightedIndex]);\n            if (!multiple) setIsOpen(false); // Close dropdown on selection if single mode\n          } else if (!multiple) {\n            setIsOpen(false); // Close dropdown if Enter/Space is pressed without a highlighted option in single mode\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          break;\n        default:\n          // Optional: Implement type-ahead find\n          break;\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, highlightedIndex, options, multiple]); // Added multiple to dependencies\n\n  const scrollToHighlightedOption = useCallback(() => {\n    if (optionsListRef.current && highlightedIndex >= 0) {\n      const list = optionsListRef.current;\n      const optionElement = list.children[highlightedIndex] as HTMLLIElement;\n      if (optionElement) {\n        const listRect = list.getBoundingClientRect();\n        const optionRect = optionElement.getBoundingClientRect();\n\n        if (optionRect.bottom > listRect.bottom) {\n          list.scrollTop += optionRect.bottom - listRect.bottom;\n        } else if (optionRect.top < listRect.top) {\n          list.scrollTop -= listRect.top - optionRect.top;\n        }\n      }\n    }\n  }, [highlightedIndex]);\n\n  const toggleDropdown = () => {\n    const next = !isOpen;\n    setIsOpen(next);\n    setHighlightedIndex(next ? 0 : -1); // Reset or set initial highlight\n    if (next) updateDropdownPosition();\n  };\n\n  const handleOptionClick = (option: Option) => {\n    if (multiple) {\n      const currentValues = Array.isArray(value) ? value : [];\n      let newValue;\n      if (currentValues.includes(option.value)) {\n        newValue = currentValues.filter(v => v !== option.value);\n      } else {\n        newValue = [...currentValues, option.value];\n      }\n      onChange(newValue);\n    } else {\n      onChange(option.value);\n      setIsOpen(false); // Close dropdown on single select\n    }\n    // Keep highlight on the selected item in multi-select? Maybe not.\n    // setHighlightedIndex(options.findIndex(o => o.value === option.value));\n  };\n\n  // Mouse: select immediately on press (existing desktop behavior).\n  // Touch/pen: only record the press — selection happens on pointerup if the\n  // gesture turned out to be a tap rather than a scroll. preventDefault() on a\n  // touch pointerdown suppresses the browser's native pan gesture, which made\n  // long dropdowns impossible to scroll on mobile (and every scroll attempt\n  // selected an option instead).\n  const handleOptionPointerDown = (event: React.PointerEvent<HTMLLIElement>, option: Option) => {\n    if (event.pointerType === 'mouse') {\n      event.preventDefault();\n      event.stopPropagation();\n      handleOptionClick(option);\n      return;\n    }\n    event.stopPropagation();\n    touchPressRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\n  };\n\n  const handleOptionPointerUp = (event: React.PointerEvent<HTMLLIElement>, option: Option) => {\n    const press = touchPressRef.current;\n    touchPressRef.current = null;\n    if (!press || event.pointerId !== press.pointerId) return;\n    // Select only if the finger did not move much — otherwise it was a scroll.\n    const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);\n    if (moved < 10) {\n      event.stopPropagation();\n      handleOptionClick(option);\n    }\n  };\n\n  const handleOptionPointerCancel = () => {\n    touchPressRef.current = null;\n  };\n\n  const handleRemoveItem = (e: React.MouseEvent, itemValue: string | number) => {\n    e.stopPropagation(); // Prevent dropdown from opening/closing\n    const currentValues = Array.isArray(value) ? value : [];\n    onChange(currentValues.filter(v => v !== itemValue));\n  };\n\n  // Update tooltip text and check for overflow\n  useEffect(() => {\n    if (multiple && headerRef.current) {\n      const header = headerRef.current;\n      const selectedLabels = options\n        .filter(opt => selectedValuesArray.includes(opt.value))\n        .map(opt => opt.label)\n        .join(', ');\n\n      // Check if the content (scrollWidth) exceeds the visible area (clientWidth)\n      const isOverflowing = header.scrollWidth > header.clientWidth;\n      setTooltipText(isOverflowing ? selectedLabels : ''); // Only set text if overflowing\n    } else {\n      setTooltipText(''); // Clear tooltip for single select or empty multi-select\n    }\n  }, [value, multiple, options, selectedValuesArray]);\n\n\n  const renderSelectedValue = () => {\n    if (selectedValuesArray.length === 0) {\n      return <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n\n    const selectedOptions = options.filter(opt => selectedValuesArray.includes(opt.value));\n\n    if (multiple) {\n      const isFixed = fixedHeight;\n      // Apply overflow-x-auto for horizontal scrolling in fixedHeight mode\n      const containerClasses = `\n        flex gap-1 \n        ${isFixed ? 'flex-nowrap overflow-x-auto overflow-y-hidden' : 'flex-wrap overflow-hidden'} // Enable horizontal scroll, hide vertical scrollbar if any\n        ${tooltipText ? 'tooltip tooltip-bottom' : ''} // Keep tooltip for overflow\n      `;\n      // Removed showEllipsisPrefix\n\n      return (\n        <div\n          ref={headerRef}\n          className={containerClasses}\n          data-tip={tooltipText ? tooltipText : undefined} // Keep tooltip logic\n          // Add scrollbar styling if desired (e.g., using ::-webkit-scrollbar pseudo-element via CSS or a utility)\n          style={{\n            scrollbarWidth: 'thin',\n            // 为固定高度模式添加右侧内边距，避免与下拉图标重叠\n            ...(isFixed ? { paddingRight: '1.75rem' } : {})\n          }}\n        >\n          {/* Removed wrapper for ellipsis and its popup */}\n\n          {/* Render the badges */}\n          {selectedOptions.map(option => (\n            <span key={option.value} className=\"badge badge-ghost gap-1 text-xs items-center whitespace-nowrap flex-shrink-0\">\n              {option.label}\n              <button\n                type=\"button\"\n                onClick={(e) => handleRemoveItem(e, option.value)}\n                className=\"btn btn-xs btn-ghost btn-circle p-0 m-0 hover:bg-error hover:text-error-content\"\n                aria-label={`Remove ${option.label}`}\n              >\n                <RemoveIcon />\n              </button>\n            </span>\n          ))}\n        </div>\n      );\n    } else {\n      const selectedOption = options.find(opt => opt.value === selectedValuesArray[0]);\n      return selectedOption ? <span className=\"truncate\">{selectedOption.label}</span> : <span className=\"text-base-content/60 italic\">{placeholder}</span>;\n    }\n  };\n\n  // Match the default control height to a normal line of form text. Multi-select\n  // may still grow when wrapping tags unless fixedHeight is requested.\n  const selectClasses = `\n    relative border border-base-300 rounded-lg bg-base-100 w-full\n    flex justify-between items-center cursor-pointer px-3 text-sm\n    focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50\n    hover:border-base-content/30\n    ${multiple\n      ? (fixedHeight ? 'h-8' : 'min-h-8 h-auto py-1')\n      : 'h-8'}\n  `;\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={style}\n      className={`relative w-full font-sans select-none ${className || ''}`}\n    >\n      {/* Header */}\n      <div\n        tabIndex={0}\n        className={selectClasses}\n        onClick={toggleDropdown}\n        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') toggleDropdown(); }}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <div\n          className=\"flex-1 min-w-0 overflow-hidden\"\n          style={{ paddingRight: showArrow ? 28 : 0 }}\n        >\n          {renderSelectedValue()}\n        </div>\n        {/* Inline positioning avoids utility CSS/theme overrides moving the icon. */}\n        {showArrow && (\n          <div\n            aria-hidden=\"true\"\n            style={{\n              position: 'absolute',\n              right: 10,\n              top: '50%',\n              transform: 'translateY(-50%)',\n              pointerEvents: 'none',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              width: 16,\n              height: 16,\n            }}\n          >\n            <DropdownArrow isOpen={isOpen} />\n          </div>\n        )}\n      </div>\n\n      {/* Dropdown Options */}\n      {isOpen && typeof document !== 'undefined' && createPortal(\n        <ul\n          ref={optionsListRef}\n          className=\"bg-base-100 border border-base-300 rounded-md shadow-lg list-none p-0 m-0 max-h-60 overflow-y-auto focus:outline-none\"\n          style={{ ...dropdownStyle, touchAction: 'pan-y' }}\n          onPointerDown={(event) => event.stopPropagation()}\n          role=\"listbox\" // ARIA role\n          aria-activedescendant={highlightedIndex >= 0 ? `option-${options[highlightedIndex]?.value}` : undefined} // For screen readers\n          tabIndex={-1} // Allows focus programmatically but not via tab\n        >\n          {options.length > 0 ? (\n            options.map((option, index) => (\n              <li\n                key={option.value}\n                id={`option-${option.value}`} // ID for aria-activedescendant\n                className={`p-2 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-base-200 ${index === highlightedIndex ? 'bg-base-300' : '' // Highlight style\n                  } ${selectedValuesArray.includes(option.value) && !multiple ? 'font-semibold bg-base-200' : '' // Style for selected single item\n                  } ${selectedValuesArray.includes(option.value) && multiple ? 'font-semibold' : '' // Style for selected multi items (less prominent background)\n                  }`}\n                onPointerDown={(event) => handleOptionPointerDown(event, option)}\n                onPointerUp={(event) => handleOptionPointerUp(event, option)}\n                onPointerCancel={handleOptionPointerCancel}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }}\n                onMouseEnter={() => setHighlightedIndex(index)} // Highlight on hover\n                role=\"option\" // ARIA role\n                aria-selected={selectedValuesArray.includes(option.value)}\n              >\n                {/* Optional: Add a checkmark or similar for selected items, especially in multi-select */}\n                {option.label}\n              </li>\n            ))\n          ) : (\n            <li className=\"p-2 text-base-content/60 italic\">\n              No options available\n            </li>\n          )}\n        </ul>,\n        document.body,\n      )}\n    </div>\n  );\n};\n\nexport default Select; "],"mappings":"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"}

package/dist/components/SidebarToggleButton/index.js

@@ -1,63 +1,60 @@
 import "react";
-import { Fragment as a, jsx as r, jsxs as i } from "react/jsx-runtime";
-var s = ({ isCollapsed: o, onToggle: t, sidebarWidth: e, collapsedWidth: n = 64 }) => /* @__PURE__ */ r("div", {
-  className: "bg-opacity-20",
-  children: /* @__PURE__ */ r("button", {
-    onClick: t,
-    className: "fixed top-1/2 -translate-y-1/2 z-50 bg-success opacity-60 hover:opacity-90 text-primary-content rounded-full p-1.5 sm:p-2.5 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 lg:flex md:flex hidden",
-    style: {
-      left: o ? `${n - 24}px` : `${e - 24}px`,
-      transform: "translateY(-50%)",
-      boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)"
-    },
-    "aria-label": o ? "展开侧边栏" : "收起侧边栏",
-    children: /* @__PURE__ */ r("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      className: "w-4 h-4 sm:w-5 sm:h-5 transition-transform duration-300",
-      style: { transform: o ? "rotate(180deg)" : "rotate(0deg)" },
-      children: /* @__PURE__ */ r("path", {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2",
-        d: "M15 19l-7-7 7-7"
-      })
-    })
-  })
-}), l = ({ isCollapsed: o, onToggle: t }) => /* @__PURE__ */ r("button", {
-  onClick: t,
-  className: "fixed bottom-6 right-6 z-50 bg-primary bg-opacity-30 hover:bg-opacity-50 text-primary-content rounded-full p-3 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-105 md:hidden",
-  style: { boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)" },
-  "aria-label": o ? "展开侧边栏" : "收起侧边栏",
-  children: /* @__PURE__ */ r("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    className: "w-5 h-5",
-    children: o ? /* @__PURE__ */ r("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2",
-      d: "M4 6h16M4 12h16M4 18h16"
-    }) : /* @__PURE__ */ r("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2",
-      d: "M6 18L18 6M6 6l12 12"
-    })
-  })
-}), g = (o) => /* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(s, { ...o }), /* @__PURE__ */ r(l, {
-  isCollapsed: o.isCollapsed,
-  onToggle: o.onToggle
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/SidebarToggleButton/index.tsx
+var r = ({ isCollapsed: e, onToggle: n, sidebarWidth: r, collapsedWidth: i = 64 }) => /* @__PURE__ */ t("div", {
+	className: "bg-opacity-20",
+	children: /* @__PURE__ */ t("button", {
+		onClick: n,
+		className: "fixed top-1/2 -translate-y-1/2 z-50 bg-success opacity-60 hover:opacity-90 text-primary-content rounded-full p-1.5 sm:p-2.5 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 lg:flex md:flex hidden",
+		style: {
+			left: e ? `${i - 24}px` : `${r - 24}px`,
+			transform: "translateY(-50%)",
+			boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)"
+		},
+		"aria-label": e ? "展开侧边栏" : "收起侧边栏",
+		children: /* @__PURE__ */ t("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			stroke: "currentColor",
+			className: "w-4 h-4 sm:w-5 sm:h-5 transition-transform duration-300",
+			style: { transform: e ? "rotate(180deg)" : "rotate(0deg)" },
+			children: /* @__PURE__ */ t("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				d: "M15 19l-7-7 7-7"
+			})
+		})
+	})
+}), i = ({ isCollapsed: e, onToggle: n }) => /* @__PURE__ */ t("button", {
+	onClick: n,
+	className: "fixed bottom-6 right-6 z-50 bg-primary bg-opacity-30 hover:bg-opacity-50 text-primary-content rounded-full p-3 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-105 md:hidden",
+	style: { boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)" },
+	"aria-label": e ? "展开侧边栏" : "收起侧边栏",
+	children: /* @__PURE__ */ t("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		stroke: "currentColor",
+		className: "w-5 h-5",
+		children: e ? /* @__PURE__ */ t("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			d: "M4 6h16M4 12h16M4 18h16"
+		}) : /* @__PURE__ */ t("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			d: "M6 18L18 6M6 6l12 12"
+		})
+	})
+}), a = (a) => /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(r, { ...a }), /* @__PURE__ */ t(i, {
+	isCollapsed: a.isCollapsed,
+	onToggle: a.onToggle
 })] });
-export {
-  s as DesktopSidebarToggleButton,
-  l as MobileSidebarToggleButton,
-  g as SidebarToggleButtons,
-  g as default
-};
+//#endregion
+export { r as DesktopSidebarToggleButton, i as MobileSidebarToggleButton, a as SidebarToggleButtons, a as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/SidebarToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SidebarToggleButton/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface SidebarToggleButtonProps {\n  /** 侧边栏是否折叠 */\n  isCollapsed: boolean;\n  /** 切换侧边栏的回调 */\n  onToggle: () => void;\n  /** 当前侧边栏宽度 */\n  sidebarWidth: number;\n  /** 折叠时的宽度 */\n  collapsedWidth?: number;\n}\n\n/**\n * 桌面端悬浮侧边栏切换按钮\n */\nexport const DesktopSidebarToggleButton: React.FC<SidebarToggleButtonProps> = ({\n  isCollapsed,\n  onToggle,\n  sidebarWidth,\n  collapsedWidth = 64,\n}) => {\n  return (\n    <div className=\"bg-opacity-20\">\n      <button\n        onClick={onToggle}\n        className=\"fixed top-1/2 -translate-y-1/2 z-50 bg-success opacity-60 hover:opacity-90 text-primary-content rounded-full p-1.5 sm:p-2.5 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 lg:flex md:flex hidden\"\n        style={{\n          left: isCollapsed ? `${collapsedWidth - 24}px` : `${sidebarWidth - 24}px`,\n          transform: 'translateY(-50%)',\n          boxShadow: '0 4px 15px rgba(0, 0, 0, 0.1)',\n        }}\n        aria-label={isCollapsed ? '展开侧边栏' : '收起侧边栏'}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          className=\"w-4 h-4 sm:w-5 sm:h-5 transition-transform duration-300\"\n          style={{\n            transform: isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)',\n          }}\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n    </div>\n  );\n};\n\n/**\n * 移动端悬浮侧边栏切换按钮\n */\nexport const MobileSidebarToggleButton: React.FC<Pick<SidebarToggleButtonProps, 'isCollapsed' | 'onToggle'>> = ({\n  isCollapsed,\n  onToggle,\n}) => {\n  return (\n    <button\n      onClick={onToggle}\n      className=\"fixed bottom-6 right-6 z-50 bg-primary bg-opacity-30 hover:bg-opacity-50 text-primary-content rounded-full p-3 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-105 md:hidden\"\n      style={{\n        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',\n      }}\n      aria-label={isCollapsed ? '展开侧边栏' : '收起侧边栏'}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        className=\"w-5 h-5\"\n      >\n        {isCollapsed ? (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n        ) : (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n        )}\n      </svg>\n    </button>\n  );\n};\n\n/**\n * 组合的侧边栏切换按钮（包含桌面端和移动端）\n */\nexport const SidebarToggleButtons: React.FC<SidebarToggleButtonProps> = (props) => {\n  return (\n    <>\n      <DesktopSidebarToggleButton {...props} />\n      <MobileSidebarToggleButton isCollapsed={props.isCollapsed} onToggle={props.onToggle} />\n    </>\n  );\n};\n\nexport default SidebarToggleButtons;\n\n"],"mappings":";;AAgBA,IAAa,IAAA,CAAkE,EAC7E,aAAA,GACA,UAAA,GACA,cAAA,GACA,gBAAA,IAAiB,GAAA,MAGf,gBAAA,EAAC,OAAD;AAAA,EAAK,WAAU;AAAA,YACb,gBAAA,EAAC,UAAD;AAAA,IACE,SAAS;AAAA,IACT,WAAU;AAAA,IACV,OAAO;AAAA,MACL,MAAM,IAAc,GAAG,IAAiB,EAAA,OAAS,GAAG,IAAe,EAAA;AAAA,MACnE,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,IACA,cAAY,IAAc,UAAU;AAAA,cAEpC,gBAAA,EAAC,OAAD;AAAA,MACE,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,EACL,WAAW,IAAc,mBAAmB,eAC9C;AAAA,gBAEA,gBAAA,EAAC,QAAD;AAAA,QAAM,eAAc;AAAA,QAAQ,gBAAe;AAAA,QAAQ,aAAY;AAAA,QAAI,GAAE;AAAA,MAAmB,CAAA;AAAA,IACrF,CAAA;AAAA,EACC,CAAA;AACL,CAAA,GAOI,IAAA,CAAmG,EAC9G,aAAA,GACA,UAAA,EAAA,MAGE,gBAAA,EAAC,UAAD;AAAA,EACE,SAAS;AAAA,EACT,WAAU;AAAA,EACV,OAAO,EACL,WAAW,iCACb;AAAA,EACA,cAAY,IAAc,UAAU;AAAA,YAEpC,gBAAA,EAAC,OAAD;AAAA,IACE,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAU;AAAA,cAET,IACC,gBAAA,EAAC,QAAD;AAAA,MAAM,eAAc;AAAA,MAAQ,gBAAe;AAAA,MAAQ,aAAY;AAAA,MAAI,GAAE;AAAA,IAA2B,CAAA,IAEhG,gBAAA,EAAC,QAAD;AAAA,MAAM,eAAc;AAAA,MAAQ,gBAAe;AAAA,MAAQ,aAAY;AAAA,MAAI,GAAE;AAAA,IAAwB,CAAA;AAAA,EAE5F,CAAA;AACC,CAAA,GAOC,IAAA,CAA4D,MAErE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAA4B,GAAI,EAAQ,CAAA,GACxC,gBAAA,EAAC,GAAD;AAAA,EAA2B,aAAa,EAAM;AAAA,EAAa,UAAU,EAAM;AAAW,CAAA,CACtF,EAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SidebarToggleButton/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface SidebarToggleButtonProps {\n  /** 侧边栏是否折叠 */\n  isCollapsed: boolean;\n  /** 切换侧边栏的回调 */\n  onToggle: () => void;\n  /** 当前侧边栏宽度 */\n  sidebarWidth: number;\n  /** 折叠时的宽度 */\n  collapsedWidth?: number;\n}\n\n/**\n * 桌面端悬浮侧边栏切换按钮\n */\nexport const DesktopSidebarToggleButton: React.FC<SidebarToggleButtonProps> = ({\n  isCollapsed,\n  onToggle,\n  sidebarWidth,\n  collapsedWidth = 64,\n}) => {\n  return (\n    <div className=\"bg-opacity-20\">\n      <button\n        onClick={onToggle}\n        className=\"fixed top-1/2 -translate-y-1/2 z-50 bg-success opacity-60 hover:opacity-90 text-primary-content rounded-full p-1.5 sm:p-2.5 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 lg:flex md:flex hidden\"\n        style={{\n          left: isCollapsed ? `${collapsedWidth - 24}px` : `${sidebarWidth - 24}px`,\n          transform: 'translateY(-50%)',\n          boxShadow: '0 4px 15px rgba(0, 0, 0, 0.1)',\n        }}\n        aria-label={isCollapsed ? '展开侧边栏' : '收起侧边栏'}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          className=\"w-4 h-4 sm:w-5 sm:h-5 transition-transform duration-300\"\n          style={{\n            transform: isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)',\n          }}\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n    </div>\n  );\n};\n\n/**\n * 移动端悬浮侧边栏切换按钮\n */\nexport const MobileSidebarToggleButton: React.FC<Pick<SidebarToggleButtonProps, 'isCollapsed' | 'onToggle'>> = ({\n  isCollapsed,\n  onToggle,\n}) => {\n  return (\n    <button\n      onClick={onToggle}\n      className=\"fixed bottom-6 right-6 z-50 bg-primary bg-opacity-30 hover:bg-opacity-50 text-primary-content rounded-full p-3 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-105 md:hidden\"\n      style={{\n        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',\n      }}\n      aria-label={isCollapsed ? '展开侧边栏' : '收起侧边栏'}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        className=\"w-5 h-5\"\n      >\n        {isCollapsed ? (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n        ) : (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n        )}\n      </svg>\n    </button>\n  );\n};\n\n/**\n * 组合的侧边栏切换按钮（包含桌面端和移动端）\n */\nexport const SidebarToggleButtons: React.FC<SidebarToggleButtonProps> = (props) => {\n  return (\n    <>\n      <DesktopSidebarToggleButton {...props} />\n      <MobileSidebarToggleButton isCollapsed={props.isCollapsed} onToggle={props.onToggle} />\n    </>\n  );\n};\n\nexport default SidebarToggleButtons;\n\n"],"mappings":";;;AAgBA,IAAa,KAAkE,EAC7E,gBACA,aACA,iBACA,oBAAiB,SAGf,kBAAC,OAAD;CAAK,WAAU;CACb,UAAA,kBAAC,UAAD;EACE,SAAS;EACT,WAAU;EACV,OAAO;GACL,MAAM,IAAc,GAAG,IAAiB,GAAG,MAAM,GAAG,IAAe,GAAG;GACtE,WAAW;GACX,WAAW;EACb;EACA,cAAY,IAAc,UAAU;EAEpC,UAAA,kBAAC,OAAD;GACE,OAAM;GACN,MAAK;GACL,SAAQ;GACR,QAAO;GACP,WAAU;GACV,OAAO,EACL,WAAW,IAAc,mBAAmB,eAC9C;GAEA,UAAA,kBAAC,QAAD;IAAM,eAAc;IAAQ,gBAAe;IAAQ,aAAY;IAAI,GAAE;GAAmB,CAAA;EACrF,CAAA;CACC,CAAA;AACL,CAAA,GAOI,KAAmG,EAC9G,gBACA,kBAGE,kBAAC,UAAD;CACE,SAAS;CACT,WAAU;CACV,OAAO,EACL,WAAW,iCACb;CACA,cAAY,IAAc,UAAU;CAEpC,UAAA,kBAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,SAAQ;EACR,QAAO;EACP,WAAU;EAET,UAAA,IACC,kBAAC,QAAD;GAAM,eAAc;GAAQ,gBAAe;GAAQ,aAAY;GAAI,GAAE;EAA2B,CAAA,IAEhG,kBAAC,QAAD;GAAM,eAAc;GAAQ,gBAAe;GAAQ,aAAY;GAAI,GAAE;EAAwB,CAAA;CAE5F,CAAA;AACC,CAAA,GAOC,KAA4D,MAErE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAA4B,GAAI,EAAQ,CAAA,GACxC,kBAAC,GAAD;CAA2B,aAAa,EAAM;CAAa,UAAU,EAAM;AAAW,CAAA,CACtF,EAAA,CAAA"}

package/dist/components/Slider/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export type SliderVariant = 'default' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+export type SliderSize = 'xs' | 'sm' | 'md' | 'lg';
+export type SliderProps = {
+    /** Controlled value. */
+    value?: number;
+    /** Uncontrolled initial value. */
+    defaultValue?: number;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. */
+    step?: number;
+    /** Change handler with the numeric value. */
+    onChange?: (value: number, e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Optional label rendered above the track. */
+    label?: React.ReactNode;
+    /** Show the current value next to the label. */
+    showValue?: boolean;
+    /** Color variant (daisyUI). */
+    variant?: SliderVariant;
+    /** Size (daisyUI). */
+    size?: SliderSize;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Native name attribute. */
+    name?: string;
+    /** Extra class names on the wrapper. */
+    className?: string;
+    /** Inline styles on the wrapper. */
+    style?: React.CSSProperties;
+};
+/**
+ * Slider —— A2UI 交互组件：滑动选择器（基于原生 range + daisyUI range）。
+ * 支持受控 / 非受控、语义色、尺寸与当前值展示。
+ */
+declare const Slider: React.FC<SliderProps>;
+export default Slider;

package/dist/components/Slider/index.js

@@ -0,0 +1,52 @@
+import { cn as e } from "../../utils/cn.js";
+import { useCallback as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Slider/index.tsx
+var a = {
+	default: "",
+	primary: "range-primary",
+	secondary: "range-secondary",
+	accent: "range-accent",
+	info: "range-info",
+	success: "range-success",
+	warning: "range-warning",
+	error: "range-error"
+}, o = {
+	xs: "range-xs",
+	sm: "range-sm",
+	md: "range-md",
+	lg: "range-lg"
+}, s = ({ value: s, defaultValue: c, min: l = 0, max: u = 100, step: d = 1, onChange: f, label: p, showValue: m = !1, variant: h = "default", size: g = "sm", disabled: _ = !1, name: v, className: y = "", style: b }) => {
+	let [x, S] = n(c ?? l), C = s !== void 0, w = C ? s : x, T = t((e) => {
+		let t = Number(e.target.value);
+		C || S(t), f?.(t, e);
+	}, [C, f]);
+	return /* @__PURE__ */ i("div", {
+		className: e("w-full", y),
+		style: b,
+		children: [(p !== void 0 || m) && /* @__PURE__ */ i("div", {
+			className: "mb-1 flex items-center justify-between",
+			children: [p !== void 0 && /* @__PURE__ */ r("label", {
+				className: "label-text text-sm text-base-content/80",
+				children: p
+			}), m && /* @__PURE__ */ r("span", {
+				className: "text-xs font-mono text-base-content/60",
+				children: w
+			})]
+		}), /* @__PURE__ */ r("input", {
+			type: "range",
+			className: e("range", a[h], o[g]),
+			...C ? { value: w } : { defaultValue: c ?? l },
+			min: l,
+			max: u,
+			step: d,
+			disabled: _,
+			name: v,
+			onChange: T
+		})]
+	});
+};
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Slider/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type SliderVariant =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport type SliderSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type SliderProps = {\n  /** Controlled value. */\n  value?: number;\n  /** Uncontrolled initial value. */\n  defaultValue?: number;\n  /** Minimum value. */\n  min?: number;\n  /** Maximum value. */\n  max?: number;\n  /** Step increment. */\n  step?: number;\n  /** Change handler with the numeric value. */\n  onChange?: (value: number, e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Optional label rendered above the track. */\n  label?: React.ReactNode;\n  /** Show the current value next to the label. */\n  showValue?: boolean;\n  /** Color variant (daisyUI). */\n  variant?: SliderVariant;\n  /** Size (daisyUI). */\n  size?: SliderSize;\n  /** Disabled state. */\n  disabled?: boolean;\n  /** Native name attribute. */\n  name?: string;\n  /** Extra class names on the wrapper. */\n  className?: string;\n  /** Inline styles on the wrapper. */\n  style?: React.CSSProperties;\n};\n\nconst VARIANT_CLASS: Record<SliderVariant, string> = {\n  default: '',\n  primary: 'range-primary',\n  secondary: 'range-secondary',\n  accent: 'range-accent',\n  info: 'range-info',\n  success: 'range-success',\n  warning: 'range-warning',\n  error: 'range-error',\n};\n\nconst SIZE_CLASS: Record<SliderSize, string> = {\n  xs: 'range-xs',\n  sm: 'range-sm',\n  md: 'range-md',\n  lg: 'range-lg',\n};\n\n/**\n * Slider —— A2UI 交互组件：滑动选择器（基于原生 range + daisyUI range）。\n * 支持受控 / 非受控、语义色、尺寸与当前值展示。\n */\nconst Slider: React.FC<SliderProps> = ({\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  onChange,\n  label,\n  showValue = false,\n  variant = 'default',\n  size = 'sm',\n  disabled = false,\n  name,\n  className = '',\n  style,\n}) => {\n  const [internal, setInternal] = useState<number>(defaultValue ?? min);\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : internal;\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const next = Number(e.target.value);\n      if (!isControlled) setInternal(next);\n      onChange?.(next, e);\n    },\n    [isControlled, onChange],\n  );\n\n  return (\n    <div className={cn('w-full', className)} style={style}>\n      {(label !== undefined || showValue) && (\n        <div className=\"mb-1 flex items-center justify-between\">\n          {label !== undefined && (\n            <label className=\"label-text text-sm text-base-content/80\">{label}</label>\n          )}\n          {showValue && (\n            <span className=\"text-xs font-mono text-base-content/60\">{current}</span>\n          )}\n        </div>\n      )}\n      <input\n        type=\"range\"\n        className={cn('range', VARIANT_CLASS[variant], SIZE_CLASS[size])}\n        {...(isControlled\n          ? { value: current }\n          : { defaultValue: defaultValue ?? min })}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        name={name}\n        onChange={handleChange}\n      />\n    </div>\n  );\n};\n\nexport default Slider;\n"],"mappings":";;;;AA8CA,IAAM,IAA+C;CACnD,SAAS;CACT,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAEM,IAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAMM,KAAiC,EACrC,UACA,iBACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,aACA,UACA,eAAY,IACZ,aAAU,WACV,UAAO,MACP,cAAW,IACX,SACA,eAAY,IACZ,eACI;CACJ,IAAM,CAAC,GAAU,KAAe,EAAiB,KAAgB,CAAG,GAC9D,IAAe,MAAU,KAAA,GACzB,IAAU,IAAe,IAAQ,GAEjC,IAAe,GAClB,MAA2C;EAC1C,IAAM,IAAO,OAAO,EAAE,OAAO,KAAK;EAElC,AADK,KAAc,EAAY,CAAI,GACnC,IAAW,GAAM,CAAC;CACpB,GACA,CAAC,GAAc,CAAQ,CACzB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,CAAS;EAAU;EAAhD,UAAA,EACI,MAAU,KAAA,KAAa,MACvB,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,MAAU,KAAA,KACT,kBAAC,SAAD;IAAO,WAAU;IAA2C,UAAA;GAAa,CAAA,GAE1E,KACC,kBAAC,QAAD;IAAM,WAAU;IAA0C,UAAA;GAAc,CAAA,CAEvE;EAEP,CAAA,GAAA,kBAAC,SAAD;GACE,MAAK;GACL,WAAW,EAAG,SAAS,EAAc,IAAU,EAAW,EAAK;GAC/D,GAAK,IACD,EAAE,OAAO,EAAQ,IACjB,EAAE,cAAc,KAAgB,EAAI;GACnC;GACA;GACC;GACI;GACJ;GACN,UAAU;EACX,CAAA,CACE;;AAET"}

package/dist/components/StatCard/index.d.ts

@@ -6,6 +6,8 @@ export type StatCardProps = {
     value: React.ReactNode;
     /** 右上角图标 */
     icon?: React.ReactNode;
+    /** 图标位置：`top`（默认，图标在右上角）/ `left`（图标在左，文字居右） */
+    iconPosition?: 'top' | 'left';
     /** 色调（影响图标底色与文字色） */
     tone?: 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';
     /** 值下方的小字说明 */
@@ -13,10 +15,38 @@ export type StatCardProps = {
     /** 加载态：值显示为骨架 */
     loading?: boolean;
     className?: string;
+    /**
+     * 启用统计面板样式：标签在上、超大数值居中、可选迷你图与角标三角，
+     * 对应 Grafana 的 stat panel 外观。
+     */
+    panel?: boolean;
+    /** 数值单位后缀（如 `K`、`%`），以小号字体渲染在数值右侧。 */
+    unit?: React.ReactNode;
+    /** 面板数值字号（panel 模式），默认 `xl`。 */
+    valueSize?: 'md' | 'lg' | 'xl' | '2xl';
+    /** 面板内容对齐（panel 模式），默认 `left`。 */
+    align?: 'left' | 'center';
+    /** 直接传入迷你图节点（优先于 sparklineData）。 */
+    sparkline?: React.ReactNode;
+    /** 迷你图数据：传入数值数组后自动渲染 sparkline。 */
+    sparklineData?: number[];
+    /** 迷你图类型：折线 / 面积 / 柱状。 */
+    sparklineType?: 'line' | 'area' | 'bar';
+    /** 迷你图高度（px）。 */
+    sparklineHeight?: number;
+    /** 右上角状态三角（Grafana 阈值指示）。 */
+    indicator?: boolean;
+    /** 整卡填充 tone 底色、文字用对应 content 色（图 RabbitMQ 风格）。 */
+    filled?: boolean;
+    /** 点击回调（面板常用于跳转详情）。 */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 /**
  * 统计卡片：仪表盘等场景的「标签 + 数值 + 图标」小卡。
  * 内部基于 Card 组件，默认紧凑内边距与小号字体。
+ *
+ * 传入 `panel` 后切换为 Grafana 风格统计面板：
+ * 大号数值、单位后缀、迷你折线/面积/柱状图、角标三角与整卡填充色。
  */
-declare const StatCard: ({ label, value, icon, tone, hint, loading, className, }: StatCardProps) => React.JSX.Element;
+declare const StatCard: ({ label, value, icon, iconPosition, tone, hint, loading, className, panel, unit, valueSize, align, sparkline, sparklineData, sparklineType, sparklineHeight, indicator, filled, onClick, }: StatCardProps) => React.JSX.Element;
 export default StatCard;