@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/Select.tokens.js

@@ -0,0 +1,99 @@
+/**
+ * Select — TOKEN_MAP（供平台属性面板展示）
+ */
+export const SELECT_TOKEN_MAP = {
+  base: [],
+  已选文字: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+  ],
+  占位符: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+  ],
+  触发器: [
+    { label: '触发器宽度', cssProp: 'width', value: 'w-full min-w-0（随父级；示意 300px 时外包 w-[300px]）' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '悬浮边框', cssProp: 'border-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'hover' },
+    { label: '展开边框', cssProp: 'border-color', token: '--color-primary', value: '#56D3BC', semanticRef: 'status-primary', state: 'open' },
+    { label: '错态背景', cssProp: 'background', token: '--color-red-50', value: '#FEF2F1', semanticRef: 'status-danger', state: 'error' },
+    { label: '错态悬浮', cssProp: 'background', token: '--color-red-100', value: '#FCD9D7', state: 'error+hover' },
+    { label: '错态展开', cssProp: 'border-color', token: '--color-red-500', value: '#F74331', semanticRef: 'status-danger', state: 'error+open' },
+    { label: '禁用背景', cssProp: 'background', token: '--color-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled', state: 'disabled' },
+    { label: '透明度', cssProp: 'opacity', value: '0.6', state: 'disabled' },
+  ],
+  标签选择: [
+    { label: '分类归属', cssProp: 'mode', value: 'tag 属于 Select 的标签选择分类' },
+    { label: '已选标签', cssProp: 'component', value: 'Tag，默认规格与 TagInput 保持一致；可按 option.variant 覆盖颜色' },
+    { label: '折叠项', cssProp: 'component', value: 'Tag children="+N"，沿用 TagInput 默认规格，宽度不足时显示' },
+    { label: '更多浮窗', cssProp: 'component', value: 'Tooltip tone=light，仅展示被折叠的标签' },
+    { label: '标签间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '下拉项高度', cssProp: 'min-height', token: '--size-control-md', value: '36px' },
+    { label: '下拉项内容', cssProp: 'component', value: 'Tag' },
+  ],
+  下拉箭头: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '尺寸', cssProp: 'width / height', value: '16px' },
+  ],
+  清除按钮: [
+    { label: '尺寸', cssProp: 'width / height', value: '16px' },
+    { label: '常态色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled' },
+    { label: '悬停色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', state: 'hover', semanticRef: 'text-secondary' },
+  ],
+  AI推荐列表: [
+    { label: '上间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '列表圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '列表内边距', cssProp: 'padding', token: '--spacing-1', value: '4px' },
+    { label: '条目间距', cssProp: 'gap', token: '--spacing-0_5', value: '2px' },
+    { label: '列表背景', cssProp: 'background', token: '--gradient-ai-fill-1', value: 'linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%)' },
+    { label: '条目圆角', cssProp: 'border-radius', token: '--radius-sm', value: '6px' },
+    { label: '条目横向内边距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px' },
+    { label: '条目纵向内边距', cssProp: 'padding-block', token: '--spacing-1', value: '4px' },
+    { label: 'Hover 背景', cssProp: 'background', token: '--gradient-ai-fill-2', value: 'linear-gradient(-45deg, rgba(254, 224, 253, 1) 0%, rgba(233, 218, 255, 1) 25%, rgba(213, 225, 255, 1) 48%, rgba(213, 243, 248, 1) 83%, rgba(213, 247, 242, 1) 100%)', state: 'hover' },
+    { label: '文字颜色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+  ],
+  刷新推荐按钮: [
+    { label: '图标尺寸', cssProp: 'width / height', token: '--spacing-4', value: '16px' },
+    { label: '图标颜色', cssProp: 'background-image', token: '--gradient-ai-fill-3', value: 'linear-gradient(-45deg, rgba(255, 153, 248, 1) 0%, rgba(181, 131, 255, 1) 25%, rgba(114, 156, 255, 1) 48%, rgba(117, 218, 231, 1) 83%, rgba(115, 230, 204, 1) 100%)', semanticRef: 'ai-fill-3' },
+  ],
+  下拉面板: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '最大高度', cssProp: 'max-height', value: '240px' },
+    { label: '阴影', cssProp: 'box-shadow', value: 'shadow-lg（与 Modal / TimePicker 浮层一致）' },
+    { label: '竖向内距', cssProp: 'padding-block', token: '--spacing-1', value: '4px' },
+  ],
+  选项: [
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '左右内距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px' },
+    { label: '上下内距', cssProp: 'padding-block', token: '--spacing-2', value: '8px' },
+    { label: '悬浮背景', cssProp: 'background', token: '--color-blueGrey-50', value: '#FCFCFD', state: 'hover' },
+    { label: '选中背景', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', semanticRef: 'status-primary.bg', state: 'active' },
+    { label: '选中文字', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary', state: 'active' },
+    { label: '禁用文字', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled', state: 'disabled' },
+    { label: '透明度', cssProp: 'opacity', value: '0.5', state: 'disabled' },
+  ],
+  空文案: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+  ],
+  sizes: {
+    sm: [
+      { label: '最小高度', cssProp: 'min-height', value: '24px' },
+      { label: '水平内距', cssProp: 'padding-inline', token: '--spacing-2', value: '8px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+      { label: '元素间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+    md: [
+      { label: '最小高度', cssProp: 'min-height', value: '36px' },
+      { label: '水平内距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    ],
+  },
+};

package/src/_b_end_runtime/components/Sheet.jsx

@@ -0,0 +1,132 @@
+import { useId } from 'react';
+import { X } from 'lucide-react';
+import Button from './Button';
+
+/* ── 尺寸 → 面板宽度 ── */
+const SIZE_CLASS = {
+  sm: 'w-[400px]',
+  md: 'w-[560px]',
+  lg: 'w-[800px]',
+};
+
+/* ── 面板容器 ── */
+const PANEL = [
+  'flex flex-col items-stretch',
+  'bg-surface h-full px-6',
+  'shadow-xl',
+].join(' ');
+
+/* ── 头部 / 内容 / 底部 ── */
+const HEADER = 'flex shrink-0 w-full items-start justify-between gap-2 py-6';
+const TITLE = 'm-0 text-lg [font-weight:var(--font-semibold)] leading-6 text-foreground';
+const SUBTITLE = 'm-0 text-sm font-normal leading-6 text-foreground-muted';
+
+const BODY = 'flex-1 min-h-0 w-full overflow-y-auto';
+
+const FOOTER = 'flex shrink-0 w-full flex-col py-6';
+const FOOTER_ROW =
+  'flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2';
+const FOOTER_HINT =
+  'm-0 min-w-[7.5rem] flex-1 text-xs font-normal leading-4 text-foreground-secondary';
+const ACTIONS = 'flex shrink-0 items-center justify-end gap-3';
+
+/**
+ * Sheet — 侧边抽屉面板（仅面板本体，遮罩与滑入动画由外层处理）
+ * @prop {'sm'|'md'|'lg'} [size='md'] — 宽度档位
+ * @prop {boolean} [showFooterHint=true] — 是否显示底部提示
+ * @prop {string} [title='侧边标题'] — 标题
+ * @prop {string|null} [subtitle='侧边副标题'] — 副标题，为 null 时不展示
+ * @prop {string} [footerHint='提示信息'] — 底部提示文案
+ * @prop {string} [cancelText='取消'] — 取消按钮文案
+ * @prop {string} [confirmText='确定'] — 确定按钮文案
+ * @prop {function} [onClose=null] — 关闭回调，传入才显示关闭按钮
+ * @prop {function} [onCancel=null] — 取消回调，传入才显示取消按钮
+ * @prop {function} [onConfirm=null] — 确定回调，传入才显示确定按钮
+ * @prop {ReactNode} [footer=null] — 自定义底栏，传入则替换默认底栏
+ * @prop {string} [className=''] — 附加类名
+ * @prop {object} [style] — 内联样式
+ */
+export default function Sheet({
+  size = 'md',
+  title = '侧边标题',
+  subtitle = '侧边副标题',
+  children,
+  showFooterHint = true,
+  footerHint = '提示信息',
+  cancelText = '取消',
+  confirmText = '确定',
+  onCancel,
+  onConfirm,
+  onClose,
+  footer,
+  className = '',
+  style,
+}) {
+  const uid = useId();
+  const titleId = `${uid}-title`;
+  const subtitleId = `${uid}-subtitle`;
+
+  return (
+    <div
+      className={[`tfds-sheet`, [PANEL, SIZE_CLASS[size], className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
+      style={style}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      {...(subtitle ? { 'aria-describedby': subtitleId } : {})}
+     data-tfds-component="Sheet">
+      <header className={HEADER}>
+        <div className="flex min-w-0 flex-1 flex-col items-start gap-0">
+          <h2 id={titleId} className={TITLE}>
+            {title}
+          </h2>
+          {subtitle ? (
+            <p id={subtitleId} className={SUBTITLE}>
+              {subtitle}
+            </p>
+          ) : null}
+        </div>
+        {onClose ? (
+          <Button
+            type="button"
+            variant="ghost-black"
+            size="sm"
+            icon={<X size={16} strokeWidth={2} />}
+            iconOnly
+            onClick={onClose}
+            aria-label="关闭"
+            className="shrink-0"
+          />
+        ) : null}
+      </header>
+
+      <div className={BODY}>{children}</div>
+
+      {footer != null ? (
+        <div className={FOOTER}>{footer}</div>
+      ) : (
+        <footer className={FOOTER}>
+          <div className={FOOTER_ROW}>
+            {showFooterHint && footerHint ? (
+              <p className={FOOTER_HINT}>{footerHint}</p>
+            ) : (
+              <span className="min-w-0 flex-1" />
+            )}
+            <div className={ACTIONS}>
+              {onCancel ? (
+                <Button type="button" variant="outline-black" size="md" onClick={onCancel}>
+                  {cancelText}
+                </Button>
+              ) : null}
+              {onConfirm ? (
+                <Button type="button" variant="primary" size="md" onClick={onConfirm}>
+                  {confirmText}
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        </footer>
+      )}
+    </div>
+  );
+}

package/src/_b_end_runtime/components/Sheet.tokens.js

@@ -0,0 +1,61 @@
+/**
+ * Sheet — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 分组顺序：文本元素 → 容器区域 → 尺寸 → 引用组件
+ * 大标题 → 描述文案 → 底部提示 → 标题栏 → 内容区 → 操作栏 → 面板 → sizes → 引用组件
+ */
+export const SHEET_TOKEN_MAP = {
+  base: [],
+  大标题: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-lg', value: '18px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '行高', cssProp: 'line-height', token: '--spacing-6', value: '24px' },
+  ],
+  描述文案: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', token: '--spacing-6', value: '24px' },
+  ],
+  底部提示: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', token: '--spacing-4', value: '16px' },
+  ],
+  标题栏: [
+    { label: '上下间距', cssProp: 'padding-block', token: '--spacing-6', value: '24px' },
+    { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+  ],
+  内容区: [
+    { label: '溢出滚动', cssProp: 'overflow-y', value: 'auto' },
+  ],
+  操作栏: [
+    { label: '上下间距', cssProp: 'padding-block', token: '--spacing-6', value: '24px' },
+    { label: '按钮间距', cssProp: 'gap', token: '--spacing-3', value: '12px' },
+    { label: '行间距', cssProp: 'gap', token: '--spacing-6', value: '24px' },
+  ],
+  面板: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '投影', cssProp: 'box-shadow', token: '--shadow-xl', value: '0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)' },
+    { label: '左右间距', cssProp: 'padding-inline', token: '--spacing-6', value: '24px' },
+    { label: '高度', cssProp: 'height', value: '100%' },
+  ],
+  sizes: {
+    sm: [
+      { label: '宽度', cssProp: 'width', value: '400px' },
+    ],
+    md: [
+      { label: '宽度', cssProp: 'width', value: '560px' },
+    ],
+    lg: [
+      { label: '宽度', cssProp: 'width', value: '800px' },
+    ],
+  },
+  引用组件: [
+    { label: '关闭按钮', cssProp: '—', value: 'Button ghost-black sm iconOnly' },
+    { label: '取消按钮', cssProp: '—', value: 'Button outline-black md' },
+    { label: '确定按钮', cssProp: '—', value: 'Button primary md' },
+  ],
+};

package/src/_b_end_runtime/components/Slider.jsx

@@ -0,0 +1,346 @@
+/**
+ * Slider — 滑动输入条
+ * @prop {number} [min=0] — 最小值
+ * @prop {number} [max=100] — 最大值
+ * @prop {number} [step=1] — 步长
+ * @prop {Array} value — 当前值（受控）
+ * @prop {Array} [defaultValue=[20,80]] — 默认值
+ * @prop {boolean} [disabled=false] — 是否禁用
+ * @prop {boolean} [showTooltip=true] — 是否在拖动时显示提示
+ * @prop {*} [marks=null] — 刻度标记
+ * @prop {function} [onChange=null] — 变化回调
+ * @prop {function} [onAfterChange=null] — 松手回调
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Tooltip from './Tooltip';
+
+/* ── 容器与轨道 ── */
+const WRAPPER_BASE = 'relative w-full min-w-0 max-w-full select-none';
+const TRACK_AREA = 'relative h-[32px]';
+const TRACK = 'absolute left-0 right-0 top-1/2 h-[4px] -translate-y-1/2 rounded-full bg-fill';
+const TRACK_ACTIVE = 'absolute top-1/2 h-[4px] -translate-y-1/2 rounded-full bg-brand-500';
+const TRACK_ACTIVE_DISABLED = 'absolute top-1/2 h-[4px] -translate-y-1/2 rounded-full bg-blueGrey-300';
+
+/* ── 滑块 ── */
+const HANDLE_BASE = [
+  'absolute top-1/2 -translate-x-1/2 -translate-y-1/2',
+  'inline-flex size-[20px] items-center justify-center rounded-full',
+  'border-2 shadow-[0_1px_2px_0_rgba(0,0,0,0.05)]',
+  'transition-[box-shadow,border-color,background-color] duration-120',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-200 focus-visible:ring-offset-1',
+].join(' ');
+
+const HANDLE_ENABLED = [
+  'bg-white border-border-brand',
+  'hover:border-border-brand-strong',
+  'active:border-brand-700',
+  'cursor-grab',
+].join(' ');
+
+const HANDLE_DRAGGING = 'cursor-grabbing shadow-[0_0_0_4px_rgba(86,211,188,0.15)]';
+
+const HANDLE_DISABLED = 'bg-blueGrey-300 border-blueGrey-300 cursor-not-allowed';
+
+/* ── 提示与刻度 ── */
+const TOOLTIP_TRIGGER = 'absolute inset-0';
+const MARK_DOT_BASE = 'block size-[4px] rounded-full';
+const MARK_LABEL = 'absolute left-1/2 top-full mt-[12px] -translate-x-1/2 text-[12px] leading-[18px] text-blueGrey-600 whitespace-nowrap';
+
+function clamp(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+
+function getPrecision(step) {
+  const text = String(step);
+  const dot = text.indexOf('.');
+  return dot === -1 ? 0 : text.length - dot - 1;
+}
+
+function snap(raw, min, max, step) {
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const precision = getPrecision(safeStep);
+  const base = Math.round(((raw - min) / safeStep)) * safeStep + min;
+  const rounded = Number(base.toFixed(precision));
+  return clamp(rounded, min, max);
+}
+
+function isSameValue(a, b) {
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+  return a.every((v, i) => v === b[i]);
+}
+
+function normalizeRaw(raw, isRange, min, max, step) {
+  if (isRange) {
+    const tuple = Array.isArray(raw) ? raw : [min, max];
+    let start = snap(Number(tuple[0]), min, max, step);
+    let end = snap(Number(tuple[1]), min, max, step);
+    if (!Number.isFinite(start)) start = min;
+    if (!Number.isFinite(end)) end = max;
+    if (start > end) [start, end] = [end, start];
+    return [start, end];
+  }
+  const single = Array.isArray(raw) ? raw[0] : raw;
+  const safe = Number.isFinite(Number(single)) ? Number(single) : min;
+  return [snap(safe, min, max, step)];
+}
+
+function valueToPercent(v, min, max) {
+  if (max <= min) return 0;
+  return ((v - min) / (max - min)) * 100;
+}
+
+export default function Slider({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue = [20, 80],
+  disabled = false,
+  showTooltip = true,
+  marks,
+  onChange,
+  onAfterChange,
+  ariaLabel,
+  ariaLabelStart,
+  ariaLabelEnd,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  className = '',
+  style,
+  ...rest
+}) {
+  const isControlled = value !== undefined;
+  const isRange = Array.isArray(isControlled ? value : defaultValue);
+
+  const normalize = useCallback(
+    (raw) => normalizeRaw(raw, isRange, min, max, step),
+    [isRange, min, max, step]
+  );
+
+  const [innerValue, setInnerValue] = useState(() => normalize(defaultValue));
+  const normalizedControlledValue = useMemo(() => (isControlled ? normalize(value) : null), [isControlled, normalize, value]);
+  const current = isControlled ? normalizedControlledValue : innerValue;
+
+  useEffect(() => {
+    if (!isControlled) setInnerValue(normalize(defaultValue));
+  }, [defaultValue, isControlled, normalize]);
+
+  const currentRef = useRef(current);
+  useEffect(() => {
+    currentRef.current = current;
+  }, [current]);
+
+  const trackRef = useRef(null);
+  const cleanupRef = useRef(null);
+  const [draggingIndex, setDraggingIndex] = useState(null);
+
+  const updateValue = useCallback((nextRaw, fireAfter = false) => {
+    const next = normalize(nextRaw);
+    if (isSameValue(next, currentRef.current)) {
+      if (fireAfter) {
+        const payload = isRange ? next : next[0];
+        onAfterChange?.(payload);
+      }
+      return next;
+    }
+
+    if (!isControlled) setInnerValue(next);
+    const payload = isRange ? next : next[0];
+    onChange?.(payload);
+    if (fireAfter) onAfterChange?.(payload);
+    return next;
+  }, [isControlled, isRange, normalize, onAfterChange, onChange]);
+
+  const valueFromClientX = useCallback((clientX) => {
+    const rect = trackRef.current?.getBoundingClientRect();
+    if (!rect || rect.width <= 0) return null;
+    const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+    const raw = min + ratio * (max - min);
+    return snap(raw, min, max, step);
+  }, [max, min, step]);
+
+  const applyAtIndex = useCallback((base, index, nextPoint, fireAfter = false) => {
+    if (nextPoint == null) return;
+
+    if (!isRange) {
+      updateValue([nextPoint], fireAfter);
+      return;
+    }
+
+    const next = [...base];
+    if (index === 0) next[0] = Math.min(nextPoint, next[1]);
+    else next[1] = Math.max(nextPoint, next[0]);
+    updateValue(next, fireAfter);
+  }, [isRange, updateValue]);
+
+  const clearListeners = useCallback(() => {
+    if (cleanupRef.current) cleanupRef.current();
+    cleanupRef.current = null;
+  }, []);
+
+  useEffect(() => () => clearListeners(), [clearListeners]);
+
+  const startDrag = useCallback((index, startEvent) => {
+    if (disabled) return;
+    startEvent.preventDefault();
+    startEvent.stopPropagation();
+    setDraggingIndex(index);
+
+    const onMove = (ev) => {
+      const nextPoint = valueFromClientX(ev.clientX);
+      applyAtIndex(currentRef.current, index, nextPoint, false);
+    };
+
+    const onUp = (ev) => {
+      const nextPoint = valueFromClientX(ev.clientX);
+      applyAtIndex(currentRef.current, index, nextPoint, true);
+      setDraggingIndex(null);
+      clearListeners();
+    };
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    cleanupRef.current = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+    };
+  }, [applyAtIndex, clearListeners, disabled, valueFromClientX]);
+
+  const onTrackPointerDown = useCallback((e) => {
+    if (disabled) return;
+    const point = valueFromClientX(e.clientX);
+    if (point == null) return;
+
+    if (!isRange) {
+      updateValue([point], true);
+      return;
+    }
+
+    const [start, end] = currentRef.current;
+    const pick = Math.abs(point - start) <= Math.abs(point - end) ? 0 : 1;
+    applyAtIndex(currentRef.current, pick, point, true);
+  }, [applyAtIndex, disabled, isRange, updateValue, valueFromClientX]);
+
+  const onHandleKeyDown = useCallback((index, val) => (e) => {
+    if (disabled) return;
+
+    let nextPoint = val;
+    const largeStep = step * 10;
+
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') nextPoint = val - step;
+    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') nextPoint = val + step;
+    else if (e.key === 'PageDown') nextPoint = val - largeStep;
+    else if (e.key === 'PageUp') nextPoint = val + largeStep;
+    else if (e.key === 'Home') nextPoint = min;
+    else if (e.key === 'End') nextPoint = max;
+    else return;
+
+    e.preventDefault();
+    applyAtIndex(currentRef.current, index, snap(nextPoint, min, max, step), true);
+  }, [applyAtIndex, disabled, max, min, step]);
+
+  const [startVal, endVal] = isRange ? current : [min, current[0]];
+  const startPercent = valueToPercent(startVal, min, max);
+  const endPercent = valueToPercent(endVal, min, max);
+  const activeLeft = isRange ? startPercent : 0;
+  const activeWidth = isRange ? Math.max(0, endPercent - startPercent) : Math.max(0, endPercent);
+
+  const markItems = useMemo(() => {
+    if (!marks) return [];
+    return Object.entries(marks)
+      .map(([raw, label]) => {
+        const num = Number(raw);
+        if (!Number.isFinite(num)) return null;
+        const val = clamp(num, min, max);
+        const percent = valueToPercent(val, min, max);
+        const active = isRange ? (val >= startVal && val <= endVal) : (val <= current[0]);
+        return { key: raw, label, val, percent, active };
+      })
+      .filter(Boolean);
+  }, [current, endVal, isRange, marks, max, min, startVal]);
+
+  const wrapperClass = [
+    WRAPPER_BASE,
+    markItems.length > 0 ? 'pb-[30px]' : '',
+    disabled ? 'opacity-60' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={[`tfds-slider`, wrapperClass].filter(Boolean).join(' ')} style={style} {...rest} data-tfds-component="Slider">
+      <div className={TRACK_AREA}>
+        <div ref={trackRef} className={TRACK} onPointerDown={onTrackPointerDown} role="presentation">
+          <div
+            className={disabled ? TRACK_ACTIVE_DISABLED : TRACK_ACTIVE}
+            style={{ left: `${activeLeft}%`, width: `${activeWidth}%` }}
+          />
+
+          {markItems.map((mark) => (
+            <div key={mark.key} style={{ left: `${mark.percent}%` }} className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2">
+              <span
+                className={[
+                  MARK_DOT_BASE,
+                  disabled
+                    ? 'bg-blueGrey-500'
+                    : mark.active
+                      ? 'bg-brand-500'
+                      : 'bg-blueGrey-400',
+                ].join(' ')}
+              />
+              <span className={MARK_LABEL}>{mark.label}</span>
+            </div>
+          ))}
+
+          {current.map((val, index) => {
+            const left = valueToPercent(val, min, max);
+            const handleClass = [
+              HANDLE_BASE,
+              disabled ? HANDLE_DISABLED : HANDLE_ENABLED,
+              draggingIndex === index ? HANDLE_DRAGGING : '',
+            ].filter(Boolean).join(' ');
+            const shouldShowValueTooltip = showTooltip && draggingIndex === index;
+            const fallbackAriaLabel = isRange
+              ? (index === 0 ? (ariaLabelStart || '起始值') : (ariaLabelEnd || '结束值'))
+              : (ariaLabel || '滑块值');
+
+            return (
+              <button
+                key={`${index}-${val}`}
+                type="button"
+                className={handleClass}
+                style={{ left: `${left}%` }}
+                onPointerDown={(e) => startDrag(index, e)}
+                onKeyDown={onHandleKeyDown(index, val)}
+                disabled={disabled}
+                role="slider"
+                aria-label={ariaLabelledBy ? undefined : fallbackAriaLabel}
+                aria-labelledby={ariaLabelledBy}
+                aria-describedby={ariaDescribedBy}
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={val}
+                aria-disabled={disabled}
+              >
+                {shouldShowValueTooltip ? (
+                  <Tooltip
+                    content={String(val)}
+                    placement="top"
+                    defaultOpen
+                    triggerClassName={TOOLTIP_TRIGGER}
+                  >
+                    <span aria-hidden="true" />
+                  </Tooltip>
+                ) : null}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Slider.displayName = 'Slider';
+
+export { Slider };