@unif/react-native-design 0.33.0 → 0.34.0

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

@@ -1,15 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,23 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-export type BorderBeamProps = {
-    /** 被流光描边包围的内容。 */
-    children: ReactNode;
-    /** 是否显示并运行动画，默认 true。 */
-    active?: boolean;
-    /** 流光颜色，默认主题 primary。 */
-    color?: string;
-    /** 绕边一周的时长（毫秒），默认 2400。 */
-    duration?: number;
-    /** 描边宽度，默认 2。 */
-    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

@@ -1 +0,0 @@
-{"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/src/components/ui/BorderBeam/BorderBeam.tsx

@@ -1,130 +0,0 @@
-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,
-  borderBeamTrail,
-  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 trail = borderBeamTrail(geometry.beamLength);
-  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}>
-            {trail.map((layer) => (
-              <AnimatedRect
-                key={`${layer.length}-${layer.opacity}`}
-                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}
-                strokeOpacity={layer.opacity}
-                strokeWidth={normalized.lineWidth}
-                strokeLinecap="round"
-                strokeDasharray={[
-                  layer.length,
-                  Math.max(0, geometry.perimeter - layer.length),
-                ]}
-              />
-            ))}
-          </Svg>
-        </View>
-      ) : null}
-    </View>
-  );
-}

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

@@ -1,127 +0,0 @@
-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,
-  borderBeamTrail,
-  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 rectRefs = useRef<any[]>([]);
-  const normalized = normalizeBorderBeam({
-    duration,
-    lineWidth,
-    size,
-    borderRadius,
-  });
-  const geometry = borderBeamGeometry({ layout, ...normalized });
-  const trail = borderBeamTrail(geometry.beamLength);
-  const showVisual = active && !reducedMotion && geometry.perimeter > 0;
-
-  useEffect(() => {
-    if (!showVisual) return;
-    ensureKeyframes();
-    const nodes = rectRefs.current.filter((node) => node?.style);
-    if (nodes.length === 0) return;
-    nodes.forEach((node) => {
-      node.style.setProperty(
-        '--unif-border-beam-path',
-        `${geometry.perimeter}px`
-      );
-      node.style.animation = `unif-border-beam-flow ${normalized.duration}ms linear infinite`;
-    });
-    return () => {
-      nodes.forEach((node) => {
-        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}>
-            {trail.map((layer, index) => (
-              <Rect
-                key={`${layer.length}-${layer.opacity}`}
-                ref={(node) => {
-                  rectRefs.current[index] = node;
-                }}
-                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}
-                strokeOpacity={layer.opacity}
-                strokeWidth={normalized.lineWidth}
-                strokeLinecap="round"
-                strokeDasharray={[
-                  layer.length,
-                  Math.max(0, geometry.perimeter - layer.length),
-                ]}
-              />
-            ))}
-          </Svg>
-        </View>
-      ) : null}
-    </View>
-  );
-}

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

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

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

@@ -1,58 +0,0 @@
-export type NormalizedBorderBeam = {
-  duration: number;
-  lineWidth: number;
-  size: number;
-  borderRadius: number;
-};
-
-export const BORDER_BEAM_DEFAULTS: NormalizedBorderBeam = {
-  duration: 2400,
-  lineWidth: 2,
-  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

@@ -1,47 +0,0 @@
-export type BorderBeamLayout = Readonly<{ width: number; height: number }>;
-
-export const EMPTY_BORDER_BEAM_LAYOUT: BorderBeamLayout = {
-  width: 0,
-  height: 0,
-};
-
-const BORDER_BEAM_TRAIL = [
-  { lengthRatio: 1, opacity: 0.12 },
-  { lengthRatio: 0.75, opacity: 0.24 },
-  { lengthRatio: 0.5, opacity: 0.42 },
-  { lengthRatio: 0.25, opacity: 0.88 },
-] as const;
-
-/**
- * 把单色线段拆成由淡到亮的叠加尾迹。
- *
- * 所有层共享同一动画相位，较短且更亮的层叠在前端，形成接近渐变的彗星头；
- * 同时避免 SVG gradient 在 Native/Web 上的实现差异。
- */
-export function borderBeamTrail(beamLength: number) {
-  const safeLength = Math.max(0, beamLength);
-  return BORDER_BEAM_TRAIL.map(({ lengthRatio, opacity }) => ({
-    length: safeLength * lengthRatio,
-    opacity,
-  }));
-}
-
-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

@@ -1,16 +0,0 @@
-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

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