@unif/react-native-design 0.30.1 → 0.31.1

package/lib/module/components/ui/BorderBeam/BorderBeam.js

@@ -0,0 +1,100 @@
+"use strict";
+
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { cancelAnimation, Easing, ReduceMotion, useAnimatedProps, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import Svg, { Rect } from 'react-native-svg';
+import { radius, useColors, usePrefersReducedMotion } from "../../../theme/index.js";
+import { A11Y_HIDDEN_PROPS } from "../shared/a11y.js";
+import { normalizeBorderBeam } from "./normalizeBorderBeam.js";
+import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from "./shared.js";
+import { styles } from "./styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+/**
+ * 沿内容边缘循环移动的装饰性流光描边。
+ *
+ * 组件不承载加载、错误或焦点语义；业务状态仍由调用方自己的可访问元素表达。
+ * 系统开启「减弱动态效果」时隐藏流光，只保留原内容。
+ */
+export function BorderBeam({
+  children,
+  active = true,
+  color,
+  duration,
+  lineWidth,
+  size,
+  borderRadius = radius.md,
+  style,
+  testID
+}) {
+  const colors = useColors();
+  const reducedMotion = usePrefersReducedMotion();
+  const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
+  const normalized = normalizeBorderBeam({
+    duration,
+    lineWidth,
+    size,
+    borderRadius
+  });
+  const geometry = borderBeamGeometry({
+    layout,
+    ...normalized
+  });
+  const dashOffset = useSharedValue(0);
+  const showVisual = active && !reducedMotion && geometry.perimeter > 0;
+  useEffect(() => {
+    cancelAnimation(dashOffset);
+    dashOffset.value = 0;
+    if (!showVisual) return;
+    dashOffset.value = withRepeat(withTiming(-geometry.perimeter, {
+      duration: normalized.duration,
+      easing: Easing.linear,
+      reduceMotion: ReduceMotion.System
+    }), -1, false, undefined, ReduceMotion.System);
+    return () => cancelAnimation(dashOffset);
+  }, [dashOffset, geometry.perimeter, normalized.duration, showVisual]);
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: dashOffset.value
+  }));
+  const handleLayout = event => {
+    const width = Math.max(0, event.nativeEvent.layout.width);
+    const height = Math.max(0, event.nativeEvent.layout.height);
+    setLayout(current => current.width === width && current.height === height ? current : {
+      width,
+      height
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: handleLayout,
+    style: [styles.container, {
+      borderRadius: normalized.borderRadius
+    }, style],
+    testID: testID,
+    children: [children, showVisual ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: styles.visual,
+      ...A11Y_HIDDEN_PROPS,
+      children: /*#__PURE__*/_jsx(Svg, {
+        width: layout.width,
+        height: layout.height,
+        children: /*#__PURE__*/_jsx(AnimatedRect, {
+          animatedProps: animatedProps,
+          x: normalized.lineWidth / 2,
+          y: normalized.lineWidth / 2,
+          width: geometry.rectWidth,
+          height: geometry.rectHeight,
+          rx: geometry.radius,
+          ry: geometry.radius,
+          fill: "none",
+          stroke: color ?? colors.primary,
+          strokeWidth: normalized.lineWidth,
+          strokeLinecap: "round",
+          strokeDasharray: [geometry.beamLength, Math.max(0, geometry.perimeter - geometry.beamLength)]
+        })
+      })
+    }) : null]
+  });
+}
+//# sourceMappingURL=BorderBeam.js.map

package/lib/module/components/ui/BorderBeam/BorderBeam.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","View","Animated","cancelAnimation","Easing","ReduceMotion","useAnimatedProps","useSharedValue","withRepeat","withTiming","Svg","Rect","radius","useColors","usePrefersReducedMotion","A11Y_HIDDEN_PROPS","normalizeBorderBeam","borderBeamGeometry","EMPTY_BORDER_BEAM_LAYOUT","styles","jsx","_jsx","jsxs","_jsxs","AnimatedRect","createAnimatedComponent","BorderBeam","children","active","color","duration","lineWidth","size","borderRadius","md","style","testID","colors","reducedMotion","layout","setLayout","normalized","geometry","dashOffset","showVisual","perimeter","value","easing","linear","reduceMotion","System","undefined","animatedProps","strokeDashoffset","handleLayout","event","width","Math","max","nativeEvent","height","current","onLayout","container","pointerEvents","visual","x","y","rectWidth","rectHeight","rx","ry","fill","stroke","primary","strokeWidth","strokeLinecap","strokeDasharray","beamLength"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/BorderBeam.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/BorderBeam.web.js

