@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,47 @@
+export const SLIDER_TOKEN_MAP = {
+  轨道: [
+    { label: '背景颜色', cssProp: 'background-color', token: '--color-blueGrey-200', value: '#F2F4F7' },
+    { label: '区间颜色', cssProp: 'background-color', token: '--color-brand-500', value: '#56D3BC', state: 'active' },
+    { label: '区间颜色', cssProp: 'background-color', token: '--color-blueGrey-300', value: '#E4E7EC', state: 'disabled' },
+    { label: '轨道高度', cssProp: 'height', value: '4px' },
+    { label: '边框圆角', cssProp: 'border-radius', value: '9999px' },
+  ],
+  滑块: [
+    { label: '滑块宽度', cssProp: 'width', value: '20px' },
+    { label: '滑块高度', cssProp: 'height', value: '20px' },
+    { label: '滑块背景', cssProp: 'background-color', token: '--color-white', value: '#FFFFFF' },
+    { label: '滑块边框', cssProp: 'border-color', token: '--color-brand-500', value: '#56D3BC' },
+    { label: '滑块边框', cssProp: 'border-color', token: '--color-blueGrey-300', value: '#D1D5DB', state: 'disabled' },
+    { label: '边框宽度', cssProp: 'border-width', value: '2px' },
+    { label: '边框圆角', cssProp: 'border-radius', value: '9999px' },
+    { label: '拖拽阴影', cssProp: 'box-shadow', value: '0 0 0 4px rgba(86, 211, 188, 0.15)' },
+    { label: '默认阴影', cssProp: 'box-shadow', value: '0 1px 2px 0 rgba(0,0,0,0.05)' },
+  ],
+  刻度: [
+    { label: '刻度宽度', cssProp: 'width', value: '4px' },
+    { label: '刻度高度', cssProp: 'height', value: '4px' },
+    { label: '刻度颜色', cssProp: 'background-color', token: '--color-blueGrey-400', value: '#D0D5DD' },
+    { label: '刻度颜色', cssProp: 'background-color', token: '--color-brand-500', value: '#56D3BC', state: 'active' },
+    { label: '刻度颜色', cssProp: 'background-color', token: '--color-blueGrey-500', value: '#98A2B3', state: 'disabled' },
+    { label: '刻度圆角', cssProp: 'border-radius', value: '9999px' },
+  ],
+  提示气泡: [
+    { label: '背景颜色', cssProp: 'background-color', token: '--color-blueGrey-900', value: '#182230' },
+    { label: '文字颜色', cssProp: 'color', token: '--color-white', value: '#FFFFFF' },
+    { label: '字体大小', cssProp: 'font-size', value: '12px' },
+    { label: '内边距', cssProp: 'padding', value: '4px 8px' },
+    { label: '边框圆角', cssProp: 'border-radius', value: '6px' },
+    { label: '底部间距', cssProp: 'margin-bottom', value: '8px' },
+  ],
+  刻度标签: [
+    { label: '文字颜色', cssProp: 'color', token: '--color-blueGrey-600', value: '#667085' },
+    { label: '字体大小', cssProp: 'font-size', value: '12px' },
+    { label: '行高', cssProp: 'line-height', value: '1.5' },
+    { label: '顶部间距', cssProp: 'margin-top', value: '12px' },
+  ],
+  尺寸: [
+    { label: '默认宽度', cssProp: 'width', value: '300px' },
+    { label: '热区高度', cssProp: 'height', value: '32px' },
+    { label: '刻度底距', cssProp: 'padding-bottom', value: '30px', state: 'marks-on' },
+  ],
+};

package/src/_b_end_runtime/components/Switch.jsx

