@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/TimePicker.jsx

@@ -0,0 +1,444 @@
+/**
+ * TimePicker — 时间选择器
+ * @prop {'time'|'timerange'} [type='time'] — 选择类型
+ * @prop {string|Array<string>} value — 当前值（受控）
+ * @prop {string|Array<string>} [defaultValue=undefined] — 非受控初始值
+ * @prop {string} [placeholder=''] — 占位文案
+ * @prop {boolean} [disabled=false] — 是否禁用
+ * @prop {boolean} [defaultOpen=false] — 初始是否展开
+ * @prop {Function} [onChange=null] — 变更回调
+ * @prop {string} [className=''] — 额外类名
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+const PANEL_GAP = 4;
+const PANEL_Z = 10000;
+const PANEL_MIN_WIDTH = 150;
+
+const TYPE_CONFIG = {
+  time: {
+    widthClass: 'w-full min-w-0 max-w-full',
+    placeholder: '请选择时间',
+    isRange: false,
+    panelHeight: 252,
+  },
+  timerange: {
+    widthClass: 'w-full min-w-0 max-w-full',
+    placeholderStart: '开始时间',
+    placeholderEnd: '结束时间',
+    isRange: true,
+    panelHeight: 304,
+  },
+};
+
+const FRAME_BASE = [
+  'relative inline-flex h-[36px] items-center',
+  'border border-solid border-border rounded-md',
+  'bg-surface pl-3 pr-2 gap-2',
+  '[font-family:inherit] outline-none cursor-pointer',
+  'transition-colors duration-150',
+  'hover:border-blueGrey-400',
+  'focus-within:border-primary focus-within:hover:border-primary',
+].join(' ');
+
+const DISABLED_CLASS = 'bg-disabled border-border cursor-not-allowed opacity-60 pointer-events-none';
+const TEXT_BASE = 'text-sm leading-[20px]';
+const VALUE_TEXT = [TEXT_BASE, 'text-foreground truncate'].join(' ');
+const PLACEHOLDER_TEXT = [TEXT_BASE, 'text-foreground-muted truncate'].join(' ');
+const RANGE_SEP = [TEXT_BASE, 'text-foreground-muted shrink-0'].join(' ');
+const CONTENT_SLOT = 'min-w-0 flex-1 text-left';
+const ICON_SLOT = 'inline-flex size-[16px] shrink-0 items-center justify-center text-foreground-disabled [&>svg]:size-[16px]';
+
+const PANEL_BASE = [
+  'overflow-hidden rounded-md border border-solid border-border',
+  'bg-surface shadow-lg',
+].join(' ');
+const PANEL_HEADER = 'flex h-[52px] items-center justify-center border-b border-solid border-b-border px-3 text-sm [font-weight:var(--font-semibold)] text-foreground';
+const PANEL_BODY = 'relative h-[252px] overflow-hidden';
+const WHEEL = 'relative flex h-full w-full overflow-hidden';
+const SELECTOR_AREA = 'pointer-events-none absolute left-0 right-0 top-1/2 z-10 h-[36px] -translate-y-1/2 bg-brand-50';
+const COLUMN = 'relative z-20 h-full min-w-0 flex-1 overflow-y-auto py-[108px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden';
+const COLUMN_DIVIDER = 'border-r border-solid border-r-border';
+const OPTION = [
+  'flex h-[36px] w-full items-center justify-center',
+  'border-none bg-transparent px-0',
+  'text-sm leading-[36px] tracking-normal text-foreground-secondary',
+  'hover:bg-transparent hover:text-foreground',
+  'transition-colors duration-100',
+].join(' ');
+const OPTION_ACTIVE = 'text-foreground hover:bg-transparent hover:text-foreground';
+const OPTION_UNIT = 'text-sm leading-[36px] font-normal text-foreground';
+const ITEM_HEIGHT = 36;
+
+function pad2(n) {
+  return String(n).padStart(2, '0');
+}
+
+const HOURS = Array.from({ length: 24 }, (_, i) => pad2(i));
+const MINUTES = Array.from({ length: 60 }, (_, i) => pad2(i));
+
+function ClockIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-[16px]" aria-hidden="true">
+      <circle cx="8" cy="8" r="5.5" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M8 5.4V8L9.8 9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function parseTime(raw, fallback = '') {
+  if (typeof raw !== 'string') return fallback;
+  const match = raw.trim().match(/^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/);
+  if (!match) return fallback;
+  const h = Math.max(0, Math.min(23, Number(match[1])));
+  const m = Math.max(0, Math.min(59, Number(match[2])));
+  return `${pad2(h)}:${pad2(m)}`;
+}
+
+function splitTime(raw, fallback = '09:00') {
+  const [hour, minute] = parseTime(raw, fallback).split(':');
+  return [hour, minute];
+}
+
+function normalizeValue(raw, config) {
+  if (!config.isRange) return parseTime(raw, '');
+  if (!Array.isArray(raw)) return ['', ''];
+  return [parseTime(raw[0], ''), parseTime(raw[1], '')];
+}
+
+function measurePanel(triggerEl, minPanelWidth, panelHeight) {
+  const rect = triggerEl.getBoundingClientRect();
+  const panelWidth = Math.max(minPanelWidth, rect.width);
+  const spaceBelow = window.innerHeight - rect.bottom - PANEL_GAP;
+  const spaceAbove = rect.top - PANEL_GAP;
+  const placeBelow = spaceBelow >= panelHeight || spaceBelow >= spaceAbove;
+
+  const top = placeBelow
+    ? rect.bottom + PANEL_GAP
+    : Math.max(8, rect.top - panelHeight - PANEL_GAP);
+
+  let left = rect.left;
+  if (left + panelWidth > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - panelWidth - 8);
+  }
+
+  return { top, left, width: panelWidth };
+}
+
+function TimeColumn({ part, values, active, unit, showDivider, onPick }) {
+  const columnRef = useRef(null);
+  const scrollTimerRef = useRef(null);
+  const isScrollingRef = useRef(false);
+  const lastPickedRef = useRef(active);
+
+  useEffect(() => {
+    lastPickedRef.current = active;
+    const node = columnRef.current;
+    const activeIndex = values.indexOf(active);
+    if (!node || activeIndex < 0) return;
+    if (isScrollingRef.current) return;
+    node.scrollTop = activeIndex * ITEM_HEIGHT;
+  }, [active, values]);
+
+  useEffect(() => () => {
+    if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);
+  }, []);
+
+  const handleScroll = () => {
+    isScrollingRef.current = true;
+    const node = columnRef.current;
+    if (node) {
+      const nextIndex = Math.max(0, Math.min(values.length - 1, Math.round(node.scrollTop / ITEM_HEIGHT)));
+      const nextValue = values[nextIndex];
+      if (nextValue && nextValue !== lastPickedRef.current) {
+        lastPickedRef.current = nextValue;
+        onPick(part, nextValue);
+      }
+    }
+
+    if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);
+    scrollTimerRef.current = window.setTimeout(() => {
+      const currentNode = columnRef.current;
+      if (!currentNode) return;
+      const nextIndex = Math.max(0, Math.min(values.length - 1, Math.round(currentNode.scrollTop / ITEM_HEIGHT)));
+      currentNode.scrollTo({ top: nextIndex * ITEM_HEIGHT, behavior: 'smooth' });
+      window.setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 120);
+    }, 120);
+  };
+
+  const pickItem = (item) => {
+    const node = columnRef.current;
+    const nextIndex = values.indexOf(item);
+    isScrollingRef.current = false;
+    lastPickedRef.current = item;
+    if (node && nextIndex >= 0) node.scrollTo({ top: nextIndex * ITEM_HEIGHT, behavior: 'smooth' });
+    onPick(part, item);
+  };
+
+  return (
+    <div ref={columnRef} className={[COLUMN, showDivider ? COLUMN_DIVIDER : ''].filter(Boolean).join(' ')} onScroll={handleScroll}>
+      {values.map((item) => {
+        const selected = item === active;
+        return (
+          <button
+            key={item}
+            type="button"
+            className={[OPTION, selected ? OPTION_ACTIVE : ''].filter(Boolean).join(' ')}
+            onClick={() => pickItem(item)}
+          >
+            {item}{selected ? <span className={OPTION_UNIT}>{unit}</span> : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function TimeColumns({ value, fallback, onPick }) {
+  const [hour, minute] = splitTime(value, fallback);
+  const columns = [
+    { key: 'hour', values: HOURS, active: hour, unit: '时' },
+    { key: 'minute', values: MINUTES, active: minute, unit: '分' },
+  ];
+
+  const pick = (part, next) => {
+    const current = { hour, minute };
+    current[part] = next;
+    onPick(`${current.hour}:${current.minute}`);
+  };
+
+  return columns.map((column, index) => (
+    <TimeColumn
+      key={column.key}
+      part={column.key}
+      values={column.values}
+      active={column.active}
+      unit={column.unit}
+      showDivider={index < columns.length - 1}
+      onPick={pick}
+    />
+  ));
+}
+
+function TimeWheel({ value, fallback, onPick }) {
+  return (
+    <div className={WHEEL}>
+      <div className={SELECTOR_AREA} />
+      <TimeColumns value={value} fallback={fallback} onPick={onPick} />
+    </div>
+  );
+}
+
+function TimeRangeWheel({ startValue, endValue, fallbackStart, fallbackEnd, onPick }) {
+  const [startHour, startMinute] = splitTime(startValue, fallbackStart);
+  const [endHour, endMinute] = splitTime(endValue, fallbackEnd);
+  const columns = [
+    { key: 'startHour', values: HOURS, active: startHour, unit: '时' },
+    { key: 'startMinute', values: MINUTES, active: startMinute, unit: '分' },
+    { key: 'endHour', values: HOURS, active: endHour, unit: '时' },
+    { key: 'endMinute', values: MINUTES, active: endMinute, unit: '分' },
+  ];
+
+  const pick = (part, next) => {
+    const current = { startHour, startMinute, endHour, endMinute };
+    current[part] = next;
+    onPick([
+      `${current.startHour}:${current.startMinute}`,
+      `${current.endHour}:${current.endMinute}`,
+    ]);
+  };
+
+  return (
+    <div className={WHEEL}>
+      <div className={SELECTOR_AREA} />
+      {columns.map((column, index) => (
+        <TimeColumn
+          key={column.key}
+          part={column.key}
+          values={column.values}
+          active={column.active}
+          unit={column.unit}
+          showDivider={index < columns.length - 1}
+          onPick={pick}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function TimePicker({
+  type = 'time',
+  value,
+  defaultValue,
+  placeholder,
+  disabled = false,
+  defaultOpen = false,
+  onChange,
+  className = '',
+  ...rest
+}) {
+  const config = TYPE_CONFIG[type] || TYPE_CONFIG.time;
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const currentRawValue = isControlled ? value : innerValue;
+  const normalizedValue = useMemo(() => normalizeValue(currentRawValue, config), [currentRawValue, config]);
+  const [open, setOpen] = useState(Boolean(defaultOpen) && !disabled);
+  const [panelPos, setPanelPos] = useState({ top: 0, left: 0, width: PANEL_MIN_WIDTH });
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+
+  useEffect(() => {
+    setOpen(Boolean(defaultOpen) && !disabled);
+  }, [defaultOpen, disabled, type]);
+
+  const updatePanelPos = useCallback(() => {
+    if (!triggerRef.current) return;
+    setPanelPos(measurePanel(triggerRef.current, PANEL_MIN_WIDTH, config.panelHeight));
+  }, [config.panelHeight]);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePanelPos();
+  }, [open, updatePanelPos]);
+
+  useEffect(() => {
+    if (!open) return;
+    let frameId = 0;
+    const startedAt = performance.now();
+    const syncDuringPreviewMotion = () => {
+      updatePanelPos();
+      if (performance.now() - startedAt < 260) {
+        frameId = window.requestAnimationFrame(syncDuringPreviewMotion);
+      }
+    };
+    frameId = window.requestAnimationFrame(syncDuringPreviewMotion);
+    return () => window.cancelAnimationFrame(frameId);
+  }, [open, updatePanelPos]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onMove = () => updatePanelPos();
+    window.addEventListener('resize', onMove);
+    window.addEventListener('scroll', onMove, true);
+    return () => {
+      window.removeEventListener('resize', onMove);
+      window.removeEventListener('scroll', onMove, true);
+    };
+  }, [open, updatePanelPos]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      const t = e.target;
+      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const commitValue = useCallback((nextVal) => {
+    if (!isControlled) setInnerValue(nextVal);
+    onChange?.(nextVal);
+  }, [isControlled, onChange]);
+
+  const triggerClass = [
+    FRAME_BASE,
+    config.widthClass,
+    disabled ? DISABLED_CLASS : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const displaySingle = !config.isRange ? normalizedValue : '';
+  const displayStart = config.isRange ? normalizedValue[0] : '';
+  const displayEnd = config.isRange ? normalizedValue[1] : '';
+
+  const panel = open && typeof document !== 'undefined' ? createPortal(
+    <div
+      ref={panelRef}
+      className={PANEL_BASE}
+      style={{
+        position: 'fixed',
+        top: panelPos.top,
+        left: panelPos.left,
+        width: `${panelPos.width}px`,
+        height: `${config.panelHeight}px`,
+        zIndex: PANEL_Z,
+      }}
+    >
+      {!config.isRange ? (
+        <div className={PANEL_BODY}>
+          <TimeWheel value={displaySingle} fallback="12:15" onPick={commitValue} />
+        </div>
+      ) : (
+        <>
+          <div className="grid grid-cols-2">
+            <div className={PANEL_HEADER}>开始时间</div>
+            <div className={PANEL_HEADER}>结束时间</div>
+          </div>
+          <div className={PANEL_BODY}>
+            <TimeRangeWheel
+              startValue={displayStart}
+              endValue={displayEnd}
+              fallbackStart="09:30"
+              fallbackEnd="18:00"
+              onPick={commitValue}
+            />
+          </div>
+        </>
+      )}
+    </div>,
+    document.body,
+  ) : null;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={[`tfds-time-picker`, triggerClass].filter(Boolean).join(' ')}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled) setOpen((v) => !v);
+        }}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        {...rest}
+        data-tfds-component="TimePicker"
+      >
+        {!config.isRange ? (
+          <span className={CONTENT_SLOT}>
+            {displaySingle ? (
+              <span className={VALUE_TEXT}>{displaySingle}</span>
+            ) : (
+              <span className={PLACEHOLDER_TEXT}>{placeholder || config.placeholder}</span>
+            )}
+          </span>
+        ) : (
+          <span className="flex min-w-0 flex-1 items-center gap-2">
+            <span className={[CONTENT_SLOT, displayStart ? VALUE_TEXT : PLACEHOLDER_TEXT].join(' ')}>
+              {displayStart || config.placeholderStart}
+            </span>
+            <span className={RANGE_SEP}>～</span>
+            <span className={[CONTENT_SLOT, displayEnd ? VALUE_TEXT : PLACEHOLDER_TEXT].join(' ')}>
+              {displayEnd || config.placeholderEnd}
+            </span>
+          </span>
+        )}
+        <span className={ICON_SLOT}><ClockIcon /></span>
+      </button>
+      {panel}
+    </>
+  );
+}

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

@@ -0,0 +1,77 @@
+/**
+ * TimePicker — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 对齐 Figma TimePicker trigger 与 panel，支持单时间与时间范围。
+ */
+export const TIMEPICKER_TOKEN_MAP = {
+  base: [
+    { label: '默认高度', cssProp: 'height', value: '36px' },
+  ],
+  值文本: [
+    { label: '颜色', cssProp: 'color', token: '--text-primary', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+  ],
+  占位符: [
+    { label: '颜色', cssProp: 'color', token: '--text-tertiary', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+  ],
+  范围分隔: [
+    { label: '颜色', cssProp: 'color', token: '--text-tertiary', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+  ],
+  图标: [
+    { label: '颜色', cssProp: 'color', token: '--text-disabled', value: '#98A2B3', semanticRef: 'text-disabled' },
+    { label: '尺寸', cssProp: 'width / height', value: '16px' },
+  ],
+  触发器: [
+    { 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: 'padding-left', token: '--spacing-3', value: '12px' },
+    { label: '右内边距', cssProp: 'padding-right', token: '--spacing-2', value: '8px' },
+    { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '悬浮边框', cssProp: 'border-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'hover' },
+    { label: '聚焦边框', cssProp: 'border-color', token: '--status-primary', value: '#56D3BC', semanticRef: 'status-primary', state: 'focus' },
+    { label: '禁用背景', cssProp: 'background', token: '--color-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled', state: 'disabled' },
+    { label: '透明度', cssProp: 'opacity', value: '0.6', state: 'disabled' },
+  ],
+  面板容器: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '描边', cssProp: 'border', token: '--color-border-default', value: '1px #E4E7EC', semanticRef: 'border-default' },
+    { label: '阴影', cssProp: 'box-shadow', value: 'shadow-lg（与 Select / Modal 浮层一致）' },
+  ],
+  范围标题: [
+    { label: '高度', cssProp: 'height', value: '52px' },
+    { label: '文字色', cssProp: 'color', token: '--text-primary', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', value: '600' },
+    { label: '下边框', cssProp: 'border-bottom-color', token: '--border-default', value: 'rgba(45,66,107,0.12)', semanticRef: 'border-default' },
+  ],
+  时间列: [
+    { label: '列宽', cssProp: 'width', value: 'flex: 1, equal columns' },
+    { label: '列高', cssProp: 'height', value: '252px' },
+    { label: '上下滚动留白', cssProp: 'padding-top / padding-bottom', value: '108px' },
+    { label: '选项尺寸', cssProp: 'width / height', value: '100% / 36px' },
+    { label: '普通文字', cssProp: 'color', token: '--text-secondary', value: '#475467', semanticRef: 'text-secondary' },
+    { label: '选中文字', cssProp: 'color', token: '--text-primary', value: '#182230', semanticRef: 'text-primary', state: 'selected' },
+    { label: '列分割线', cssProp: 'border-right-color', token: '--border-default', value: 'rgba(45,66,107,0.12)', semanticRef: 'border-default' },
+    { label: '滚动吸附', cssProp: 'scroll behavior', value: 'scrolling item in center selector commits value' },
+  ],
+  固定选择区: [
+    { label: '位置', cssProp: 'top', value: '50%' },
+    { label: '高度', cssProp: 'height', value: '36px' },
+    { label: '背景色', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', semanticRef: 'brand-50' },
+    { label: '覆盖范围', cssProp: 'left / right', value: '0 / 0, spans all columns' },
+  ],
+  面板尺寸: [
+    { label: '面板宽度', cssProp: 'width', value: 'same as trigger, min 150px' },
+    { label: '单时间高度', cssProp: 'height', value: '252px' },
+    { label: '时间范围高度', cssProp: 'height', value: '304px' },
+  ],
+  类型宽度: [
+    { label: '触发器宽度', cssProp: 'width', token: '--size-input-width', value: '300px' },
+  ],
+};

package/src/_b_end_runtime/components/Toast.jsx

@@ -0,0 +1,120 @@
+import { X } from 'lucide-react';
+import Button from './Button';
+import Icon from './Icon';
+
+const SHADOW =
+  'shadow-[0px_0px_1px_rgba(0,0,0,0.3),0px_4px_14px_rgba(0,0,0,0.1)]';
+
+/* ── 语义类型 → 背景 + 阴影 ── */
+const TYPE_BG = {
+  info: ['bg-brand-50', SHADOW].join(' '),
+  success: ['bg-green-50', SHADOW].join(' '),
+  warning: ['bg-orange-50', SHADOW].join(' '),
+  error: ['bg-red-50', SHADOW].join(' '),
+};
+
+/* ── 语义类型 → 描边颜色（bordered=true 时使用） ── */
+const TYPE_BORDER = {
+  info: 'border-teal-600',
+  success: 'border-green-500',
+  warning: 'border-orange-500',
+  error: 'border-red-500',
+};
+
+/* ── 语义类型 → 状态图标（Icon name + 父级着色） ── */
+const TYPE_ICON = {
+  info: { name: 'info-circle-stroked', tint: 'text-teal-600' },
+  success: { name: 'check-circle-stroked', tint: 'text-green-500' },
+  warning: { name: 'alert-triangle-stroked', tint: 'text-orange-500' },
+  error: { name: 'alert-circle-stroked', tint: 'text-red-500' },
+};
+
+/* ── 无描边时根容器边框类（占位透明，避免布局跳动） ── */
+const BORDER_OFF = 'border-transparent';
+
+const ROOT = [
+  'inline-flex w-fit max-w-[min(100%,560px)] min-h-[44px] min-w-0 flex-wrap items-center',
+  'gap-x-2 gap-y-1',
+  'rounded-lg border border-solid p-3',
+  'font-[inherit]',
+].join(' ');
+
+const ICON_WRAP = 'ml-1 inline-flex shrink-0 items-center';
+const MESSAGE = 'min-w-0 shrink text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground whitespace-pre-line break-words';
+const ACTIONS_ROW = 'flex shrink-0 flex-wrap items-center gap-x-2';
+const ACTION_BTN_CLASS =
+  '!h-auto min-h-0 py-0.5 px-0 -my-0.5 !text-sm [font-weight:var(--font-semibold)] leading-5';
+
+/**
+ * Toast — 轻量反馈条（Tailwind 内联）
+ *
+ * HiUI 风格四态反馈条：图标 + 主文案 + 可选文字操作 + 关闭；仅单条视觉，不含全局队列与 Portal。
+ * 根为 `w-fit max-w-[min(100%,560px)]`，图标与文案及操作与关闭之间水平间距 8px（`gap-x-2`）。
+ *
+ * @prop {'info'|'success'|'warning'|'error'} [type='info'] — 语义类型
+ * @prop {string} [message] — 主文案（与 children 二选一，未传 children 时使用）
+ * @prop {import('react').ReactNode} [children] — 覆盖 message 的展示内容
+ * @prop {{ label: string, onClick?: () => void }[] | null} [actions=null] — 文字操作（建议 1～2 项，渲染为 Button text-brand sm）
+ * @prop {boolean} [bordered=true] — 是否显示语义色描边（false 时为 border-transparent）
+ * @prop {boolean} [showClose=true] — 是否允许展示关闭位（仍需传入 onClose 才渲染关闭按钮）
+ * @prop {() => void} [onClose] — 关闭回调
+ * @prop {string} [className=''] — 附加到根容器类名
+ */
+export default function Toast({
+  type = 'info',
+  message,
+  children,
+  actions = null,
+  bordered = true,
+  showClose = true,
+  onClose,
+  className = '',
+}) {
+  const bg = TYPE_BG[type] || TYPE_BG.info;
+  const stroke = bordered ? (TYPE_BORDER[type] || TYPE_BORDER.info) : BORDER_OFF;
+  const iconCfg = TYPE_ICON[type] || TYPE_ICON.info;
+  const role = type === 'error' ? 'alert' : 'status';
+  const live = type === 'error' ? 'assertive' : 'polite';
+  const text = children ?? message;
+
+  return (
+    <div
+      className={[`tfds-toast`, [ROOT, bg, stroke, className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
+      role={role}
+      aria-live={live}
+     data-tfds-component="Toast">
+      <span className={`${ICON_WRAP} ${iconCfg.tint}`} aria-hidden>
+        <Icon name={iconCfg.name} size="md" />
+      </span>
+      <div className={MESSAGE}>{text}</div>
+      {Array.isArray(actions) && actions.length > 0 ? (
+        <div className={ACTIONS_ROW}>
+          {actions.map((a, i) => (
+            <Button
+              key={`${a.label}-${i}`}
+              type="button"
+              variant="text-brand"
+              size="sm"
+              className={ACTION_BTN_CLASS}
+              onClick={a.onClick}
+            >
+              {a.label}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      {showClose && onClose ? (
+        <Button
+          type="button"
+          variant="ghost-black"
+          size="sm"
+          icon={<X size={16} strokeWidth={2} />}
+          iconOnly
+          onClick={onClose}
+          aria-label="关闭"
+          className="shrink-0 border-transparent bg-transparent shadow-none"
+        />
+      ) : null}
+    </div>
+  );
+}