@@ -0,0 +1,100 @@
+"use strict";
+
+import React, { useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+import { radius, useColors, usePrefersReducedMotion } from "../../../theme/index.js";
+import { A11Y_HIDDEN_PROPS } from "../shared/a11y.js";
+import { normalizeBorderBeam } from "./normalizeBorderBeam.js";
+import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from "./shared.js";
+import { styles } from "./styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const KEYFRAMES_ID = 'unif-border-beam-keyframes';
+const win = globalThis;
+function ensureKeyframes() {
+  if (typeof win.document === 'undefined') return;
+  if (win.document.getElementById(KEYFRAMES_ID)) return;
+  const sheet = win.document.createElement('style');
+  sheet.id = KEYFRAMES_ID;
+  sheet.textContent = '@keyframes unif-border-beam-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(-1 * var(--unif-border-beam-path)); } }';
+  win.document.head.appendChild(sheet);
+}
+
+/** Web 版用 CSS keyframes 插值，JS 只在布局或 props 变化时更新一次。 */
+export function BorderBeam({
+  children,
+  active = true,
+  color,
+  duration,
+  lineWidth,
+  size,
+  borderRadius = radius.md,
+  style,
+  testID
+}) {
+  const colors = useColors();
+  const reducedMotion = usePrefersReducedMotion();
+  const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
+  const rectRef = useRef(null);
+  const normalized = normalizeBorderBeam({
+    duration,
+    lineWidth,
+    size,
+    borderRadius
+  });
+  const geometry = borderBeamGeometry({
+    layout,
+    ...normalized
+  });
+  const showVisual = active && !reducedMotion && geometry.perimeter > 0;
+  useEffect(() => {
+    if (!showVisual) return;
+    ensureKeyframes();
+    const node = rectRef.current;
+    if (!node?.style) return;
+    node.style.setProperty('--unif-border-beam-path', `${geometry.perimeter}px`);
+    node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
+    return () => {
+      node.style.animation = '';
+    };
+  }, [geometry.perimeter, normalized.duration, showVisual]);
+  const handleLayout = event => {
+    const width = Math.max(0, event.nativeEvent.layout.width);
+    const height = Math.max(0, event.nativeEvent.layout.height);
+    setLayout(current => current.width === width && current.height === height ? current : {
+      width,
+      height
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: handleLayout,
+    style: [styles.container, {
+      borderRadius: normalized.borderRadius
+    }, style],
+    testID: testID,
+    children: [children, showVisual ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: styles.visual,
+      ...A11Y_HIDDEN_PROPS,
+      children: /*#__PURE__*/_jsx(Svg, {
+        width: layout.width,
+        height: layout.height,
+        children: /*#__PURE__*/_jsx(Rect, {
+          ref: rectRef,
+          x: normalized.lineWidth / 2,
+          y: normalized.lineWidth / 2,
+          width: geometry.rectWidth,
+          height: geometry.rectHeight,
+          rx: geometry.radius,
+          ry: geometry.radius,
+          fill: "none",
+          stroke: color ?? colors.primary,
+          strokeWidth: normalized.lineWidth,
+          strokeLinecap: "round",
+          strokeDasharray: [geometry.beamLength, Math.max(0, geometry.perimeter - geometry.beamLength)]
+        })
+      })
+    }) : null]
+  });
+}
+//# sourceMappingURL=BorderBeam.web.js.map

package/lib/module/components/ui/BorderBeam/BorderBeam.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","View","Svg","Rect","radius","useColors","usePrefersReducedMotion","A11Y_HIDDEN_PROPS","normalizeBorderBeam","borderBeamGeometry","EMPTY_BORDER_BEAM_LAYOUT","styles","jsx","_jsx","jsxs","_jsxs","KEYFRAMES_ID","win","globalThis","ensureKeyframes","document","getElementById","sheet","createElement","id","textContent","head","appendChild","BorderBeam","children","active","color","duration","lineWidth","size","borderRadius","md","style","testID","colors","reducedMotion","layout","setLayout","rectRef","normalized","geometry","showVisual","perimeter","node","current","setProperty","animation","handleLayout","event","width","Math","max","nativeEvent","height","onLayout","container","pointerEvents","visual","ref","x","y","rectWidth","rectHeight","rx","ry","fill","stroke","primary","strokeWidth","strokeLinecap","strokeDasharray","beamLength"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/BorderBeam.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { BorderBeam } from './BorderBeam';
+//# sourceMappingURL=index.js.map