@@ -0,0 +1,124 @@
+/**
+ * Switch — 开关切换
+ * @prop {'brand'|'black'} [variant='brand'] — 变体样式
+ * @prop {boolean} checked — 是否开启（受控，无默认）
+ * @prop {boolean} [defaultChecked=false] — 非受控初始开启
+ * @prop {function} [onChange=null] — 状态切换回调
+ * @prop {boolean} [disabled=false] — 是否禁用
+ * @prop {string} [className=''] — 根节点类名
+ */
+
+import { useState, useCallback } from 'react';
+
+/* ── 按钮根节点（可聚焦、可键盘操作） ── */
+const BASE = [
+  'group inline-flex items-center justify-center shrink-0',
+  'rounded-full border-none p-0 m-0',
+  'bg-transparent cursor-pointer',
+  'transition-colors duration-200',
+  '[outline:2px_solid_transparent] outline-offset-2',
+  'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
+].join(' ');
+
+/* ── 轨道：关闭态（两 variant 共用） ── */
+const TRACK_OFF = [
+  'bg-fill',
+  'group-hover:bg-blueGrey-300',
+].join(' ');
+
+/* ── 轨道：开启态 ── */
+const TRACK_ON = {
+  brand: [
+    'bg-brand-500',
+    'group-hover:bg-brand-600',
+  ].join(' '),
+  black: [
+    'bg-grey-950',
+    'group-hover:bg-grey-900',
+  ].join(' '),
+};
+
+const FOCUS_CLASS = {
+  brand: 'focus-visible:outline-brand-200',
+  black: 'focus-visible:outline-grey-400',
+};
+
+/* ── 固定 MD 尺寸：轨道宽高、滑块尺寸、滑块开启时平移量（与内边距 2px 对齐） ── */
+const SIZE_CLASS = {
+  track: 'w-[44px] h-[24px] p-[2px]',
+  thumb: 'size-[20px]',
+  thumbOn: 'translate-x-[20px]',
+};
+
+const THUMB_BASE = [
+  'block rounded-full bg-white',
+  'shadow-[0_1px_2px_rgba(16,24,40,0.08)]',
+  'transition-transform duration-200 ease-out',
+  'pointer-events-none',
+].join(' ');
+
+export default function Switch({
+  variant = 'brand',
+  size: _size = 'md',
+  checked,
+  defaultChecked = false,
+  onChange,
+  disabled = false,
+  className = '',
+  ...rest
+}) {
+  const isControlled = checked !== undefined;
+  const [innerChecked, setInnerChecked] = useState(defaultChecked);
+  const isOn = isControlled ? Boolean(checked) : innerChecked;
+
+  const sz = SIZE_CLASS;
+
+  const setNext = useCallback((next, e) => {
+    if (!isControlled) setInnerChecked(next);
+    onChange?.(next, e);
+  }, [isControlled, onChange]);
+
+  const toggle = useCallback((e) => {
+    if (disabled) return;
+    setNext(!isOn, e);
+  }, [disabled, isOn, setNext]);
+
+  const onKeyDown = useCallback((e) => {
+    if (disabled) return;
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      setNext(!isOn, e);
+    }
+  }, [disabled, isOn, setNext]);
+
+  const trackCls = [
+    'flex items-center rounded-full',
+    sz.track,
+    isOn ? TRACK_ON[variant] : TRACK_OFF,
+  ].join(' ');
+
+  const thumbCls = [
+    THUMB_BASE,
+    sz.thumb,
+    isOn ? sz.thumbOn : 'translate-x-0',
+  ].join(' ');
+
+  const rootCls = [BASE, FOCUS_CLASS[variant], className].filter(Boolean).join(' ');
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isOn}
+      disabled={disabled}
+      className={[`tfds-switch`, rootCls].filter(Boolean).join(' ')}
+      onClick={toggle}
+      onKeyDown={onKeyDown}
+      {...rest}
+     data-tfds-component="Switch">
+      <span className={trackCls} aria-hidden>
+        <span className={thumbCls} />
+      </span>
+    </button>
+  );
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Switch — TOKEN_MAP（供平台属性面板展示）
+ * 组件实现代码见 Switch.jsx
+ */
+export const SWITCH_TOKEN_MAP = {
+  base: [
+    { label: '关轨底色', cssProp: 'background', token: '--color-blueGrey-200', value: '#E4E7EC' },
+    { label: '关轨悬色', cssProp: 'background', token: '--color-blueGrey-300', value: '#D0D5DD', state: 'hover' },
+    { label: '滑块', cssProp: 'background', token: '--color-white', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '滑块阴影', cssProp: 'box-shadow', value: '0 1px 2px rgba(16,24,40,0.08)' },
+  ],
+  variants: {
+    brand: [
+      { label: '开轨底色', cssProp: 'background', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary' },
+      { label: '开轨悬色', cssProp: 'background', token: '--color-brand-600', value: '#32C4AC', state: 'hover', semanticRef: 'status-primary.hover' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-brand-200', value: '#A8E8D7', state: 'focus' },
+    ],
+    black: [
+      { label: '开轨底色', cssProp: 'background', token: '--color-grey-950', value: '#111116' },
+      { label: '开轨悬色', cssProp: 'background', token: '--color-grey-900', value: '#1C1C23', state: 'hover' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'focus' },
+    ],
+  },
+  sizes: {
+    sm: [
+      { label: '轨道宽度', cssProp: 'width', value: '36px' },
+      { label: '轨道高度', cssProp: 'height', value: '20px' },
+      { label: '轨道内距', cssProp: 'padding', value: '2px' },
+      { label: '滑块边长', cssProp: 'width / height', value: '16px' },
+    ],
+    md: [
+      { label: '轨道宽度', cssProp: 'width', value: '44px' },
+      { label: '轨道高度', cssProp: 'height', value: '24px' },
+      { label: '轨道内距', cssProp: 'padding', value: '2px' },
+      { label: '滑块边长', cssProp: 'width / height', value: '20px' },
+    ],
+  },
+};