@0xsquid/ui 0.13.4 → 0.13.5
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.
- package/dist/cjs/index.js +59 -48
- package/dist/cjs/types/core/constants.d.ts +9 -4
- package/dist/esm/index.js +59 -48
- package/dist/esm/types/core/constants.d.ts +9 -4
- package/dist/index.css +16 -54
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2852,8 +2852,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2852
2852
|
const CSS_VARS = {
|
|
2853
2853
|
MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
|
|
2854
2854
|
DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
|
|
2855
|
-
|
|
2856
|
-
|
|
2855
|
+
COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
|
|
2856
|
+
EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
|
|
2857
2857
|
FADE_IN_DURATION: '--squid-animation-fade-in-duration',
|
|
2858
2858
|
FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
|
|
2859
2859
|
SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
|
|
@@ -2861,10 +2861,15 @@ const CSS_VARS = {
|
|
|
2861
2861
|
TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
|
|
2862
2862
|
};
|
|
2863
2863
|
const ANIMATION_DURATIONS = {
|
|
2864
|
-
|
|
2865
|
-
|
|
2864
|
+
SHOW_ROUTE: 300,
|
|
2865
|
+
HIDE_ROUTE: 300,
|
|
2866
2866
|
CHANGE_SWAP_STEP: 300,
|
|
2867
2867
|
};
|
|
2868
|
+
const ANIMATION_TIMINGS = {
|
|
2869
|
+
EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2870
|
+
COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2871
|
+
CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
|
|
2872
|
+
};
|
|
2868
2873
|
|
|
2869
2874
|
function SearchIcon() {
|
|
2870
2875
|
return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
@@ -3422,9 +3427,13 @@ const separatorClassMap = {
|
|
|
3422
3427
|
progress: 'tw-text-grey-600',
|
|
3423
3428
|
pending: 'tw-text-grey-600',
|
|
3424
3429
|
};
|
|
3425
|
-
const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
|
|
3426
3430
|
function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
|
|
3427
|
-
|
|
3431
|
+
// these styles are located here instead of outside the component
|
|
3432
|
+
// so they are updated whenever the animation duration changes
|
|
3433
|
+
const transitionStyle = {
|
|
3434
|
+
transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
|
|
3435
|
+
};
|
|
3436
|
+
return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300 tw-transition-colors tw-duration-1000", children: [showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) })), jsxRuntime.jsxs("a", { href: link, target: "_blank", style: transitionStyle, className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: status === 'pending' ? null : status === 'executed' ? (jsxRuntime.jsx(Checkmark1Icon, {})) : typeof chipContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
|
|
3428
3437
|
if (type === 'string') {
|
|
3429
3438
|
return (
|
|
3430
3439
|
// Instead of displaying the string into a single <BodyText />
|
|
@@ -3558,9 +3567,8 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3558
3567
|
const [isRouteVisible, setIsRouteVisible] = React.useState(false);
|
|
3559
3568
|
// handles whether route component is animating to show
|
|
3560
3569
|
const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = React.useState(false);
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
const isFirstStep = currentStepIndex === 0;
|
|
3570
|
+
steps[currentStepIndex];
|
|
3571
|
+
currentStepIndex === steps.length - 1;
|
|
3564
3572
|
React.useEffect(() => {
|
|
3565
3573
|
// we do not want to unmount the route component if the animation to show route is running
|
|
3566
3574
|
if (isShowRouteAnimationRunning)
|
|
@@ -3568,45 +3576,45 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3568
3576
|
// unmount route component when the animation of hiding is done
|
|
3569
3577
|
const timeoutId = setTimeout(() => {
|
|
3570
3578
|
setIsRouteVisible(false);
|
|
3571
|
-
}, ANIMATION_DURATIONS.
|
|
3579
|
+
}, ANIMATION_DURATIONS.HIDE_ROUTE);
|
|
3572
3580
|
return () => {
|
|
3573
3581
|
clearTimeout(timeoutId);
|
|
3574
3582
|
};
|
|
3575
3583
|
}, [isShowRouteAnimationRunning]);
|
|
3576
|
-
const
|
|
3577
|
-
|
|
3578
|
-
|
|
3584
|
+
const handleToggleRouteSteps = () => {
|
|
3585
|
+
if (isRouteVisible) {
|
|
3586
|
+
setIsShowRouteAnimationRunning(false);
|
|
3587
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
3588
|
+
}
|
|
3589
|
+
else {
|
|
3590
|
+
setIsRouteVisible(true);
|
|
3591
|
+
setIsShowRouteAnimationRunning(true);
|
|
3592
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
3593
|
+
}
|
|
3579
3594
|
};
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
: 'tw-animate-collapse-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: handleCloseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-max-h-fit tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", style: {
|
|
3599
|
-
scrollbarGutter: 'stable',
|
|
3600
|
-
}, children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
|
|
3595
|
+
return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-w-[400px]", children: jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-20 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[536px]' : 'tw-h-[60px]'), children: [jsxRuntime.jsx("div", { style: {
|
|
3596
|
+
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3597
|
+
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3598
|
+
}, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
|
|
3599
|
+
[CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3600
|
+
[CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3601
|
+
}, className: cn('tw-h-[60px] tw-max-h-[536px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
|
|
3602
|
+
? 'tw-animate-expand-route'
|
|
3603
|
+
: 'tw-animate-collapse-route'), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", style: {
|
|
3604
|
+
transition: isShowRouteAnimationRunning
|
|
3605
|
+
? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3606
|
+
: isRouteVisible
|
|
3607
|
+
? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3608
|
+
: `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
|
|
3609
|
+
transform: isShowRouteAnimationRunning
|
|
3610
|
+
? 'translateY(0)'
|
|
3611
|
+
: `translateY(-${536 - 50 - (newStepIndex + 1) * 50 - 20}px)`,
|
|
3612
|
+
}, children: [jsxRuntime.jsx("div", { className: cn('tw-bg-red- tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsxRuntime.jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-relative tw-flex tw-min-h-[460px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
|
|
3601
3613
|
? 'pending'
|
|
3602
|
-
:
|
|
3614
|
+
: newStepIndex > index
|
|
3603
3615
|
? 'executed'
|
|
3604
|
-
: 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })
|
|
3616
|
+
: 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
|
|
3605
3617
|
}
|
|
3606
|
-
const CurrentStep = (_a) => {
|
|
3607
|
-
var { currentStep, isFirstStep, isLastStep, className } = _a, props = __rest(_a, ["currentStep", "isFirstStep", "isLastStep", "className"]);
|
|
3608
|
-
return (jsxRuntime.jsxs("div", Object.assign({}, props, { className: cn('tw-relative tw-z-10 tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-px-squid-xs tw-text-grey-300', className), children: [!isLastStep && (jsxRuntime.jsx("span", { className: "tw-absolute -tw-top-1.5 tw-z-0", children: jsxRuntime.jsx(SwapStepSeparator, {}) })), currentStep && (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent, status: "progress" })), !isFirstStep && (jsxRuntime.jsx("span", { className: "tw-absolute -tw-bottom-1.5 tw-z-0", children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] })));
|
|
3609
|
-
};
|
|
3610
3618
|
|
|
3611
3619
|
function TokenPair({ firstToken, secondToken }) {
|
|
3612
3620
|
return (jsxRuntime.jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxRuntime.jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsxRuntime.jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxRuntime.jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {
|
|
@@ -38655,15 +38663,16 @@ const swapProgressButtonTexts = {
|
|
|
38655
38663
|
function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }) {
|
|
38656
38664
|
const [showSwapInfoSection, setShowSwapInfoSection] = React.useState(true);
|
|
38657
38665
|
const isFirstRenderRef = React.useRef(true);
|
|
38658
|
-
React.
|
|
38666
|
+
const handleRouteStepsOpen = React.useCallback(() => {
|
|
38659
38667
|
if (isFirstRenderRef.current) {
|
|
38660
38668
|
isFirstRenderRef.current = false;
|
|
38661
38669
|
}
|
|
38662
|
-
}, []);
|
|
38663
|
-
const handleRouteStepsOpen = React.useCallback(() => {
|
|
38664
38670
|
setShowSwapInfoSection(false);
|
|
38665
38671
|
}, []);
|
|
38666
38672
|
const handleRouteStepsClosed = React.useCallback(() => {
|
|
38673
|
+
if (isFirstRenderRef.current) {
|
|
38674
|
+
isFirstRenderRef.current = false;
|
|
38675
|
+
}
|
|
38667
38676
|
setShowSwapInfoSection(true);
|
|
38668
38677
|
}, []);
|
|
38669
38678
|
const animationProgressState = React.useMemo(() => {
|
|
@@ -38689,13 +38698,15 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
|
|
|
38689
38698
|
}
|
|
38690
38699
|
}, [txStatus]);
|
|
38691
38700
|
return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
|
|
38692
|
-
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.
|
|
38693
|
-
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.
|
|
38701
|
+
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
38702
|
+
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
38694
38703
|
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38695
38704
|
// do not show animation on first render
|
|
38696
|
-
isFirstRenderRef.current
|
|
38697
|
-
? '
|
|
38698
|
-
:
|
|
38705
|
+
isFirstRenderRef.current
|
|
38706
|
+
? ''
|
|
38707
|
+
: showSwapInfoSection
|
|
38708
|
+
? 'tw-animate-scale-and-fade-up'
|
|
38709
|
+
: 'tw-animate-scale-and-fade-down'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-royal-500 tw-text-material-light-thin", style: {
|
|
38699
38710
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
38700
38711
|
boxShadow: '0 1px 0 currentColor',
|
|
38701
38712
|
}, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[animationProgressState], hideAnimations: false, animReplacement: jsxRuntime.jsx(Loader, { size: "60" }) }) }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: animationProgressState === 'completed' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(CircleCheckIcon, {}) }), jsxRuntime.jsx(Button, { size: "md", variant: "secondary", icon: jsxRuntime.jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : animationProgressState === 'error' ||
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare const CSS_VARS: {
|
|
2
2
|
MOVE_WITH_SPRING_BOUNCE_DURATION: string;
|
|
3
3
|
DISPLAY_DELAYED_DURATION: string;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
COLLAPSE_ROUTE_DURATION: string;
|
|
5
|
+
EXPAND_ROUTE_DURATION: string;
|
|
6
6
|
FADE_IN_DURATION: string;
|
|
7
7
|
FADE_OUT_DURATION: string;
|
|
8
8
|
SCALE_AND_FADE_UP_DURATION: string;
|
|
@@ -10,7 +10,12 @@ export declare const CSS_VARS: {
|
|
|
10
10
|
TRANSLATE_TOP_OR_BOTTOM: string;
|
|
11
11
|
};
|
|
12
12
|
export declare const ANIMATION_DURATIONS: {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
SHOW_ROUTE: number;
|
|
14
|
+
HIDE_ROUTE: number;
|
|
15
15
|
CHANGE_SWAP_STEP: number;
|
|
16
16
|
};
|
|
17
|
+
export declare const ANIMATION_TIMINGS: {
|
|
18
|
+
EXPAND_ROUTE: string;
|
|
19
|
+
COLLAPSE_ROUTE: string;
|
|
20
|
+
CHANGE_SWAP_STEP: string;
|
|
21
|
+
};
|
package/dist/esm/index.js
CHANGED
|
@@ -2832,8 +2832,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
|
|
|
2832
2832
|
const CSS_VARS = {
|
|
2833
2833
|
MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
|
|
2834
2834
|
DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
|
|
2835
|
-
|
|
2836
|
-
|
|
2835
|
+
COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
|
|
2836
|
+
EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
|
|
2837
2837
|
FADE_IN_DURATION: '--squid-animation-fade-in-duration',
|
|
2838
2838
|
FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
|
|
2839
2839
|
SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
|
|
@@ -2841,10 +2841,15 @@ const CSS_VARS = {
|
|
|
2841
2841
|
TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
|
|
2842
2842
|
};
|
|
2843
2843
|
const ANIMATION_DURATIONS = {
|
|
2844
|
-
|
|
2845
|
-
|
|
2844
|
+
SHOW_ROUTE: 300,
|
|
2845
|
+
HIDE_ROUTE: 300,
|
|
2846
2846
|
CHANGE_SWAP_STEP: 300,
|
|
2847
2847
|
};
|
|
2848
|
+
const ANIMATION_TIMINGS = {
|
|
2849
|
+
EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2850
|
+
COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
|
|
2851
|
+
CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
|
|
2852
|
+
};
|
|
2848
2853
|
|
|
2849
2854
|
function SearchIcon() {
|
|
2850
2855
|
return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
|
|
@@ -3402,9 +3407,13 @@ const separatorClassMap = {
|
|
|
3402
3407
|
progress: 'tw-text-grey-600',
|
|
3403
3408
|
pending: 'tw-text-grey-600',
|
|
3404
3409
|
};
|
|
3405
|
-
const colorsTransitionClass = 'tw-transition-colors tw-duration-300';
|
|
3406
3410
|
function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
|
|
3407
|
-
|
|
3411
|
+
// these styles are located here instead of outside the component
|
|
3412
|
+
// so they are updated whenever the animation duration changes
|
|
3413
|
+
const transitionStyle = {
|
|
3414
|
+
transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
|
|
3415
|
+
};
|
|
3416
|
+
return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300 tw-transition-colors tw-duration-1000", children: [showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsx(SwapStepSeparator, {}) })), jsxs("a", { href: link, target: "_blank", style: transitionStyle, className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: status === 'pending' ? null : status === 'executed' ? (jsx(Checkmark1Icon, {})) : typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
|
|
3408
3417
|
if (type === 'string') {
|
|
3409
3418
|
return (
|
|
3410
3419
|
// Instead of displaying the string into a single <BodyText />
|
|
@@ -3538,9 +3547,8 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3538
3547
|
const [isRouteVisible, setIsRouteVisible] = useState(false);
|
|
3539
3548
|
// handles whether route component is animating to show
|
|
3540
3549
|
const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = useState(false);
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
const isFirstStep = currentStepIndex === 0;
|
|
3550
|
+
steps[currentStepIndex];
|
|
3551
|
+
currentStepIndex === steps.length - 1;
|
|
3544
3552
|
useEffect(() => {
|
|
3545
3553
|
// we do not want to unmount the route component if the animation to show route is running
|
|
3546
3554
|
if (isShowRouteAnimationRunning)
|
|
@@ -3548,45 +3556,45 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
|
|
|
3548
3556
|
// unmount route component when the animation of hiding is done
|
|
3549
3557
|
const timeoutId = setTimeout(() => {
|
|
3550
3558
|
setIsRouteVisible(false);
|
|
3551
|
-
}, ANIMATION_DURATIONS.
|
|
3559
|
+
}, ANIMATION_DURATIONS.HIDE_ROUTE);
|
|
3552
3560
|
return () => {
|
|
3553
3561
|
clearTimeout(timeoutId);
|
|
3554
3562
|
};
|
|
3555
3563
|
}, [isShowRouteAnimationRunning]);
|
|
3556
|
-
const
|
|
3557
|
-
|
|
3558
|
-
|
|
3564
|
+
const handleToggleRouteSteps = () => {
|
|
3565
|
+
if (isRouteVisible) {
|
|
3566
|
+
setIsShowRouteAnimationRunning(false);
|
|
3567
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
3568
|
+
}
|
|
3569
|
+
else {
|
|
3570
|
+
setIsRouteVisible(true);
|
|
3571
|
+
setIsShowRouteAnimationRunning(true);
|
|
3572
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
3573
|
+
}
|
|
3559
3574
|
};
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
: 'tw-animate-collapse-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: handleCloseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-max-h-fit tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", style: {
|
|
3579
|
-
scrollbarGutter: 'stable',
|
|
3580
|
-
}, children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
|
|
3575
|
+
return (jsx("div", { className: "tw-relative tw-h-[60px] tw-w-[400px]", children: jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-20 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[536px]' : 'tw-h-[60px]'), children: [jsx("div", { style: {
|
|
3576
|
+
[CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3577
|
+
[CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3578
|
+
}, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
|
|
3579
|
+
[CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
3580
|
+
[CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
3581
|
+
}, className: cn('tw-h-[60px] tw-max-h-[536px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
|
|
3582
|
+
? 'tw-animate-expand-route'
|
|
3583
|
+
: 'tw-animate-collapse-route'), children: jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", style: {
|
|
3584
|
+
transition: isShowRouteAnimationRunning
|
|
3585
|
+
? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3586
|
+
: isRouteVisible
|
|
3587
|
+
? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
|
|
3588
|
+
: `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
|
|
3589
|
+
transform: isShowRouteAnimationRunning
|
|
3590
|
+
? 'translateY(0)'
|
|
3591
|
+
: `translateY(-${536 - 50 - (newStepIndex + 1) * 50 - 20}px)`,
|
|
3592
|
+
}, children: [jsx("div", { className: cn('tw-bg-red- tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-relative tw-flex tw-min-h-[460px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
|
|
3581
3593
|
? 'pending'
|
|
3582
|
-
:
|
|
3594
|
+
: newStepIndex > index
|
|
3583
3595
|
? 'executed'
|
|
3584
|
-
: 'progress' }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })
|
|
3596
|
+
: 'progress' }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
|
|
3585
3597
|
}
|
|
3586
|
-
const CurrentStep = (_a) => {
|
|
3587
|
-
var { currentStep, isFirstStep, isLastStep, className } = _a, props = __rest(_a, ["currentStep", "isFirstStep", "isLastStep", "className"]);
|
|
3588
|
-
return (jsxs("div", Object.assign({}, props, { className: cn('tw-relative tw-z-10 tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-px-squid-xs tw-text-grey-300', className), children: [!isLastStep && (jsx("span", { className: "tw-absolute -tw-top-1.5 tw-z-0", children: jsx(SwapStepSeparator, {}) })), currentStep && (jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent, status: "progress" })), !isFirstStep && (jsx("span", { className: "tw-absolute -tw-bottom-1.5 tw-z-0", children: jsx(SwapStepSeparator, {}) }))] })));
|
|
3589
|
-
};
|
|
3590
3598
|
|
|
3591
3599
|
function TokenPair({ firstToken, secondToken }) {
|
|
3592
3600
|
return (jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {
|
|
@@ -38635,15 +38643,16 @@ const swapProgressButtonTexts = {
|
|
|
38635
38643
|
function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }) {
|
|
38636
38644
|
const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
|
|
38637
38645
|
const isFirstRenderRef = useRef(true);
|
|
38638
|
-
|
|
38646
|
+
const handleRouteStepsOpen = useCallback(() => {
|
|
38639
38647
|
if (isFirstRenderRef.current) {
|
|
38640
38648
|
isFirstRenderRef.current = false;
|
|
38641
38649
|
}
|
|
38642
|
-
}, []);
|
|
38643
|
-
const handleRouteStepsOpen = useCallback(() => {
|
|
38644
38650
|
setShowSwapInfoSection(false);
|
|
38645
38651
|
}, []);
|
|
38646
38652
|
const handleRouteStepsClosed = useCallback(() => {
|
|
38653
|
+
if (isFirstRenderRef.current) {
|
|
38654
|
+
isFirstRenderRef.current = false;
|
|
38655
|
+
}
|
|
38647
38656
|
setShowSwapInfoSection(true);
|
|
38648
38657
|
}, []);
|
|
38649
38658
|
const animationProgressState = useMemo(() => {
|
|
@@ -38669,13 +38678,15 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
|
|
|
38669
38678
|
}
|
|
38670
38679
|
}, [txStatus]);
|
|
38671
38680
|
return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxs(ModalContent, { style: {
|
|
38672
|
-
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.
|
|
38673
|
-
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.
|
|
38681
|
+
[CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
|
|
38682
|
+
[CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
|
|
38674
38683
|
}, borderType: "outline", className: cn('!tw-max-h-[470px]',
|
|
38675
38684
|
// do not show animation on first render
|
|
38676
|
-
isFirstRenderRef.current
|
|
38677
|
-
? '
|
|
38678
|
-
:
|
|
38685
|
+
isFirstRenderRef.current
|
|
38686
|
+
? ''
|
|
38687
|
+
: showSwapInfoSection
|
|
38688
|
+
? 'tw-animate-scale-and-fade-up'
|
|
38689
|
+
: 'tw-animate-scale-and-fade-down'), children: [jsx("div", { className: "tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-royal-500 tw-text-material-light-thin", style: {
|
|
38679
38690
|
// box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
|
|
38680
38691
|
boxShadow: '0 1px 0 currentColor',
|
|
38681
38692
|
}, children: jsx("div", { children: jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[animationProgressState], hideAnimations: false, animReplacement: jsx(Loader, { size: "60" }) }) }) }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: animationProgressState === 'completed' ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(CircleCheckIcon, {}) }), jsx(Button, { size: "md", variant: "secondary", icon: jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : animationProgressState === 'error' ||
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare const CSS_VARS: {
|
|
2
2
|
MOVE_WITH_SPRING_BOUNCE_DURATION: string;
|
|
3
3
|
DISPLAY_DELAYED_DURATION: string;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
COLLAPSE_ROUTE_DURATION: string;
|
|
5
|
+
EXPAND_ROUTE_DURATION: string;
|
|
6
6
|
FADE_IN_DURATION: string;
|
|
7
7
|
FADE_OUT_DURATION: string;
|
|
8
8
|
SCALE_AND_FADE_UP_DURATION: string;
|
|
@@ -10,7 +10,12 @@ export declare const CSS_VARS: {
|
|
|
10
10
|
TRANSLATE_TOP_OR_BOTTOM: string;
|
|
11
11
|
};
|
|
12
12
|
export declare const ANIMATION_DURATIONS: {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
SHOW_ROUTE: number;
|
|
14
|
+
HIDE_ROUTE: number;
|
|
15
15
|
CHANGE_SWAP_STEP: number;
|
|
16
16
|
};
|
|
17
|
+
export declare const ANIMATION_TIMINGS: {
|
|
18
|
+
EXPAND_ROUTE: string;
|
|
19
|
+
COLLAPSE_ROUTE: string;
|
|
20
|
+
CHANGE_SWAP_STEP: string;
|
|
21
|
+
};
|
package/dist/index.css
CHANGED
|
@@ -984,11 +984,6 @@ video {
|
|
|
984
984
|
height: 680px;
|
|
985
985
|
}
|
|
986
986
|
|
|
987
|
-
.tw-h-fit {
|
|
988
|
-
height: -moz-fit-content;
|
|
989
|
-
height: fit-content;
|
|
990
|
-
}
|
|
991
|
-
|
|
992
987
|
.tw-h-full {
|
|
993
988
|
height: 100%;
|
|
994
989
|
}
|
|
@@ -1053,11 +1048,6 @@ video {
|
|
|
1053
1048
|
max-height: 80px;
|
|
1054
1049
|
}
|
|
1055
1050
|
|
|
1056
|
-
.tw-max-h-fit {
|
|
1057
|
-
max-height: -moz-fit-content;
|
|
1058
|
-
max-height: fit-content;
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
1051
|
.tw-max-h-list-item-small {
|
|
1062
1052
|
max-height: 2.5rem;
|
|
1063
1053
|
}
|
|
@@ -1078,6 +1068,10 @@ video {
|
|
|
1078
1068
|
min-height: 30px;
|
|
1079
1069
|
}
|
|
1080
1070
|
|
|
1071
|
+
.tw-min-h-\[460px\] {
|
|
1072
|
+
min-height: 460px;
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1081
1075
|
.tw-min-h-button {
|
|
1082
1076
|
min-height: 3.75rem;
|
|
1083
1077
|
}
|
|
@@ -1432,64 +1426,32 @@ video {
|
|
|
1432
1426
|
animation: tw-blur-out 0.2s ease-out both;
|
|
1433
1427
|
}
|
|
1434
1428
|
|
|
1435
|
-
@keyframes tw-collapse-
|
|
1429
|
+
@keyframes tw-collapse-route {
|
|
1436
1430
|
0% {
|
|
1437
1431
|
height: 100%;
|
|
1438
|
-
opacity: 1;
|
|
1439
1432
|
}
|
|
1440
1433
|
|
|
1441
1434
|
100% {
|
|
1442
1435
|
height: 60px;
|
|
1443
|
-
opacity: 0;
|
|
1444
1436
|
}
|
|
1445
1437
|
}
|
|
1446
1438
|
|
|
1447
|
-
.tw-animate-collapse-
|
|
1448
|
-
animation: tw-collapse-
|
|
1439
|
+
.tw-animate-collapse-route {
|
|
1440
|
+
animation: tw-collapse-route var(--squid-animation-collapse-to-bottom-duration, 0s) linear both;
|
|
1449
1441
|
}
|
|
1450
1442
|
|
|
1451
|
-
@keyframes tw-expand-
|
|
1443
|
+
@keyframes tw-expand-route {
|
|
1452
1444
|
0% {
|
|
1453
1445
|
height: 60px;
|
|
1454
|
-
opacity: 0;
|
|
1455
1446
|
}
|
|
1456
1447
|
|
|
1457
1448
|
100% {
|
|
1458
1449
|
height: 100%;
|
|
1459
|
-
opacity: 1;
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
|
-
|
|
1463
|
-
.tw-animate-expand-to-top {
|
|
1464
|
-
animation: tw-expand-to-top var(--squid-animation-expand-to-top-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
|
|
1465
|
-
}
|
|
1466
|
-
|
|
1467
|
-
@keyframes tw-fade-in {
|
|
1468
|
-
0% {
|
|
1469
|
-
opacity: 0;
|
|
1470
|
-
}
|
|
1471
|
-
|
|
1472
|
-
100% {
|
|
1473
|
-
opacity: 1;
|
|
1474
|
-
}
|
|
1475
|
-
}
|
|
1476
|
-
|
|
1477
|
-
.tw-animate-fade-in {
|
|
1478
|
-
animation: tw-fade-in var(--squid-animation-fade-in-duration, 0s) ease-out both;
|
|
1479
|
-
}
|
|
1480
|
-
|
|
1481
|
-
@keyframes tw-fade-out {
|
|
1482
|
-
0% {
|
|
1483
|
-
opacity: 1;
|
|
1484
|
-
}
|
|
1485
|
-
|
|
1486
|
-
100% {
|
|
1487
|
-
opacity: 0;
|
|
1488
1450
|
}
|
|
1489
1451
|
}
|
|
1490
1452
|
|
|
1491
|
-
.tw-animate-
|
|
1492
|
-
animation: tw-
|
|
1453
|
+
.tw-animate-expand-route {
|
|
1454
|
+
animation: tw-expand-route var(--squid-animation-expand-to-top-duration, 0s) linear both;
|
|
1493
1455
|
}
|
|
1494
1456
|
|
|
1495
1457
|
@keyframes tw-hide {
|
|
@@ -1553,7 +1515,7 @@ video {
|
|
|
1553
1515
|
}
|
|
1554
1516
|
|
|
1555
1517
|
.tw-animate-scale-and-fade-down {
|
|
1556
|
-
animation: tw-scale-and-fade-down var(--squid-animation-scale-and-fade-down-duration, 0s)
|
|
1518
|
+
animation: tw-scale-and-fade-down var(--squid-animation-scale-and-fade-down-duration, 0s) linear both;
|
|
1557
1519
|
}
|
|
1558
1520
|
|
|
1559
1521
|
@keyframes tw-scale-and-fade-up {
|
|
@@ -1569,7 +1531,7 @@ video {
|
|
|
1569
1531
|
}
|
|
1570
1532
|
|
|
1571
1533
|
.tw-animate-scale-and-fade-up {
|
|
1572
|
-
animation: tw-scale-and-fade-up var(--squid-animation-scale-and-fade-up-duration, 0s)
|
|
1534
|
+
animation: tw-scale-and-fade-up var(--squid-animation-scale-and-fade-up-duration, 0s) linear both;
|
|
1573
1535
|
}
|
|
1574
1536
|
|
|
1575
1537
|
@keyframes tw-slide-to-bottom {
|
|
@@ -1615,7 +1577,7 @@ video {
|
|
|
1615
1577
|
}
|
|
1616
1578
|
|
|
1617
1579
|
.tw-animate-translate-to-bottom {
|
|
1618
|
-
animation: tw-translate-to-bottom var(--squid-animation-translate-top-or-bottom, 0s)
|
|
1580
|
+
animation: tw-translate-to-bottom var(--squid-animation-translate-top-or-bottom, 0s) linear both;
|
|
1619
1581
|
}
|
|
1620
1582
|
|
|
1621
1583
|
@keyframes tw-translate-to-top {
|
|
@@ -1629,7 +1591,7 @@ video {
|
|
|
1629
1591
|
}
|
|
1630
1592
|
|
|
1631
1593
|
.tw-animate-translate-to-top {
|
|
1632
|
-
animation: tw-translate-to-top var(--squid-animation-translate-top-or-bottom, 0s)
|
|
1594
|
+
animation: tw-translate-to-top var(--squid-animation-translate-top-or-bottom, 0s) linear both;
|
|
1633
1595
|
}
|
|
1634
1596
|
|
|
1635
1597
|
.tw-cursor-help {
|
|
@@ -2666,8 +2628,8 @@ video {
|
|
|
2666
2628
|
transition-duration: 150ms;
|
|
2667
2629
|
}
|
|
2668
2630
|
|
|
2669
|
-
.tw-duration-
|
|
2670
|
-
transition-duration:
|
|
2631
|
+
.tw-duration-1000 {
|
|
2632
|
+
transition-duration: 1000ms;
|
|
2671
2633
|
}
|
|
2672
2634
|
|
|
2673
2635
|
.tw-duration-150 {
|