package/lib/module/components/ui/BorderBeam/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BorderBeam"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/normalizeBorderBeam.js

@@ -0,0 +1,23 @@
+"use strict";
+
+export const BORDER_BEAM_DEFAULTS = {
+  duration: 6000,
+  lineWidth: 1,
+  size: 40,
+  borderRadius: 12
+};
+const normalizeNumber = (value, fallback, min, max, allowZero = false) => {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value < 0 || !allowZero && value === 0) {
+    return fallback;
+  }
+  return Math.min(max, Math.max(min, value));
+};
+export function normalizeBorderBeam(input) {
+  return {
+    duration: normalizeNumber(input.duration, BORDER_BEAM_DEFAULTS.duration, 300, 60_000),
+    lineWidth: normalizeNumber(input.lineWidth, BORDER_BEAM_DEFAULTS.lineWidth, 0.5, 8),
+    size: normalizeNumber(input.size, BORDER_BEAM_DEFAULTS.size, 8, 1_000),
+    borderRadius: normalizeNumber(input.borderRadius, BORDER_BEAM_DEFAULTS.borderRadius, 0, 1_000, true)
+  };
+}
+//# sourceMappingURL=normalizeBorderBeam.js.map

package/lib/module/components/ui/BorderBeam/normalizeBorderBeam.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BORDER_BEAM_DEFAULTS","duration","lineWidth","size","borderRadius","normalizeNumber","value","fallback","min","max","allowZero","Number","isFinite","Math","normalizeBorderBeam","input"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/normalizeBorderBeam.ts"],"mappings":";;AAOA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAE,CAAC;EACZC,IAAI,EAAE,EAAE;EACRC,YAAY,EAAE;AAChB,CAAC;AAID,MAAMC,eAAe,GAAGA,CACtBC,KAAyB,EACzBC,QAAgB,EAChBC,GAAW,EACXC,GAAW,EACXC,SAAS,GAAG,KAAK,KACN;EACX,IACE,OAAOJ,KAAK,KAAK,QAAQ,IACzB,CAACK,MAAM,CAACC,QAAQ,CAACN,KAAK,CAAC,IACvBA,KAAK,GAAG,CAAC,IACR,CAACI,SAAS,IAAIJ,KAAK,KAAK,CAAE,EAC3B;IACA,OAAOC,QAAQ;EACjB;EACA,OAAOM,IAAI,CAACL,GAAG,CAACC,GAAG,EAAEI,IAAI,CAACJ,GAAG,CAACD,GAAG,EAAEF,KAAK,CAAC,CAAC;AAC5C,CAAC;AAED,OAAO,SAASQ,mBAAmBA,CAACC,KAAwB,EAAE;EAC5D,OAAO;IACLd,QAAQ,EAAEI,eAAe,CACvBU,KAAK,CAACd,QAAQ,EACdD,oBAAoB,CAACC,QAAQ,EAC7B,GAAG,EACH,MACF,CAAC;IACDC,SAAS,EAAEG,eAAe,CACxBU,KAAK,CAACb,SAAS,EACfF,oBAAoB,CAACE,SAAS,EAC9B,GAAG,EACH,CACF,CAAC;IACDC,IAAI,EAAEE,eAAe,CAACU,KAAK,CAACZ,IAAI,EAAEH,oBAAoB,CAACG,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC;IACtEC,YAAY,EAAEC,eAAe,CAC3BU,KAAK,CAACX,YAAY,EAClBJ,oBAAoB,CAACI,YAAY,EACjC,CAAC,EACD,KAAK,EACL,IACF;EACF,CAAC;AACH","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/shared.js

@@ -0,0 +1,24 @@
+"use strict";
+
+export const EMPTY_BORDER_BEAM_LAYOUT = {
+  width: 0,
+  height: 0
+};
+export function borderBeamGeometry(input) {
+  const {
+    layout,
+    lineWidth
+  } = input;
+  const rectWidth = Math.max(0, layout.width - lineWidth);
+  const rectHeight = Math.max(0, layout.height - lineWidth);
+  const perimeter = Math.max(0, 2 * (rectWidth + rectHeight));
+  const beamLength = Math.min(input.size, perimeter / 2);
+  return {
+    beamLength,
+    perimeter,
+    rectHeight,
+    rectWidth,
+    radius: Math.min(input.borderRadius, rectWidth / 2, rectHeight / 2)
+  };
+}
+//# sourceMappingURL=shared.js.map

