@0610studio/zs-ui 0.19.0 → 0.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBorderBeam/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAA4C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBxH,2DAA2D;AAC3D,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,sBAAsB,CAAC;IACjD,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgDD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,UAAU,EACV,IAAW,EACX,QAAe,EACf,KAAS,EACT,OAAe,EACf,MAAa,EACb,WAAe,EACf,YAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBorderBeam/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAA4C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBxH,2DAA2D;AAC3D,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,sBAAsB,CAAC;IACjD,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgDD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,UAAU,EACV,IAAW,EACX,QAAe,EACf,KAAS,EACT,OAAe,EACf,MAAa,EACb,WAAe,EACf,YAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAyKnB;;AAED,wBAAwC"}
|
|
@@ -108,15 +108,16 @@ function ZSBorderBeam({ children, colors, colorFrom, colorTo, beamLength = 0.35,
|
|
|
108
108
|
const glowOpacity = useDerivedValue(() => interpolate(glowProgress.value, [0, 1], [glowMinOpacity, glowMaxOpacity]));
|
|
109
109
|
const glowStrokeWidth = useDerivedValue(() => interpolate(glowProgress.value, [0, 1], [borderWidth + glowWidth * 0.6, borderWidth + glowWidth]));
|
|
110
110
|
const beamGradient = (_jsx(SweepGradient, { origin: centerVector, c: centerVector, colors: beam.colors, positions: beam.positions, transform: gradientTransform }));
|
|
111
|
-
return (_jsxs(View, { style: [styles.container, style], ...props, children: [active && hasLayout && (_jsxs(Canvas, { pointerEvents: "none", style: [
|
|
111
|
+
return (_jsxs(View, { style: [styles.container, style], ...props, children: [_jsx(View, { onLayout: handleLayout, style: [styles.content, { borderRadius }], children: children }), active && hasLayout && (_jsxs(Canvas, { pointerEvents: "none", style: [
|
|
112
112
|
styles.canvas,
|
|
113
113
|
{
|
|
114
114
|
width: canvasWidth,
|
|
115
115
|
height: canvasHeight,
|
|
116
116
|
top: -glowPadding,
|
|
117
117
|
left: -glowPadding,
|
|
118
|
+
zIndex: 1,
|
|
118
119
|
},
|
|
119
|
-
], children: [resolvedTrackColor && (_jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: borderWidth, color: resolvedTrackColor })), glowSettings && (_jsxs(Group, { children: [_jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: glowStrokeWidth, opacity: glowOpacity, children: beamGradient }), _jsx(Blur, { blur: glowSettings.blur })] })), _jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: borderWidth, children: beamGradient })] }))
|
|
120
|
+
], children: [resolvedTrackColor && (_jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: borderWidth, color: resolvedTrackColor })), glowSettings && (_jsxs(Group, { children: [_jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: glowStrokeWidth, opacity: glowOpacity, children: beamGradient }), _jsx(Blur, { blur: glowSettings.blur })] })), _jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: borderWidth, children: beamGradient })] }))] }));
|
|
120
121
|
}
|
|
121
122
|
export default React.memo(ZSBorderBeam);
|
|
122
123
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBorderBeam/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { StyleSheet, View, type LayoutChangeEvent, type StyleProp, type ViewProps, type ViewStyle } from \"react-native\";\nimport { Blur, Canvas, Group, RoundedRect, SweepGradient, vec } from \"@shopify/react-native-skia\";\nimport {\n Easing,\n cancelAnimation,\n interpolate,\n useDerivedValue,\n useSharedValue,\n withDelay,\n withRepeat,\n withTiming,\n} from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst FULL_ROTATION_RADIANS = Math.PI * 2;\nconst DEFAULT_GLOW_INTENSITY = 0.5;\nconst GLOW_PULSE_DURATION = 2400;\n\n/** glow를 세밀하게 제어할 때 사용하는 설정 (숫자 하나로 충분하면 glow={0~1} 사용) */\nexport interface ZSBorderBeamGlowConfig {\n /** 글로우가 stroke 바깥으로 퍼지는 폭(px) */\n width?: number;\n /** blur 강도 */\n blur?: number;\n /** 숨쉬는 한 사이클(ms) */\n pulseDuration?: number;\n minOpacity?: number;\n maxOpacity?: number;\n}\n\nexport interface ZSBorderBeamProps extends ViewProps {\n children?: React.ReactNode;\n /** sweep gradient 색상 배열 (꼬리 → 머리 순) — 지정 시 colorFrom/colorTo는 무시됩니다 */\n colors?: string[];\n /** 광선 시작(꼬리) 색상 (기본: palette.primary.main) */\n colorFrom?: string;\n /** 광선 끝(머리) 색상 (기본: palette.secondary.main) */\n colorTo?: string;\n /** 광선(혜성)이 둘레에서 차지하는 비율 (0~1). 1이면 둘레 전체 그라디언트 링 */\n beamLength?: number;\n /** 광선이 지나가지 않는 구간의 얇은 기본 테두리 색. 'none'이면 표시 안 함 (기본: colorFrom 12% 알파) */\n trackColor?: string;\n /**\n * 글로우 강도.\n * - `false` : 글로우 없음 (선명한 광선만)\n * - `0~1` : 숫자 하나로 폭·blur·불투명도를 함께 스케일 (기본 0.5)\n * - config : 세밀 제어 — { width, blur, pulseDuration, minOpacity, maxOpacity }\n */\n glow?: boolean | number | ZSBorderBeamGlowConfig;\n /** 광선이 한 바퀴 도는 시간(ms) */\n duration?: number;\n /** 애니메이션 시작 지연(ms) */\n delay?: number;\n /** 회전 방향 반전 */\n reverse?: boolean;\n /** false면 효과를 숨기고 애니메이션을 정지 */\n active?: boolean;\n borderWidth?: number;\n borderRadius?: number;\n style?: StyleProp<ViewStyle>;\n}\n\n/** #RGB / #RRGGBB hex에만 알파를 붙이고, 그 외 형식은 null 반환 */\nconst withAlpha = (color: string, alphaHex: string): string | null => {\n if (/^#[0-9a-fA-F]{6}$/.test(color)) return `${color}${alphaHex}`;\n if (/^#[0-9a-fA-F]{3}$/.test(color)) {\n const [r, g, b] = color.slice(1);\n return `#${r}${r}${g}${g}${b}${b}${alphaHex}`;\n }\n return null;\n};\n\n/** 색상의 완전 투명 버전 (hue 유지 → blur 시 색 번짐이 자연스러움) */\nconst transparentize = (color: string): string => withAlpha(color, \"00\") ?? \"#00000000\";\n\ninterface GlowSettings {\n width: number;\n blur: number;\n pulseDuration: number;\n minOpacity: number;\n maxOpacity: number;\n}\n\nconst resolveGlow = (glow: ZSBorderBeamProps[\"glow\"]): GlowSettings | null => {\n if (glow === false || glow === 0) return null;\n\n const intensity = typeof glow === \"number\" ? Math.min(Math.max(glow, 0), 1) : DEFAULT_GLOW_INTENSITY;\n const maxOpacity = 0.3 + 0.6 * intensity;\n const scaled: GlowSettings = {\n width: 16 * intensity,\n blur: 20 * intensity,\n pulseDuration: GLOW_PULSE_DURATION,\n minOpacity: maxOpacity * 0.58,\n maxOpacity,\n };\n\n if (typeof glow === \"object\") {\n return {\n width: glow.width ?? scaled.width,\n blur: glow.blur ?? scaled.blur,\n pulseDuration: glow.pulseDuration ?? scaled.pulseDuration,\n minOpacity: glow.minOpacity ?? scaled.minOpacity,\n maxOpacity: glow.maxOpacity ?? scaled.maxOpacity,\n };\n }\n return scaled;\n};\n\nfunction ZSBorderBeam({\n children,\n colors,\n colorFrom,\n colorTo,\n beamLength = 0.35,\n trackColor,\n glow = true,\n duration = 5000,\n delay = 0,\n reverse = false,\n active = true,\n borderWidth = 2,\n borderRadius = 14,\n style,\n ...props\n}: ZSBorderBeamProps) {\n const { palette } = useTheme();\n const [layout, setLayout] = useState({ width: 0, height: 0 });\n const rotationProgress = useSharedValue(0);\n const glowProgress = useSharedValue(0);\n\n const from = colorFrom || palette.primary.main;\n const to = colorTo || palette.secondary.main;\n const glowSettings = resolveGlow(glow);\n\n // 혜성 형태: 꼬리(투명)에서 머리(선명)로 갈수록 밝아지고, 머리 직후 짧게 컷오프.\n // beamLength < 1이면 positions로 광선을 둘레 일부에만 압축한다.\n const beam = useMemo(() => {\n const length = Math.min(Math.max(beamLength, 0.05), 1);\n const base =\n colors && colors.length >= 2\n ? colors\n : [transparentize(from), withAlpha(from, \"66\") ?? from, from, to];\n\n if (length >= 1) {\n const ring = colors && colors.length >= 2 ? colors : [...base, transparentize(to)];\n return { colors: ring, positions: undefined };\n }\n\n const head = base[base.length - 1] ?? to;\n const step = length / (base.length - 1);\n return {\n colors: [...base, transparentize(head), transparentize(head)],\n positions: [...base.map((_, index) => index * step), Math.min(length + 0.02, 1), 1],\n };\n }, [colors, from, to, beamLength]);\n\n const resolvedTrackColor =\n trackColor === \"none\" ? null : trackColor ?? withAlpha(from, \"1F\") ?? \"#8080801F\";\n\n useEffect(() => {\n if (!active) return;\n\n rotationProgress.value = 0;\n rotationProgress.value = withDelay(\n delay,\n withRepeat(withTiming(1, { duration, easing: Easing.linear }), -1, false)\n );\n\n return () => cancelAnimation(rotationProgress);\n }, [active, duration, delay, reverse]);\n\n const glowPulseDuration = glowSettings?.pulseDuration;\n useEffect(() => {\n if (!active || !glowPulseDuration) return;\n\n glowProgress.value = 0;\n glowProgress.value = withDelay(\n delay,\n withRepeat(withTiming(1, { duration: glowPulseDuration, easing: Easing.inOut(Easing.ease) }), -1, true)\n );\n\n return () => cancelAnimation(glowProgress);\n }, [active, delay, glowPulseDuration]);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { width, height } = event.nativeEvent.layout;\n setLayout((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));\n };\n\n const glowPadding = glowSettings ? Math.ceil(glowSettings.blur + glowSettings.width) : 0;\n const canvasWidth = layout.width + glowPadding * 2;\n const canvasHeight = layout.height + glowPadding * 2;\n const hasLayout = layout.width > 0 && layout.height > 0;\n\n const frameX = glowPadding + borderWidth / 2;\n const frameY = glowPadding + borderWidth / 2;\n const frameWidth = Math.max(layout.width - borderWidth, 0);\n const frameHeight = Math.max(layout.height - borderWidth, 0);\n const frameRadius = Math.min(Math.max(borderRadius - borderWidth / 2, 0), Math.min(frameWidth, frameHeight) / 2);\n\n const centerVector = useMemo(() => vec(canvasWidth / 2, canvasHeight / 2), [canvasWidth, canvasHeight]);\n const direction = reverse ? -1 : 1;\n\n const glowMinOpacity = glowSettings?.minOpacity ?? 0;\n const glowMaxOpacity = glowSettings?.maxOpacity ?? 0;\n const glowWidth = glowSettings?.width ?? 0;\n\n const gradientTransform = useDerivedValue(() => [\n { rotate: direction * FULL_ROTATION_RADIANS * rotationProgress.value },\n ]);\n const glowOpacity = useDerivedValue(() =>\n interpolate(glowProgress.value, [0, 1], [glowMinOpacity, glowMaxOpacity])\n );\n const glowStrokeWidth = useDerivedValue(() =>\n interpolate(glowProgress.value, [0, 1], [borderWidth + glowWidth * 0.6, borderWidth + glowWidth])\n );\n\n const beamGradient = (\n <SweepGradient\n origin={centerVector}\n c={centerVector}\n colors={beam.colors}\n positions={beam.positions}\n transform={gradientTransform}\n />\n );\n\n return (\n <View style={[styles.container, style]} {...props}>\n {active && hasLayout && (\n <Canvas\n pointerEvents=\"none\"\n style={[\n styles.canvas,\n {\n width: canvasWidth,\n height: canvasHeight,\n top: -glowPadding,\n left: -glowPadding,\n },\n ]}\n >\n {resolvedTrackColor && (\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={borderWidth}\n color={resolvedTrackColor}\n />\n )}\n\n {glowSettings && (\n <Group>\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={glowStrokeWidth}\n opacity={glowOpacity}\n >\n {beamGradient}\n </RoundedRect>\n <Blur blur={glowSettings.blur} />\n </Group>\n )}\n\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={borderWidth}\n >\n {beamGradient}\n </RoundedRect>\n </Canvas>\n )}\n\n <View onLayout={handleLayout} style={[styles.content, { borderRadius }]}>\n {children}\n </View>\n </View>\n );\n}\n\nexport default React.memo(ZSBorderBeam);\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: \"stretch\",\n position: \"relative\",\n },\n canvas: {\n position: \"absolute\",\n },\n content: {\n position: \"relative\",\n overflow: \"hidden\",\n },\n});\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBorderBeam/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { StyleSheet, View, type LayoutChangeEvent, type StyleProp, type ViewProps, type ViewStyle } from \"react-native\";\nimport { Blur, Canvas, Group, RoundedRect, SweepGradient, vec } from \"@shopify/react-native-skia\";\nimport {\n Easing,\n cancelAnimation,\n interpolate,\n useDerivedValue,\n useSharedValue,\n withDelay,\n withRepeat,\n withTiming,\n} from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst FULL_ROTATION_RADIANS = Math.PI * 2;\nconst DEFAULT_GLOW_INTENSITY = 0.5;\nconst GLOW_PULSE_DURATION = 2400;\n\n/** glow를 세밀하게 제어할 때 사용하는 설정 (숫자 하나로 충분하면 glow={0~1} 사용) */\nexport interface ZSBorderBeamGlowConfig {\n /** 글로우가 stroke 바깥으로 퍼지는 폭(px) */\n width?: number;\n /** blur 강도 */\n blur?: number;\n /** 숨쉬는 한 사이클(ms) */\n pulseDuration?: number;\n minOpacity?: number;\n maxOpacity?: number;\n}\n\nexport interface ZSBorderBeamProps extends ViewProps {\n children?: React.ReactNode;\n /** sweep gradient 색상 배열 (꼬리 → 머리 순) — 지정 시 colorFrom/colorTo는 무시됩니다 */\n colors?: string[];\n /** 광선 시작(꼬리) 색상 (기본: palette.primary.main) */\n colorFrom?: string;\n /** 광선 끝(머리) 색상 (기본: palette.secondary.main) */\n colorTo?: string;\n /** 광선(혜성)이 둘레에서 차지하는 비율 (0~1). 1이면 둘레 전체 그라디언트 링 */\n beamLength?: number;\n /** 광선이 지나가지 않는 구간의 얇은 기본 테두리 색. 'none'이면 표시 안 함 (기본: colorFrom 12% 알파) */\n trackColor?: string;\n /**\n * 글로우 강도.\n * - `false` : 글로우 없음 (선명한 광선만)\n * - `0~1` : 숫자 하나로 폭·blur·불투명도를 함께 스케일 (기본 0.5)\n * - config : 세밀 제어 — { width, blur, pulseDuration, minOpacity, maxOpacity }\n */\n glow?: boolean | number | ZSBorderBeamGlowConfig;\n /** 광선이 한 바퀴 도는 시간(ms) */\n duration?: number;\n /** 애니메이션 시작 지연(ms) */\n delay?: number;\n /** 회전 방향 반전 */\n reverse?: boolean;\n /** false면 효과를 숨기고 애니메이션을 정지 */\n active?: boolean;\n borderWidth?: number;\n borderRadius?: number;\n style?: StyleProp<ViewStyle>;\n}\n\n/** #RGB / #RRGGBB hex에만 알파를 붙이고, 그 외 형식은 null 반환 */\nconst withAlpha = (color: string, alphaHex: string): string | null => {\n if (/^#[0-9a-fA-F]{6}$/.test(color)) return `${color}${alphaHex}`;\n if (/^#[0-9a-fA-F]{3}$/.test(color)) {\n const [r, g, b] = color.slice(1);\n return `#${r}${r}${g}${g}${b}${b}${alphaHex}`;\n }\n return null;\n};\n\n/** 색상의 완전 투명 버전 (hue 유지 → blur 시 색 번짐이 자연스러움) */\nconst transparentize = (color: string): string => withAlpha(color, \"00\") ?? \"#00000000\";\n\ninterface GlowSettings {\n width: number;\n blur: number;\n pulseDuration: number;\n minOpacity: number;\n maxOpacity: number;\n}\n\nconst resolveGlow = (glow: ZSBorderBeamProps[\"glow\"]): GlowSettings | null => {\n if (glow === false || glow === 0) return null;\n\n const intensity = typeof glow === \"number\" ? Math.min(Math.max(glow, 0), 1) : DEFAULT_GLOW_INTENSITY;\n const maxOpacity = 0.3 + 0.6 * intensity;\n const scaled: GlowSettings = {\n width: 16 * intensity,\n blur: 20 * intensity,\n pulseDuration: GLOW_PULSE_DURATION,\n minOpacity: maxOpacity * 0.58,\n maxOpacity,\n };\n\n if (typeof glow === \"object\") {\n return {\n width: glow.width ?? scaled.width,\n blur: glow.blur ?? scaled.blur,\n pulseDuration: glow.pulseDuration ?? scaled.pulseDuration,\n minOpacity: glow.minOpacity ?? scaled.minOpacity,\n maxOpacity: glow.maxOpacity ?? scaled.maxOpacity,\n };\n }\n return scaled;\n};\n\nfunction ZSBorderBeam({\n children,\n colors,\n colorFrom,\n colorTo,\n beamLength = 0.35,\n trackColor,\n glow = true,\n duration = 5000,\n delay = 0,\n reverse = false,\n active = true,\n borderWidth = 2,\n borderRadius = 14,\n style,\n ...props\n}: ZSBorderBeamProps) {\n const { palette } = useTheme();\n const [layout, setLayout] = useState({ width: 0, height: 0 });\n const rotationProgress = useSharedValue(0);\n const glowProgress = useSharedValue(0);\n\n const from = colorFrom || palette.primary.main;\n const to = colorTo || palette.secondary.main;\n const glowSettings = resolveGlow(glow);\n\n // 혜성 형태: 꼬리(투명)에서 머리(선명)로 갈수록 밝아지고, 머리 직후 짧게 컷오프.\n // beamLength < 1이면 positions로 광선을 둘레 일부에만 압축한다.\n const beam = useMemo(() => {\n const length = Math.min(Math.max(beamLength, 0.05), 1);\n const base =\n colors && colors.length >= 2\n ? colors\n : [transparentize(from), withAlpha(from, \"66\") ?? from, from, to];\n\n if (length >= 1) {\n const ring = colors && colors.length >= 2 ? colors : [...base, transparentize(to)];\n return { colors: ring, positions: undefined };\n }\n\n const head = base[base.length - 1] ?? to;\n const step = length / (base.length - 1);\n return {\n colors: [...base, transparentize(head), transparentize(head)],\n positions: [...base.map((_, index) => index * step), Math.min(length + 0.02, 1), 1],\n };\n }, [colors, from, to, beamLength]);\n\n const resolvedTrackColor =\n trackColor === \"none\" ? null : trackColor ?? withAlpha(from, \"1F\") ?? \"#8080801F\";\n\n useEffect(() => {\n if (!active) return;\n\n rotationProgress.value = 0;\n rotationProgress.value = withDelay(\n delay,\n withRepeat(withTiming(1, { duration, easing: Easing.linear }), -1, false)\n );\n\n return () => cancelAnimation(rotationProgress);\n }, [active, duration, delay, reverse]);\n\n const glowPulseDuration = glowSettings?.pulseDuration;\n useEffect(() => {\n if (!active || !glowPulseDuration) return;\n\n glowProgress.value = 0;\n glowProgress.value = withDelay(\n delay,\n withRepeat(withTiming(1, { duration: glowPulseDuration, easing: Easing.inOut(Easing.ease) }), -1, true)\n );\n\n return () => cancelAnimation(glowProgress);\n }, [active, delay, glowPulseDuration]);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { width, height } = event.nativeEvent.layout;\n setLayout((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));\n };\n\n const glowPadding = glowSettings ? Math.ceil(glowSettings.blur + glowSettings.width) : 0;\n const canvasWidth = layout.width + glowPadding * 2;\n const canvasHeight = layout.height + glowPadding * 2;\n const hasLayout = layout.width > 0 && layout.height > 0;\n\n const frameX = glowPadding + borderWidth / 2;\n const frameY = glowPadding + borderWidth / 2;\n const frameWidth = Math.max(layout.width - borderWidth, 0);\n const frameHeight = Math.max(layout.height - borderWidth, 0);\n const frameRadius = Math.min(Math.max(borderRadius - borderWidth / 2, 0), Math.min(frameWidth, frameHeight) / 2);\n\n const centerVector = useMemo(() => vec(canvasWidth / 2, canvasHeight / 2), [canvasWidth, canvasHeight]);\n const direction = reverse ? -1 : 1;\n\n const glowMinOpacity = glowSettings?.minOpacity ?? 0;\n const glowMaxOpacity = glowSettings?.maxOpacity ?? 0;\n const glowWidth = glowSettings?.width ?? 0;\n\n const gradientTransform = useDerivedValue(() => [\n { rotate: direction * FULL_ROTATION_RADIANS * rotationProgress.value },\n ]);\n const glowOpacity = useDerivedValue(() =>\n interpolate(glowProgress.value, [0, 1], [glowMinOpacity, glowMaxOpacity])\n );\n const glowStrokeWidth = useDerivedValue(() =>\n interpolate(glowProgress.value, [0, 1], [borderWidth + glowWidth * 0.6, borderWidth + glowWidth])\n );\n\n const beamGradient = (\n <SweepGradient\n origin={centerVector}\n c={centerVector}\n colors={beam.colors}\n positions={beam.positions}\n transform={gradientTransform}\n />\n );\n\n return (\n <View style={[styles.container, style]} {...props}>\n <View onLayout={handleLayout} style={[styles.content, { borderRadius }]}>\n {children}\n </View>\n\n {active && hasLayout && (\n <Canvas\n pointerEvents=\"none\"\n style={[\n styles.canvas,\n {\n width: canvasWidth,\n height: canvasHeight,\n top: -glowPadding,\n left: -glowPadding,\n zIndex: 1,\n },\n ]}\n >\n {resolvedTrackColor && (\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={borderWidth}\n color={resolvedTrackColor}\n />\n )}\n\n {glowSettings && (\n <Group>\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={glowStrokeWidth}\n opacity={glowOpacity}\n >\n {beamGradient}\n </RoundedRect>\n <Blur blur={glowSettings.blur} />\n </Group>\n )}\n\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={borderWidth}\n >\n {beamGradient}\n </RoundedRect>\n </Canvas>\n )}\n </View>\n );\n}\n\nexport default React.memo(ZSBorderBeam);\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: \"stretch\",\n position: \"relative\",\n },\n canvas: {\n position: \"absolute\",\n },\n content: {\n position: \"relative\",\n overflow: \"hidden\",\n },\n});\n"]}
|