@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/InputNumber.jsx

@@ -0,0 +1,242 @@
+/**
+ * InputNumber — 数字输入框
+ * @prop {'default'|'error'} [status='default'] — 状态
+ * @prop {boolean} [disabled=false] — 是否禁用
+ * @prop {boolean} [innerButtons=false] — 步进按钮是否内嵌到输入框右侧
+ * @prop {boolean} [controls=true] — 是否显示步进按钮
+ * @prop {number} [min] — 最小值
+ * @prop {number} [max] — 最大值
+ * @prop {number} [step=1] — 步长
+ * @prop {number} [precision] — 小数位
+ * @prop {string} [placeholder='请输入'] — 占位
+ * @prop {number|string} value — 当前值（受控）
+ * @prop {number|string} [defaultValue] — 非受控初值
+ * @prop {Function} [onChange=null] — 变更回调，参数为 nextValue
+ * @prop {Function} [onStep=null] — 点击步进按钮回调
+ * @prop {string} [className=''] — 额外类名
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+
+const WRAPPER_BASE = [
+  'group/input-number relative inline-flex w-full min-w-0 max-w-full items-center',
+  '[font-family:inherit]',
+].join(' ');
+
+const FIELD_BASE = [
+  'relative inline-flex h-[36px] min-w-0 flex-1 items-center overflow-hidden',
+  'rounded-md border border-solid transition-colors duration-150',
+].join(' ');
+
+const STATUS_CLASS = {
+  default: [
+    'border-border bg-surface',
+    'hover:border-blueGrey-400',
+    'focus-within:border-primary focus-within:hover:border-primary',
+  ].join(' '),
+  error: [
+    'border-border bg-red-50',
+    'hover:bg-red-100',
+    'focus-within:border-red-500 focus-within:hover:border-red-500 focus-within:hover:bg-red-50',
+  ].join(' '),
+};
+
+const FIELD_DISABLED = 'border-border bg-disabled opacity-60 cursor-not-allowed';
+
+const FIELD_SIZE_CLASS = 'h-[36px] pl-3 pr-2 text-sm';
+
+const INPUT_BASE = [
+  'min-w-0 flex-1 border-none bg-transparent p-0 m-0 outline-none',
+  'text-foreground placeholder:text-foreground-muted',
+  'focus:placeholder:text-foreground-disabled',
+  '[font-family:inherit] [font-size:inherit] leading-[20px]',
+  'disabled:cursor-not-allowed disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled',
+  '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+].join(' ');
+
+const ARROW_STACK_BASE = [
+  'shrink-0 overflow-hidden rounded-md border border-solid border-border bg-surface',
+  'text-foreground-muted transition-colors duration-150',
+].join(' ');
+
+const ARROW_STACK_DISABLED = 'bg-disabled text-foreground-disabled opacity-60';
+const OUTER_ARROWS = 'ml-1 flex h-[36px] w-[16px] flex-col';
+const INNER_ARROWS = [
+  'absolute bottom-[2px] right-px top-[2px] flex w-[16px] flex-col',
+  'opacity-0 group-hover/input-number:opacity-100 group-focus-within/input-number:opacity-100',
+].join(' ');
+const ARROW_BUTTON = [
+  'flex min-h-0 flex-1 items-center justify-center border-none bg-transparent p-0',
+  'text-current hover:bg-fill disabled:cursor-not-allowed disabled:hover:bg-transparent',
+].join(' ');
+
+function normalizeNumber(raw) {
+  if (raw === '' || raw === null || raw === undefined) return null;
+  const next = Number(raw);
+  return Number.isFinite(next) ? next : null;
+}
+
+function clampNumber(next, min, max) {
+  if (next === null) return null;
+  let value = next;
+  if (typeof min === 'number') value = Math.max(min, value);
+  if (typeof max === 'number') value = Math.min(max, value);
+  return value;
+}
+
+function getPrecision(step, precision) {
+  if (typeof precision === 'number') return precision;
+  const decimal = String(step).split('.')[1];
+  return decimal ? decimal.length : 0;
+}
+
+function formatNumber(next, precision) {
+  if (next === null) return '';
+  if (precision > 0) return Number(next.toFixed(precision));
+  return next;
+}
+
+function ChevronUpIcon() {
+  return (
+    <svg viewBox="0 0 8 8" fill="none" className="size-[8px]" aria-hidden="true">
+      <path d="M1.5 5L4 2.5L6.5 5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon() {
+  return (
+    <svg viewBox="0 0 8 8" fill="none" className="size-[8px]" aria-hidden="true">
+      <path d="M1.5 3L4 5.5L6.5 3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function StepControls({ disabled, placement, onStep }) {
+  const stackClass = [
+    ARROW_STACK_BASE,
+    placement === 'inner' ? INNER_ARROWS : OUTER_ARROWS,
+    disabled ? ARROW_STACK_DISABLED : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <span className={stackClass} aria-hidden={disabled}>
+      <button
+        type="button"
+        className={ARROW_BUTTON}
+        disabled={disabled}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => onStep(1)}
+        tabIndex={-1}
+        aria-label="增加"
+      >
+        <ChevronUpIcon />
+      </button>
+      <button
+        type="button"
+        className={ARROW_BUTTON}
+        disabled={disabled}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => onStep(-1)}
+        tabIndex={-1}
+        aria-label="减少"
+      >
+        <ChevronDownIcon />
+      </button>
+    </span>
+  );
+}
+
+export default function InputNumber({
+  size: _size = 'md',
+  status = 'default',
+  disabled = false,
+  innerButtons = false,
+  controls = true,
+  min,
+  max,
+  step = 1,
+  precision,
+  placeholder = '请输入',
+  value,
+  defaultValue,
+  onChange,
+  onStep,
+  className = '',
+  ...rest
+}) {
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue ?? '');
+  const currentValue = isControlled ? value : innerValue;
+  const resolvedPrecision = useMemo(() => getPrecision(step, precision), [step, precision]);
+
+  const emitChange = useCallback((nextValue, meta) => {
+    if (!isControlled) setInnerValue(nextValue);
+    onChange?.(nextValue, meta);
+  }, [isControlled, onChange]);
+
+  const stepBy = useCallback((direction) => {
+    if (disabled) return;
+    const currentNumber = normalizeNumber(currentValue) ?? 0;
+    const stepped = currentNumber + direction * Number(step || 1);
+    const clamped = clampNumber(stepped, min, max);
+    const nextValue = formatNumber(clamped, resolvedPrecision);
+    emitChange(nextValue, { type: direction > 0 ? 'up' : 'down' });
+    onStep?.(nextValue, { type: direction > 0 ? 'up' : 'down' });
+  }, [currentValue, disabled, emitChange, max, min, onStep, resolvedPrecision, step]);
+
+  const handleInputChange = useCallback((event) => {
+    const raw = event.target.value;
+    if (raw === '' || raw === '-' || raw === '.' || raw === '-.') {
+      emitChange(raw, { event });
+      return;
+    }
+    const parsed = normalizeNumber(raw);
+    if (parsed === null) return;
+    const nextValue = formatNumber(clampNumber(parsed, min, max), resolvedPrecision);
+    emitChange(nextValue, { event });
+  }, [emitChange, max, min, resolvedPrecision]);
+
+  const wrapperClass = [
+    WRAPPER_BASE,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const fieldClass = [
+    FIELD_BASE,
+    disabled ? FIELD_DISABLED : STATUS_CLASS[status] || STATUS_CLASS.default,
+    FIELD_SIZE_CLASS,
+  ].filter(Boolean).join(' ');
+
+  const inputClass = [
+    INPUT_BASE,
+    controls && innerButtons ? 'pr-6' : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={wrapperClass}>
+      <div className={[`tfds-input-number`, fieldClass].filter(Boolean).join(' ')} data-tfds-component="InputNumber">
+        <input
+          type="text"
+          inputMode="decimal"
+          role="spinbutton"
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={normalizeNumber(currentValue) ?? undefined}
+          disabled={disabled}
+          placeholder={placeholder}
+          className={inputClass}
+          value={currentValue ?? ''}
+          onChange={handleInputChange}
+          {...rest}
+        />
+        {controls && innerButtons ? (
+          <StepControls disabled={disabled} placement="inner" onStep={stepBy} />
+        ) : null}
+      </div>
+      {controls && !innerButtons ? (
+        <StepControls disabled={disabled} placement="outer" onStep={stepBy} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+/**
+ * InputNumber — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 对齐 Figma InputNumber，复用 Input 的触发器视觉并补充步进按钮。
+ */
+export const INPUT_NUMBER_TOKEN_MAP = {
+  base: [
+    { label: '默认宽度', cssProp: 'width', token: '--size-input-width', value: '300px' },
+    { label: '默认高度', cssProp: 'height', token: '--size-control-md', 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: 'background', token: '--bg-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--border-default', value: 'rgba(45,66,107,0.12)', 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: '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-red-50', value: '#FEF2F1', semanticRef: 'status-danger', state: 'error' },
+    { label: '禁用背景', cssProp: 'background', token: '--bg-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled', state: 'disabled' },
+    { label: '透明度', cssProp: 'opacity', value: '0.6', state: 'disabled' },
+  ],
+  步进按钮: [
+    { label: '外置按钮尺寸', cssProp: 'width / height', value: '16px / 36px' },
+    { label: '内置按钮尺寸', cssProp: 'width / height', value: '16px / 32px' },
+    { label: '外置间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '背景色', cssProp: 'background', token: '--bg-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--border-default', value: 'rgba(45,66,107,0.12)', semanticRef: 'border-default' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '图标尺寸', cssProp: 'width / height', value: '8px' },
+    { label: '图标色', cssProp: 'color', token: '--text-tertiary', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '内置显隐', cssProp: 'opacity', value: 'hover/focus-within: 1, default: 0' },
+  ],
+  sizes: {
+    sm: [
+      { label: '高度', cssProp: 'height', token: '--size-control-sm', value: '24px' },
+      { label: '左内边距', cssProp: 'padding-left', token: '--spacing-2', value: '8px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    ],
+    md: [
+      { label: '高度', cssProp: 'height', token: '--size-control-md', value: '36px' },
+      { label: '左内边距', cssProp: 'padding-left', token: '--spacing-3', value: '12px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    ],
+  },
+};

package/src/_b_end_runtime/components/Modal.jsx

@@ -0,0 +1,155 @@
+import { useId } from 'react';
+import { X } from 'lucide-react';
+import Button from './Button';
+
+/* ── 布局变体 → 面板几何 ── */
+const LAYOUT_CLASS = {
+  /* 居中浮层：受 size 控制最大宽度，最大高度 85vh */
+  center: 'max-h-[85vh] rounded-lg shadow-lg',
+  /* 全屏弹窗：高度 = 容器高度 - 24px，宽度撑满，底部对齐，顶部圆角；外层须是 flex-col 定高容器 */
+  fullscreen: 'h-[calc(100%-24px)] rounded-t-lg rounded-b-none shadow-xl',
+};
+
+/* ── 尺寸 → 面板最大宽度（仅 layout='center' 时生效） ── */
+const SIZE_CLASS = {
+  sm: 'max-w-[450px]',
+  md: 'max-w-[684px]',
+  lg: 'max-w-[920px]',
+};
+
+/* ── 布局变体 → 内容区高度策略 ── */
+const BODY_CLASS = {
+  center: 'flex-1 min-h-[200px] w-full overflow-y-auto',
+  fullscreen: 'flex-1 min-h-0 w-full overflow-y-auto',
+};
+
+/* ── 面板容器基础样式 ── */
+const PANEL_BASE = [
+  'flex flex-col items-stretch w-full min-w-0',
+  'bg-surface px-6',
+].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 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';
+
+/**
+ * Modal — 模态对话框面板（仅面板本体，遮罩与定位由外层处理）
+ *
+ * 两种布局变体通过 layout 控制：
+ *   center     — 居中浮层（默认），受 size 控制最大宽度，最大高度 85vh
+ *   fullscreen — 全屏弹窗，宽度撑满容器，高度 = 容器高度 - 24px，底部对齐，顶部圆角；
+ *                外层须是 flex-col 定高容器（如 fixed inset-0），面板加 className="mt-auto" 停靠底部
+ *
+ * @prop {'center'|'fullscreen'} [layout='center'] — 布局变体
+ * @prop {'sm'|'md'|'lg'} [size='md'] — 宽度档位（仅 layout='center' 生效）
+ * @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} [bodyClassName=''] — 内容区附加类名
+ * @prop {string} [className=''] — 附加类名
+ * @prop {object} [style] — 内联样式
+ */
+export default function Modal({
+  layout = 'center',
+  size = 'md',
+  title = '模态标题',
+  subtitle = '模态副标题',
+  children,
+  showFooterHint = true,
+  footerHint = '提示信息',
+  cancelText = '取消',
+  confirmText = '确定',
+  onCancel,
+  onConfirm,
+  onClose,
+  footer,
+  bodyClassName = '',
+  className = '',
+  style,
+}) {
+  const uid = useId();
+  const titleId = `${uid}-title`;
+  const subtitleId = `${uid}-subtitle`;
+
+  const sizeClass = layout === 'center' ? SIZE_CLASS[size] : '';
+
+  return (
+    <div
+      className={[`tfds-modal`, [PANEL_BASE, LAYOUT_CLASS[layout], sizeClass, className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
+      style={style}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      {...(subtitle ? { 'aria-describedby': subtitleId } : {})}
+     data-tfds-component="Modal">
+      <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_CLASS[layout], bodyClassName].filter(Boolean).join(' ')}>{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/Modal.tokens.js

@@ -0,0 +1,73 @@
+/**
+ * Modal — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 分组顺序：文本元素 → 容器区域 → 布局变体 → 尺寸 → 引用组件
+ * 大标题 → 描述文案 → 底部提示 → 标题栏 → 内容区 → 操作栏 → 面板 → layouts → sizes → 引用组件
+ */
+export const MODAL_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: 'min-height', value: '200px（center 布局）' },
+    { label: '弹性高度', cssProp: 'min-height', value: '0，弹性填充（fullscreen 布局）' },
+  ],
+  操作栏: [
+    { 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: 'padding-inline', token: '--spacing-6', value: '24px' },
+  ],
+  layouts: {
+    center: [
+      { label: '圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
+      { label: '投影', cssProp: 'box-shadow', token: '--shadow-lg', value: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)' },
+      { label: '最大高度', cssProp: 'max-height', value: '85vh' },
+    ],
+    fullscreen: [
+      { label: '顶部圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px（仅顶部）' },
+      { 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: 'height', value: 'calc(100% - 24px)' },
+      { label: '顶部间距', cssProp: 'margin-top', value: '24px（mt-auto 由外层保证）' },
+    ],
+  },
+  sizes: {
+    sm: [
+      { label: '最大宽度', cssProp: 'max-width', value: '450px（仅 center 布局）' },
+    ],
+    md: [
+      { label: '最大宽度', cssProp: 'max-width', value: '684px（仅 center 布局）' },
+    ],
+    lg: [
+      { label: '最大宽度', cssProp: 'max-width', value: '920px（仅 center 布局）' },
+    ],
+  },
+  引用组件: [
+    { label: '关闭按钮', cssProp: '—', value: 'Button ghost-black sm iconOnly' },
+    { label: '取消按钮', cssProp: '—', value: 'Button outline-black md' },
+    { label: '确定按钮', cssProp: '—', value: 'Button primary md' },
+  ],
+};