package/lib/module/components/ui/BorderBeam/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["EMPTY_BORDER_BEAM_LAYOUT","width","height","borderBeamGeometry","input","layout","lineWidth","rectWidth","Math","max","rectHeight","perimeter","beamLength","min","size","radius","borderRadius"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/shared.ts"],"mappings":";;AAEA,OAAO,MAAMA,wBAA0C,GAAG;EACxDC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACV,CAAC;AAED,OAAO,SAASC,kBAAkBA,CAACC,KAKlC,EAAE;EACD,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAGF,KAAK;EACnC,MAAMG,SAAS,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,MAAM,CAACJ,KAAK,GAAGK,SAAS,CAAC;EACvD,MAAMI,UAAU,GAAGF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,MAAM,CAACH,MAAM,GAAGI,SAAS,CAAC;EACzD,MAAMK,SAAS,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAIF,SAAS,GAAGG,UAAU,CAAC,CAAC;EAC3D,MAAME,UAAU,GAAGJ,IAAI,CAACK,GAAG,CAACT,KAAK,CAACU,IAAI,EAAEH,SAAS,GAAG,CAAC,CAAC;EACtD,OAAO;IACLC,UAAU;IACVD,SAAS;IACTD,UAAU;IACVH,SAAS;IACTQ,MAAM,EAAEP,IAAI,CAACK,GAAG,CAACT,KAAK,CAACY,YAAY,EAAET,SAAS,GAAG,CAAC,EAAEG,UAAU,GAAG,CAAC;EACpE,CAAC;AACH","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+  container: {
+    position: 'relative'
+  },
+  visual: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+    elevation: 1
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/ui/BorderBeam/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","styles","create","container","position","visual","top","right","bottom","left","zIndex","elevation"],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,OAAO,MAAMC,MAAM,GAAGD,UAAU,CAACE,MAAM,CAAC;EACtCC,SAAS,EAAE;IACTC,QAAQ,EAAE;EACZ,CAAC;EACDC,MAAM,EAAE;IACND,QAAQ,EAAE,UAAU;IACpBE,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE,CAAC;IACPC,MAAM,EAAE,CAAC;IACTC,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/ui/BorderBeam/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/components/ui/BorderBeam/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/ui/BorderBeam/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/ui/index.js

@@ -3,6 +3,7 @@
 export { Avatar } from "./Avatar/index.js";
 export { AvatarGroup } from "./AvatarGroup/index.js";
 export { BlurLayer } from "./BlurLayer/index.js";
+export { BorderBeam } from "./BorderBeam/index.js";
 export { Button } from "./Button/index.js";
 export { Card } from "./Card/index.js";
 export { Carousel } from "./Carousel/index.js";

package/lib/module/components/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Avatar","AvatarGroup","BlurLayer","Button","Card","Carousel","Cell","List","Checkbox","Chip","CircularProgress","confirm","ConfirmHost","DrawerHeader","Empty","EntryCard","Form","FormGroup","FormRow","Grid","Icon","IconButton","Input","Logo","NavBar","PasswordInput","Pulse","PulseDot","usePulse","Radio","Reveal","Ribbon","Search","Skeleton","Segmented","Spinner","StatusDot","Stepper","Switch","TabBar","Tabs","Tag","Textarea","Thumbnail","toast","ToastHost"],"sourceRoot":"../../../../src","sources":["components/ui/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,mBAAU;AAOjC,SAASC,WAAW,QAAQ,wBAAe;AAE3C,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,EAAEC,IAAI,QAAQ,iBAAQ;AAQnC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,gBAAgB,QAAQ,6BAAoB;AAErD,SAASC,OAAO,EAAEC,WAAW,QAAQ,oBAAW;AAEhD,SAASC,YAAY,QAAQ,yBAAgB;AAE7C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,IAAI,EAAEC,SAAS,EAAEC,OAAO,QAAQ,iBAAQ;AAEjD,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,UAAU,QAAQ,uBAAc;AAEzC,SAASC,KAAK,QAAQ,kBAAS;AAO/B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,aAAa,QAAQ,0BAAiB;AAE/C,SAASC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,kBAAS;AAEnD,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,GAAG,QAAQ,gBAAO;AAE3B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,KAAK,EAAEC,SAAS,QAAQ,kBAAS","ignoreList":[]}
+{"version":3,"names":["Avatar","AvatarGroup","BlurLayer","BorderBeam","Button","Card","Carousel","Cell","List","Checkbox","Chip","CircularProgress","confirm","ConfirmHost","DrawerHeader","Empty","EntryCard","Form","FormGroup","FormRow","Grid","Icon","IconButton","Input","Logo","NavBar","PasswordInput","Pulse","PulseDot","usePulse","Radio","Reveal","Ribbon","Search","Skeleton","Segmented","Spinner","StatusDot","Stepper","Switch","TabBar","Tabs","Tag","Textarea","Thumbnail","toast","ToastHost"],"sourceRoot":"../../../../src","sources":["components/ui/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,mBAAU;AAOjC,SAASC,WAAW,QAAQ,wBAAe;AAE3C,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,UAAU,QAAQ,uBAAc;AAEzC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,EAAEC,IAAI,QAAQ,iBAAQ;AAQnC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,gBAAgB,QAAQ,6BAAoB;AAErD,SAASC,OAAO,EAAEC,WAAW,QAAQ,oBAAW;AAEhD,SAASC,YAAY,QAAQ,yBAAgB;AAE7C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,IAAI,EAAEC,SAAS,EAAEC,OAAO,QAAQ,iBAAQ;AAEjD,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,UAAU,QAAQ,uBAAc;AAEzC,SAASC,KAAK,QAAQ,kBAAS;AAO/B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,aAAa,QAAQ,0BAAiB;AAE/C,SAASC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,kBAAS;AAEnD,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,GAAG,QAAQ,gBAAO;AAE3B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,KAAK,EAAEC,SAAS,QAAQ,kBAAS","ignoreList":[]}

package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { BorderBeamProps } from './types';
+/**
+ * 沿内容边缘循环移动的装饰性流光描边。
+ *
+ * 组件不承载加载、错误或焦点语义；业务状态仍由调用方自己的可访问元素表达。
+ * 系统开启「减弱动态效果」时隐藏流光，只保留原内容。
+ */
+export declare function BorderBeam({ children, active, color, duration, lineWidth, size, borderRadius, style, testID, }: BorderBeamProps): React.JSX.Element;
+//# sourceMappingURL=BorderBeam.d.ts.map

package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderBeam.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmBnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiFrC"}

package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.web.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { BorderBeamProps } from './types';
+/** Web 版用 CSS keyframes 插值，JS 只在布局或 props 变化时更新一次。 */
+export declare function BorderBeam({ children, active, color, duration, lineWidth, size, borderRadius, style, testID, }: BorderBeamProps): React.JSX.Element;
+//# sourceMappingURL=BorderBeam.web.d.ts.map

package/lib/typescript/src/components/ui/BorderBeam/BorderBeam.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderBeam.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/BorderBeam.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAe/C,sDAAsD;AACtD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,MAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAwB,EACxB,KAAK,EACL,MAAM,GACP,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2ErC"}

package/lib/typescript/src/components/ui/BorderBeam/index.d.ts

@@ -0,0 +1,3 @@
+export { BorderBeam } from './BorderBeam';
+export type { BorderBeamProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/ui/BorderBeam/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/src/components/ui/BorderBeam/normalizeBorderBeam.d.ts

@@ -0,0 +1,16 @@
+export type NormalizedBorderBeam = {
+    duration: number;
+    lineWidth: number;
+    size: number;
+    borderRadius: number;
+};
+export declare const BORDER_BEAM_DEFAULTS: NormalizedBorderBeam;
+type BorderBeamNumbers = Partial<NormalizedBorderBeam>;
+export declare function normalizeBorderBeam(input: BorderBeamNumbers): {
+    duration: number;
+    lineWidth: number;
+    size: number;
+    borderRadius: number;
+};
+export {};
+//# sourceMappingURL=normalizeBorderBeam.d.ts.map

package/lib/typescript/src/components/ui/BorderBeam/normalizeBorderBeam.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeBorderBeam.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/normalizeBorderBeam.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBAKlC,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAoBvD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB;;;;;EAuB3D"}

package/lib/typescript/src/components/ui/BorderBeam/shared.d.ts

@@ -0,0 +1,18 @@
+export type BorderBeamLayout = Readonly<{
+    width: number;
+    height: number;
+}>;
+export declare const EMPTY_BORDER_BEAM_LAYOUT: BorderBeamLayout;
+export declare function borderBeamGeometry(input: {
+    layout: BorderBeamLayout;
+    lineWidth: number;
+    size: number;
+    borderRadius: number;
+}): {
+    beamLength: number;
+    perimeter: number;
+    rectHeight: number;
+    rectWidth: number;
+    radius: number;
+};
+//# sourceMappingURL=shared.d.ts.map

package/lib/typescript/src/components/ui/BorderBeam/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/shared.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,eAAO,MAAM,wBAAwB,EAAE,gBAGtC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;;;;;;EAaA"}

package/lib/typescript/src/components/ui/BorderBeam/styles.d.ts

@@ -0,0 +1,15 @@
+export declare const styles: Readonly<{
+    container: {
+        position: "relative";
+    };
+    visual: {
+        position: "absolute";
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        zIndex: number;
+        elevation: number;
+    };
+}>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/ui/BorderBeam/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;EAajB,CAAC"}

package/lib/typescript/src/components/ui/BorderBeam/types.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type BorderBeamProps = {
+    /** 被流光描边包围的内容。 */
+    children: ReactNode;
+    /** 是否显示并运行动画，默认 true。 */
+    active?: boolean;
+    /** 流光颜色，默认主题 primary。 */
+    color?: string;
+    /** 绕边一周的时长（毫秒），默认 6000。 */
+    duration?: number;
+    /** 描边宽度，默认 1。 */
+    lineWidth?: number;
+    /** 流光段长度（布局单位），默认 40。 */
+    size?: number;
+    /** 圆角半径，默认 radius.md。 */
+    borderRadius?: number;
+    /** 外层布局样式。 */
+    style?: StyleProp<ViewStyle>;
+    /** E2E / 测试定位。 */
+    testID?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/ui/BorderBeam/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BorderBeam/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/lib/typescript/src/components/ui/index.d.ts

@@ -4,6 +4,8 @@ export { AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupItem, AvatarGroupProps } from './AvatarGroup';
 export { BlurLayer } from './BlurLayer';
 export type { BlurLayerProps } from './BlurLayer';
+export { BorderBeam } from './BorderBeam';
+export type { BorderBeamProps } from './BorderBeam';
 export { Button } from './Button';
 export type { ButtonProps, ButtonSize, ButtonVariant } from './Button';
 export { Card } from './Card';

package/lib/typescript/src/components/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-design",
-  "version": "0.30.1",
+  "version": "0.31.1",
   "description": "Unif 设计系统:theme + icons + utils + components",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/ui/BorderBeam/BorderBeam.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { View } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  ReduceMotion,
+  useAnimatedProps,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Rect } from 'react-native-svg';
+
+import { radius, useColors, usePrefersReducedMotion } from '../../../theme';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import { normalizeBorderBeam } from './normalizeBorderBeam';
+import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from './shared';
+import { styles } from './styles';
+import type { BorderBeamProps } from './types';
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+/**
+ * 沿内容边缘循环移动的装饰性流光描边。
+ *
+ * 组件不承载加载、错误或焦点语义；业务状态仍由调用方自己的可访问元素表达。
+ * 系统开启「减弱动态效果」时隐藏流光，只保留原内容。
+ */
+export function BorderBeam({
+  children,
+  active = true,
+  color,
+  duration,
+  lineWidth,
+  size,
+  borderRadius = radius.md,
+  style,
+  testID,
+}: BorderBeamProps): React.JSX.Element {
+  const colors = useColors();
+  const reducedMotion = usePrefersReducedMotion();
+  const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
+  const normalized = normalizeBorderBeam({
+    duration,
+    lineWidth,
+    size,
+    borderRadius,
+  });
+  const geometry = borderBeamGeometry({ layout, ...normalized });
+  const dashOffset = useSharedValue(0);
+  const showVisual = active && !reducedMotion && geometry.perimeter > 0;
+
+  useEffect(() => {
+    cancelAnimation(dashOffset);
+    dashOffset.value = 0;
+    if (!showVisual) return;
+    dashOffset.value = withRepeat(
+      withTiming(-geometry.perimeter, {
+        duration: normalized.duration,
+        easing: Easing.linear,
+        reduceMotion: ReduceMotion.System,
+      }),
+      -1,
+      false,
+      undefined,
+      ReduceMotion.System
+    );
+    return () => cancelAnimation(dashOffset);
+  }, [dashOffset, geometry.perimeter, normalized.duration, showVisual]);
+
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: dashOffset.value,
+  }));
+  const handleLayout = (event: LayoutChangeEvent): void => {
+    const width = Math.max(0, event.nativeEvent.layout.width);
+    const height = Math.max(0, event.nativeEvent.layout.height);
+    setLayout((current) =>
+      current.width === width && current.height === height
+        ? current
+        : { width, height }
+    );
+  };
+
+  return (
+    <View
+      onLayout={handleLayout}
+      style={[
+        styles.container,
+        { borderRadius: normalized.borderRadius },
+        style,
+      ]}
+      testID={testID}
+    >
+      {children}
+      {showVisual ? (
+        <View pointerEvents="none" style={styles.visual} {...A11Y_HIDDEN_PROPS}>
+          <Svg width={layout.width} height={layout.height}>
+            <AnimatedRect
+              animatedProps={animatedProps}
+              x={normalized.lineWidth / 2}
+              y={normalized.lineWidth / 2}
+              width={geometry.rectWidth}
+              height={geometry.rectHeight}
+              rx={geometry.radius}
+              ry={geometry.radius}
+              fill="none"
+              stroke={color ?? colors.primary}
+              strokeWidth={normalized.lineWidth}
+              strokeLinecap="round"
+              strokeDasharray={[
+                geometry.beamLength,
+                Math.max(0, geometry.perimeter - geometry.beamLength),
+              ]}
+            />
+          </Svg>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/ui/BorderBeam/BorderBeam.web.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { View } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+
+import { radius, useColors, usePrefersReducedMotion } from '../../../theme';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import { normalizeBorderBeam } from './normalizeBorderBeam';
+import { borderBeamGeometry, EMPTY_BORDER_BEAM_LAYOUT } from './shared';
+import { styles } from './styles';
+import type { BorderBeamProps } from './types';
+
+const KEYFRAMES_ID = 'unif-border-beam-keyframes';
+const win: any = globalThis as any;
+
+function ensureKeyframes(): void {
+  if (typeof win.document === 'undefined') return;
+  if (win.document.getElementById(KEYFRAMES_ID)) return;
+  const sheet = win.document.createElement('style');
+  sheet.id = KEYFRAMES_ID;
+  sheet.textContent =
+    '@keyframes unif-border-beam-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(-1 * var(--unif-border-beam-path)); } }';
+  win.document.head.appendChild(sheet);
+}
+
+/** Web 版用 CSS keyframes 插值，JS 只在布局或 props 变化时更新一次。 */
+export function BorderBeam({
+  children,
+  active = true,
+  color,
+  duration,
+  lineWidth,
+  size,
+  borderRadius = radius.md,
+  style,
+  testID,
+}: BorderBeamProps): React.JSX.Element {
+  const colors = useColors();
+  const reducedMotion = usePrefersReducedMotion();
+  const [layout, setLayout] = useState(EMPTY_BORDER_BEAM_LAYOUT);
+  const rectRef = useRef<any>(null);
+  const normalized = normalizeBorderBeam({
+    duration,
+    lineWidth,
+    size,
+    borderRadius,
+  });
+  const geometry = borderBeamGeometry({ layout, ...normalized });
+  const showVisual = active && !reducedMotion && geometry.perimeter > 0;
+
+  useEffect(() => {
+    if (!showVisual) return;
+    ensureKeyframes();
+    const node = rectRef.current;
+    if (!node?.style) return;
+    node.style.setProperty(
+      '--unif-border-beam-path',
+      `${geometry.perimeter}px`
+    );
+    node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
+    return () => {
+      node.style.animation = '';
+    };
+  }, [geometry.perimeter, normalized.duration, showVisual]);
+
+  const handleLayout = (event: LayoutChangeEvent): void => {
+    const width = Math.max(0, event.nativeEvent.layout.width);
+    const height = Math.max(0, event.nativeEvent.layout.height);
+    setLayout((current) =>
+      current.width === width && current.height === height
+        ? current
+        : { width, height }
+    );
+  };
+
+  return (
+    <View
+      onLayout={handleLayout}
+      style={[
+        styles.container,
+        { borderRadius: normalized.borderRadius },
+        style,
+      ]}
+      testID={testID}
+    >
+      {children}
+      {showVisual ? (
+        <View pointerEvents="none" style={styles.visual} {...A11Y_HIDDEN_PROPS}>
+          <Svg width={layout.width} height={layout.height}>
+            <Rect
+              ref={rectRef}
+              x={normalized.lineWidth / 2}
+              y={normalized.lineWidth / 2}
+              width={geometry.rectWidth}
+              height={geometry.rectHeight}
+              rx={geometry.radius}
+              ry={geometry.radius}
+              fill="none"
+              stroke={color ?? colors.primary}
+              strokeWidth={normalized.lineWidth}
+              strokeLinecap="round"
+              strokeDasharray={[
+                geometry.beamLength,
+                Math.max(0, geometry.perimeter - geometry.beamLength),
+              ]}
+            />
+          </Svg>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/ui/BorderBeam/index.ts

@@ -0,0 +1,2 @@
+export { BorderBeam } from './BorderBeam';
+export type { BorderBeamProps } from './types';

package/src/components/ui/BorderBeam/normalizeBorderBeam.ts

@@ -0,0 +1,58 @@
+export type NormalizedBorderBeam = {
+  duration: number;
+  lineWidth: number;
+  size: number;
+  borderRadius: number;
+};
+
+export const BORDER_BEAM_DEFAULTS: NormalizedBorderBeam = {
+  duration: 6000,
+  lineWidth: 1,
+  size: 40,
+  borderRadius: 12,
+};
+
+type BorderBeamNumbers = Partial<NormalizedBorderBeam>;
+
+const normalizeNumber = (
+  value: number | undefined,
+  fallback: number,
+  min: number,
+  max: number,
+  allowZero = false
+): number => {
+  if (
+    typeof value !== 'number' ||
+    !Number.isFinite(value) ||
+    value < 0 ||
+    (!allowZero && value === 0)
+  ) {
+    return fallback;
+  }
+  return Math.min(max, Math.max(min, value));
+};
+
+export function normalizeBorderBeam(input: BorderBeamNumbers) {
+  return {
+    duration: normalizeNumber(
+      input.duration,
+      BORDER_BEAM_DEFAULTS.duration,
+      300,
+      60_000
+    ),
+    lineWidth: normalizeNumber(
+      input.lineWidth,
+      BORDER_BEAM_DEFAULTS.lineWidth,
+      0.5,
+      8
+    ),
+    size: normalizeNumber(input.size, BORDER_BEAM_DEFAULTS.size, 8, 1_000),
+    borderRadius: normalizeNumber(
+      input.borderRadius,
+      BORDER_BEAM_DEFAULTS.borderRadius,
+      0,
+      1_000,
+      true
+    ),
+  };
+}

package/src/components/ui/BorderBeam/shared.ts

@@ -0,0 +1,26 @@
+export type BorderBeamLayout = Readonly<{ width: number; height: number }>;
+
+export const EMPTY_BORDER_BEAM_LAYOUT: BorderBeamLayout = {
+  width: 0,
+  height: 0,
+};
+
+export function borderBeamGeometry(input: {
+  layout: BorderBeamLayout;
+  lineWidth: number;
+  size: number;
+  borderRadius: number;
+}) {
+  const { layout, lineWidth } = input;
+  const rectWidth = Math.max(0, layout.width - lineWidth);
+  const rectHeight = Math.max(0, layout.height - lineWidth);
+  const perimeter = Math.max(0, 2 * (rectWidth + rectHeight));
+  const beamLength = Math.min(input.size, perimeter / 2);
+  return {
+    beamLength,
+    perimeter,
+    rectHeight,
+    rectWidth,
+    radius: Math.min(input.borderRadius, rectWidth / 2, rectHeight / 2),
+  };
+}

package/src/components/ui/BorderBeam/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  visual: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+    elevation: 1,
+  },
+});

package/src/components/ui/BorderBeam/types.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type BorderBeamProps = {
+  /** 被流光描边包围的内容。 */
+  children: ReactNode;
+  /** 是否显示并运行动画，默认 true。 */
+  active?: boolean;
+  /** 流光颜色，默认主题 primary。 */
+  color?: string;
+  /** 绕边一周的时长（毫秒），默认 6000。 */
+  duration?: number;
+  /** 描边宽度，默认 1。 */
+  lineWidth?: number;
+  /** 流光段长度（布局单位），默认 40。 */
+  size?: number;
+  /** 圆角半径，默认 radius.md。 */
+  borderRadius?: number;
+  /** 外层布局样式。 */
+  style?: StyleProp<ViewStyle>;
+  /** E2E / 测试定位。 */
+  testID?: string;
+};

package/src/components/ui/index.ts

@@ -9,6 +9,8 @@ export { AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupItem, AvatarGroupProps } from './AvatarGroup';
 export { BlurLayer } from './BlurLayer';
 export type { BlurLayerProps } from './BlurLayer';
+export { BorderBeam } from './BorderBeam';
+export type { BorderBeamProps } from './BorderBeam';
 export { Button } from './Button';
 export type { ButtonProps, ButtonSize, ButtonVariant } from './Button';
 export { Card } from './Card';